首先是CSS中画布的概念，根据CSS2规范，名词“画布”描述为“格式化的结构渲染所用的空间”—也就是浏览器绘制内容的地方。画布在空间的每个维度上都是无限的，但浏览器会基于视口的尺寸选择一个初始的宽度。根据http://www.w3.org/TR/CSS2/zindex.html，画布在嵌套时是透明的，否则会使用这个浏览器指定的颜色。
CSS盒模型
CSS的盒模型描述成文档树里为元素们生成的一个矩形盒，依照可视格式化的模型来布局。每个盒子有一个内容区（例如，文本，一张图片等等），以及可选的围绕着它的padding，border，和margin区域等等。
图14：CSS的盒模型
每个节点会生成0..n个这样的盒子。
所有元素有个“display”属性来决定会生成何种类型的盒子。
例子：
block - generates a block box. inline - generates one or more inline boxes. none - no box is generated.
缺省是inline的，但浏览器样式表会把其它的设成缺省。例如—缺省的“div”元素是block。
你可以在http://www.w3.org/TR/CSS2/sample.html 找到缺省样式表例子。
定位方案
有三种方案：
1 普通—对象依据它在文档中的位置来定位—这就是说它在渲染树中的位置跟它在dom树中的位置相似，并且以它的盒类型和尺寸来布局。
2 浮动—对象先象普通流程一样布局，然后尽可能的向左向右移动。
3 绝对—对象放置按照渲染树中的位置而不是DOM树中的位置。
定位方案用“position”属性和“float”属性来设置。
静态和相对的会使用普通流程
绝对和固定的会产生绝对定位。
静态定位里不会指位置，会采用缺省定位方案。在其它方案里，网页编写者指定位置—顶部，底部，左，右。
盒布局的方法取决于：
1 盒类型
2 盒大小
3 定位方案
4 外部信息—象图像尺寸和屏幕尺寸等。
盒类型
block盒：组织成一个块—在浏览器窗口里有它自己的矩形绘制区。
图15：block盒
inline盒：没有它自己的块，但是处于一个包含它的块里。
图15：inline盒
block被排列成垂直方向，一个接一个的。inline的则水平排列。
图16：bolck和inline排列
inline的盒子被放置在行内或者“行盒”里。行至少要跟最高的盒子一样高，但是可以更高一些。当盒子是“基线”对齐时—意味着一个元素的底部对齐于另一个盒子的某一点而非底部。在容器的宽度不够的情形下，inline盒子会放在多行。这是在一个段落里经常发生的事情。
图17：行
（待续）
原创文章，作者：苏葳，如需转载，请注明出处：https://www.swmemo.com/2101.html
