可视格式化（CSS 终极之南 随笔）

Posted 2020-07-18 郭逊

文档的可视格式化分为两部分。

　　竖直方向的渲染格式化和水平方向的渲染格式化。

　　文档的渲染是以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元素

　　　　会修改元素默认的框。