你的位置:首页 > 软件开发 > 网页设计 > css细节复习笔记——基本视觉格式化

css细节复习笔记——基本视觉格式化

发布时间:2015-04-02 16:00:19
css包含如此开放、如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数。 基本框css假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素中心有一个内容区,这个内容区周围包含可选的内外边距和边框(之所以认为是可选,是因为可以设 ...

css细节复习笔记——基本视觉格式化

css包含如此开放、如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数。

 

基本框

css假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素中心有一个内容区,这个内容区周围包含可选的内外边距和边框(之所以认为是可选,是因为可以设置为0)。

对不同类型的元素格式化时存在着差别。块级元素的处理就不同于行内元素,而浮动元素和定位元素也分别有各自不同的表现。

包含块

每个元素都相当于包含块摆放;可以这么说,包含块就是一个元素的”布局上下文“,css2.1定义了一系列规则来确定元素的包含块。

 

常用名词:

正常流,文本从左向右,从上向下显示。要让一个元素不在正常流中,唯一的办法是使之成为浮动或定位元素。

非替换元素,如果元素的内容包含在文档中,则称之为非替换元素。

替换元素,指用作为其他内容占位符的一个元素。替换元素的一个经典例子就是img元素。它只是指向一个图像文件,这个文件将插入到文档流中该img元素本身的位置。

块级元素,这是指段落、标题或div之类的元素。这个元素在正常流中,会在其框之前和之后生成”换行“,所以处于正常流中的块级元素会垂直摆放。通过声明display:block,可以让元素生成块级框。

行内元素,这是指strong或span之类的元素。这个元素不会在之前或之后生成”行分割符“,它们是块级元素的后代。通过声明display:inline,可以让元素生成vyige行内框。

根元素,位于文档流顶端的元素,在html文档中,这就是元素html。

 

块级元素-水平格式化

width并不是指可见元素框的宽度,如果为一个元素声明了内编剧、边框以及宽度,他们指定的宽度则是左外边界到右外边界的距离。可以通过设定box-sizing:content-box来模拟ie6的怪异现象,即使得元素的宽度为实际设置的宽度width,而不是width+padding+border。

使用auto

<div class ="container1"><p>A paragraph</p></div>

原标题:css细节复习笔记——基本视觉格式化

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。