«

»

浏览器中CSS的盒模型

浏览器 盒 模型首先是CSS中画布的概念,根据CSS2规范,名词“画布”描述为“格式化的结构渲染所用的空间”—也就是浏览器绘制内容的地方。画布在空间的每个维度上都是无限的,但浏览器会基于视口的尺寸选择一个初始的宽度。根据http://www.w3.org/TR/CSS2/zindex.html,画布在嵌套时是透明的,否则会使用这个浏览器指定的颜色。

CSS盒模型

CSS的盒模型描述成文档树里为元素们生成的一个矩形盒,依照可视格式化的模型来布局。每个盒子有一个内容区(例如,文本,一张图片等等),以及可选的围绕着它的padding,border,和margin区域等等。

浏览器中CSS的盒模型

图14:CSS的盒模型

每个节点会生成0..n个这样的盒子。

所有元素有个“display”属性来决定会生成何种类型的盒子。

例子:

缺省是inline的,但浏览器样式表会把其它的设成缺省。例如—缺省的“div”元素是block。

你可以在http://www.w3.org/TR/CSS2/sample.html 找到缺省样式表例子。

定位方案

有三种方案:

1 普通—对象依据它在文档中的位置来定位—这就是说它在渲染树中的位置跟它在dom树中的位置相似,并且以它的盒类型和尺寸来布局。

2 浮动—对象先象普通流程一样布局,然后尽可能的向左向右移动。

3 绝对—对象放置按照渲染树中的位置而不是DOM树中的位置。

定位方案用“position”属性和“float”属性来设置。

静态和相对的会使用普通流程

绝对和固定的会产生绝对定位。

静态定位里不会指位置,会采用缺省定位方案。在其它方案里,网页编写者指定位置—顶部,底部,左,右。

盒布局的方法取决于:

1 盒类型

2 盒大小

3 定位方案

4 外部信息—象图像尺寸和屏幕尺寸等。

盒类型

block盒:组织成一个块—在浏览器窗口里有它自己的矩形绘制区。

浏览器中CSS的盒模型

图15:block盒

inline盒:没有它自己的块,但是处于一个包含它的块里。

浏览器中CSS的盒模型

图15:inline盒

block被排列成垂直方向,一个接一个的。inline的则水平排列。

浏览器中CSS的盒模型

图16:bolck和inline排列

inline的盒子被放置在行内或者“行盒”里。行至少要跟最高的盒子一样高,但是可以更高一些。当盒子是“基线”对齐时—意味着一个元素的底部对齐于另一个盒子的某一点而非底部。在容器的宽度不够的情形下,inline盒子会放在多行。这是在一个段落里经常发生的事情。

浏览器中CSS的盒模型

图17:行

(待续)

1 星2 星3 星4 星5 星 (尚无评分)
Loading...Loading...

相关文章

浏览器中元素的定位类型 网页中元素的定位用由position属性确定,分为绝对定位,相对定位。除此之外还有浮动定位。position的取...
浏览器的绘制阶段 在浏览器的绘制阶段,会遍历渲染者树,并调用渲染者的“paint”方法在屏幕上显示内容。绘制需要用到UI基础...
浏览器的布局 下来就是浏览器的布局过程。当渲染者被创建并且增加到树上时,它并没有位置和尺寸。计算这些值被称为布...
浏览器样式表的规则匹配和级联顺序 浏览器中CSS样式的匹配并非总是那么简单,某些情况下可能需要对规则加以处理以使匹配更容易。下面是几个...
浏览器中使用规则树来计算样式 当计算某个元素的样式内容时,我们首先计算规则树里的一条路径或是使用一条已经存在的路径。接下来就开...
浏览器的样式计算 建立渲染树时需要计算每个渲染对象的可视化属性。这是通过计算每个元素的样式属性来实现的。样式包含HTM...
浏览器中渲染树的构造 当DOM树被构造的同时,浏览器构造了另外一棵树,渲染树。这是棵按其显示顺序排列的可视化元素构成的树。...
浏览器处理脚本和样式表的顺序 因特网的模式是同步的,开发者希望解析器在遇到一个