基本视觉格式化

基本框

• css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区。这个内容区周围有可选的内边距，边框和外边距。

包含块（布局上下文）

• 每个元素都相对于其包含块摆放。正常流中的一个元素，其包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界构成。

正常流是指西方语言文本从左向右、从上向下显示。大多数元素都在正常流中，除了浮动或定位元素。

块级元素

• 一般一个基本框从左到右有这几个部分：
  1. 左外边界
  2. 左外边距
  3. 左边框
  4. 左内边距
  5. 左内边界
  6. 内容区宽度
  7. 右内边界
  8. 右内边距
  9. 右边框
  10. 右外边距
  11. 右外边界
• 一般地，一个元素的宽度（width）被定义为从左内边界到右内边界的距离，高度同理。高度和宽度属性都可以应用到元素。
• 不同的宽度、高度、内边距和外边距相结合，就可以确定文档的布局。

水平格式化

• 区分width和可见元素框的宽度，width属性是不包含padding和margin的（例外的是使用了CSS3的box-sizing），而可见元素框宽度是包含了padding和margin的
• 有个规则，正常流中块级元素框的水平部分总和就等于父元素width。这一句话即所有子元素的width加上它们的左、右内边距，边框和外边距就是父元素的width。

水平属性

• 水平格式化有7大属性，从左至右，分别是：margin-left, border-left,padding-left,width,padding-right,border-right,margin-right。这7个属性的值加在一起必须是元素包含块的宽度，这往往是块元素的的父元素的width。
• 这7大属性只有其中3个可以设置为auto（width，margin-left,margin-right）

使用auto（不考虑3个值以外的属性）

1. 3个auto（margin-left,width,margin-right均为auto），其中width会占满父元素width，而margin-left,margin-right为0
2. 2个auto（比如margin-left,width为auto），这时设置auto的属性会为0，width会将父元素width的剩余空间占满
3. 1个auto，如果设置3个值其中一个为auto，那么设置auto的属性会确定所需的长度，保证3个值加起来等于父元素的width
4. 0个auto同时三者设置的和超过父元素width，则margin-right会为auto。

（未完待续）

负外边距

• 外边距可以为负
• 7个水平属性总和要等于父元素的width，严格的说这个总和不能比包含块更宽。所以当外边距为负时子元素的width会超过父元素width，达到一种超出的效果
• 只要所有属性都是大于或等于0的，元素就不会大于父元素的内容区

百分数

• 值声明为长度还是百分数，并没有改变上述水平格式化规则