CSS权威指南 - 基本视觉格式化 1
basic visual formatting
本章是在讲述完字体和文本之后。
基本格式化就是模型应该处理成什么样子的基础规则。
浏览器引擎应该按照这个规则来渲染出结果（w3标准）。
基本框 basic box
basic box model
最开始需要知道的就是基础盒子模型这种方式。每个元素都会生成一个矩形的盒子（CSS2）。
有content内容、padding内边距、border边框、margin外边距。
背景色为content和padding的背景色。padding，border不能为负数，border不能为百分比。
包含块 containing box
每个元素都放在一个box里，称为containing box，就是元素布局的环境。包含块可以是祖先的块级框，祖先的表格的单元格，或者祖先的行内框，这三者的内容（content）边界。
就是说祖先的block、table cell、inline block的content的边界，content也就是之前提到的盒子模型的content。
回忆
normal flow ，replaced(noreplaced) element，block-level element，inline element，root element的概念。
块级元素
必须对块级元素的边界区域清楚，比如内容的宽度不包括内边距。为什么这样设计，如果宽度属性包括padding，那内容物的宽度就是宽度减去padding，看起来感觉似乎不太好。
水平方向的格式化
水平方向的属性
外边距，边框，内边距，内容物，内边距，边框，外边距
这7个值宽度属性有值、百分比、auto 三种。
不过只有外边距和内容物的宽度可以设置成auto。
内容物宽度设置成auto让内容物大到足以填充包含块的内容边界。
margin左右两个auto可以让设置了具体width的元素居中。
如果都设置成auto，那么还是内容物会足够大到填充内容边界。
负外边距
为负数就好像，比如左边的margin为负数吧，好像挖一块位置出来，然后，把盒子放回去。
百分数
都设置成百分数，或者百分数和长度单位一起用在水平方向的几个距离上。就要计算了，也就是解个一元一次方程。
边框的长度不能为百分数，如果你使用边框的话，就不能用百分数做灵活的布局了。
替换元素
和非替换元素差不多，只有一个不一样，元素的宽度是内容的固有宽度。比如一个图片，替换元素的宽度默认是图片的宽度，而不是填充整个元素。
下面讨论垂直水平的格式化。
垂直方向格式化
默认元素的高被内容和内容的宽度决定，比如段落的越窄，里面的行内元素就会变高，以足以显示所有的内容。
在CSS里，可以严格设置任何一个块级元素的高，当设置的高，足够元素显示，多余的部分就像padding一样留出来。不够元素显示的话，根据具体的overflow的设置，以滚动条的形式或者其他。
垂直方向属性
和水平的类似，外边距，内边距，边框，高度。也是外边距和高度可以设置成auto。
但，和水平不一样的，如果margin上下设置成auto，元素不会垂直居中。会默认设置为0。
为什么？找到了讨论的网页。我思考了一下，没搞太清楚。
https://css-tricks.com/forums/topic/why-cant-we-center-something-vertically-using-margin-auto-0/
高度百分数
一个块级元素、正常流的元素的高度被设置为一个百分数，高度是其百分数之一个设定了高度的包含块的高度。如果包含块的高度没有声明，那么设置为百分数高度的子块级元素就会被重置为auto，而被设置为0。
自动高度
前面提到，一个正常流、块级元素的高度设置成auto，会自动将高度适应为显示所有的行框（line-box）里的行内内容（inline-content）。
一个自动高度&正常流&块级的元素A，如果只有块级的子元素。这个元素A的内容的高度，就是最高块级子元素a的边框（border）到最低的b边框的边缘。如果这个元素A有内边距或者边框，元素A的高度就是，a到b的（margin）的边缘。
垂直方向的塌陷
一个无序列表（ul）下的列表（li）上下边距都是15em，那么每个列表之前的距离只有15em，每个li之间的距离塌陷（collapse）。
把块级元素想成一个纸片，周围的外边距margin是塑料片，相邻的两个元素相互靠近合并，直到一个的塑料片边缘碰到对方的纸片。
多个外边距的合并。比如两个margin和一个margin合并，前者两个中的大一点的和后者发生合并。
负垂直外边距
和水平方向的负外边距类似，上外边距为负值，就相对于忘上拉一截。这个元素仍然在正常流中，后面的接着的元素会跟着往上拉一截。
列表项
list-item 也是块级元素。列表项的标志比如数字或者点，默认不属于列表项的内容content。可以用list-style-position设置到属于内部，list-style-position：inside。