7.CSS笔记：盒模型解析
本系列内容由ZouStrong整理收录
整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com
了解了CSS盒模型的工作机制，我们就能确定一种行为到底是CSS引擎所定义的正确结果，还是一个BUG
一. 元素框（盒模型）
CSS假定每个元素都会生成一个或者多个矩形框，称为元素框（盒子）
元素框中心有一个内容区（content），内容区周围有可选的内边距（padding）、边框（border）和外边距（margin）
1. 包含块
每个元素都相对于其包含块摆放，包含块就是一个元素的布局上下文
对于正常流中的元素，包含块是最近的父元素
2. 正常流
正常文档流就是浏览器的默认布局方式，从上往下，从左往右，元素依次排列
3. 块级元素
块级元素如div、p等，块级元素会在元素框之前生成换行，垂直排布
4. 行内非替换元素
行内非替换元素如span、strong等，不会在元素框之前生成换行，它们水平排布
5. 行内替换元素
行内替换元素如img、input等，元素只是一个占位符，实际显示的内容会被替代，不同于行内非替换元素，他可以显示设定宽高，和上/下、内/外边距
二. 块级元素
块级元素的width属性指的是从左内边界到右内边界的距离，height属性指的是从上内边界到下内边界的距离
不同的宽、高，内、外边距相结合，就决定了文档的布局
1. 块级元素水平格式化
水平格式化最大的问题来自于，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，其它值必须设置为特定的值（包括默认的0）
可以取负值的就只有margin-left和margin-right
使用auto
如果设置width、margin-left、margin-right中的某个值为auto，余下的两个属性为特定值，那么被设置为auto的值将自动计算，从而使元素框的宽度等于父元素的width
如果父元素width为400，子元素的margin-left为100，width为100，margin-right为auto，那么margin-right将自动获得200
但是如果三个属性都设置为具体值呢？即这些属性过分受限，那么此时总会把margin-right设置为auto，还是上面的例子，3个属性都为100，此时margin-right将被设置auto，也就是自动获得200
两个auto
如果出现两个auto，如两个外边距都设为auto，他们将会获得相同的值，从而导致元素居中显示
如果一个外边距和width为auto，则为auto的外边距为0，而width会设置为所需的值，使得元素完全填充其包含块
三个auto
如果出现三个auto，两个外边距则都会成为0，而width尽可能宽
负外边距
7个水平属性的总和要等于父元素的width
当出现负外边距的时候，并且width没有设置值（或设置为auto）得时候，width就会比父元素的width还要宽
当所有水平属性都指定为特定值的时候，受过分受限的限制，要求重置右外边距，这也可能会得到一个负右外边距
百分数
当水平属性使用百分数时（只有边框不可使用百分数），是相对于父元素的width来计算的
2. 垂直格式化
元素的默认高度由其内容决定，但可以显式块级元素内容区的高度
垂直格式化的7个属性
- margin-top
- border-top
- padding-top
- height
- padding-bottom
- border-bottom
- margin-bottom
这7个属性的值必须等于包含块的height
这7个属性，也只有3个属性可以设置为auto——即height、margin-top、margin-bottom，其它值必须设置为特定的值（包括默认的0）
可以取负值的就只有margin-top、margin-bottom
使用auto
对于垂直属性来说，对margin-top、margin-bottom使用auto，他们都会自动计算为0，也就是无法通过将元素的上下外边距设为auto来使元素垂直居中
当块级元素的高度被设置为auto时分两种情况讨论
当只包含行内元素或者文本时，则块级元素的高度会自动扩展到包含所有的文本内容
当只包含块级子元素时，其高度将是从最高的块级子元素的上边框到最低的块级子元素的下边框之间的距离，也就是子元素的外边距会超出父元素，不过如果父元素有内边距或者边框，则子元素的外边距将会被包含在内，不会溢出
使用百分数
将元素的height设置为百分数，是相对于包含块的height
但是如果没有显式声明包含块的height，百分数高度会重置为auto
<div style="height:auto">
<!--p的高度被重置为auto，即p与div高度相同-->
<p style="50%"></p>
</div>此外，垂直内外边距使用百分比时，仍然是相对于父元素的width来计算
垂直外边距合并
垂直相邻的外边距会合并，这包括兄弟元素之间，也包括子元素和父元素之间
但是一旦有边框或者内边距阻隔，父元素和子元素的垂直外边距就不会合并了
此外，浮动元素的垂直外边距不会合并
三. 行内元素
块级元素生成一个元素框，那么行内元素呢？
1. 行内非替换元素
对于行内非替换元素或者直接的文本内容（匿名文本），font-size值决定了内容区的高度
而再加上line-height值，就构成了行内框
行内非替换元素的排布，符合水蛇原理
四 . 总结
浏览器会为大多数块级元素指定默认的内、外边距，所以全局reset十分必要，通过全局reset，我们可以取消元素的默认样式，转而添加自己的样式，更容易取得一致的跨浏览器体验
当使用百分比设置width、height，margin，padding时
- width始终相对于父元素的宽度
- height相对于父元素的高度（但是父元素必须明确指定了高度）
- margin 和 padding ，不管是上下左右，都是相对于父元素的宽度