CSS视觉渲染理论
元素框
CSS假定每个元素都生成一个或多个矩形框，称之为元素框(element-box);
各个元素框的中心是内容区域content-area
四周有内边距，边框，轮廓和外边距，宽度都可以为0
默认情况下，内容区的背景出现在内边距范围内。外边距透明
如果未设定颜色，边框的颜色与元素中内容的前景色相同。
几种不同的框体：
- 常规流动：从左到右，从上到下的顺序；
- 非置换元素：内容包含在文档中的元素；例如p
- 置换元素： 为其他内容站位的元素。如img,input等；
- 根元素： html中的根元素就是html
- 块级框： 段落，标题或div等元素生成的框；
- 行内框：strong或span等元素生成的框体，前后不换行；
- 行内块级框： 内部特征像块级元素，外部特征像行内框；
- 容纳块: 容纳块containing block由离元素最近的那个块级框的祖辈元素的边界构成；body元素的布局依赖html元素的布局，html元素对应的是初始容纳块；
调整元素的显示方式display
为display属性设值可以影响浏览器显示元素的方式；最常使用的两个值是block和inline分别设置显示方式为块级和行内显示;
块级框
主要属性是box-sizing:默认情况下，块级框的宽度和高度分别指的是内容区content area的宽度和高度;使用box-sizing属性可以改变width和height的具体意义；
取值有： content-box padding-box border-box; 默认值是content-box，适用于能设定width和heigth的所有元素；横向格式化属性
横向格式化属性有七个：分别是margin-left/border-left/padding-left/width/padding-right/border-right/margin-right;这七个属性的值加在一起就是元素容纳块的宽度；这个宽度通常为块级元素的父元素的width值；
在七个属性中，只有width、margin-left和margin-right三个属性可以设置为auto; 如果把三个属性都设置为auto之外的值(CSS术语是过约束了),margin-right将被强制设置为auto;
如果两侧的外边距都设置为auto,那么外边距的长度相等，元素在父元素内居中显示；
如果把某一边的外边距和width设为auto,那么设置auto的那个外边距等于0；
如果三个属性都是auto,那两侧的边距将被设为0；
置换元素如img,width为auto时，width等于自身内容的宽度；如果置换元素的width与自身宽度不同，height的值会按比例变化，除非明确height的值；
如果元素的尺寸出现过约束、右外边距要被重置为满足算式所需的任何值；内边距，边框和内容宽度和高度不能为负值，只有外边距的值可以为小于零
- 纵向格式化属性
纵向格式化属性类似于横向属性，同样有七个；
属性类似于横向，也是只有三个属性可以设置为auto;
纵向格式化的一个重要特征是，相邻的纵向外边距会折叠，只有外边距有这种折叠行为；较小的外边距被较大的外边距覆盖了，内边距和边框，绝不会与任何区域重叠；
行内元素
常见的行内元素有em和a等非置换元素，以及置换元素img;
- 行内布局
基本术语：
匿名文本：不在任何元素中的字符串，包含空格；
字体框： 有字体定义，也叫字符框；font-size属性控制字体框的高度；
内容区：各字符的字体框连在一起构成的方框；
行距：行距是font-size和line-height之差；只有非置换元素有行距；
行内框：内容区加行距得到的方框；
行框：一行中各行内框最高点和最低点的方框；
常用属性line-height：
line-height:这个值在很多程度上影响者行内元素的显示；
不影响块级元素，只影响块级元素内的行内内容有视觉影响；
为块级元素设置line-height值得作用是为块级元素的内容设定行框的最小高度；
设置line-height值得最佳方式是使用纯数字。这是因为纯数字相当于比例因子，可以别继承，不计算为具体的值；
行内块级元素
行内块级元素与其他元素和内容的关系按照行内框处理。也就是说，它在一行中的布局方式跟图像一样；实际上，行内块元素就是当做置换元素进行格式化的；这意味着，行内块级元素的底边默认是与文本行的基线对齐的，而且内部不会断行；
