文档的可视格式化分为两部分。
竖直方向的渲染格式化和水平方向的渲染格式化。
文档的渲染是以CSS的盒子模型为基础进行的。
CSS盒子模型从内到外是 内容->内部空白->边框->外部空白。width和height属性设置的是内容区域的大小。背景颜色和图片一直覆盖布展到border下面。外部空白 Margin的值可以是负值，其他都不能为负。
下面开始前需要普及一些概念：
包含块：
元素的父级元素叫做此元素的包含块
块级别元素
块级别元素在前面后后面产生断行。块级元素独占一行
行内元素
行内元素不产生断行
替换元素
img，form 中的input等元素属于可替换元素。他们这些表情只是占位符，为将要加载进来的图片占据位置。
一个块级元素自动伸展填充包含块。水平方向上面 margin padding border width的和等于包含块的width。如果width为已知，margin 设置为auto。那么margin自动设置为相等的两个数值，总和是包含块width。使用这个方法可以达到元素水平居中。text-align只是对块级元素中的行内元素有用。
一个块级元素的高是根据内容的高度来确定。高的margin auto自动为0.
margin的折叠。
水平方向的格式化：
行内元素设置margin，padding，border的时候，竖直方向不影响高度。水平方向影响宽度。
普及的基本概念
行高：fong-size 加上leading就是行高。
行框：
em框：每一个字就是一个EM框。
匿名框：没有标签的元素。
行内元素的padding，margin，border 不会影响元素的行高、占据的空间。
设置display元素
会修改元素默认的框。