标签：
Chapter 2 Box Model
|
Version |
Update |
Note |
|
1.0 |
2016-5-31 |
首次添加。欢迎在评论中指出错误，一经核实，立即修订，且注明贡献者。 |
1、元素的分类
1.1 替换元素
替换元素就是替身元素，它替别人占个位，它不是普通的标签，它代表某种元件。
例如：<img> <source><input><embed>……
1.2 非替换元素
大部分元素都是非替换元素。
从形式上看非替换元素是一对标签，替换元素是一个标签。
1.3 块级元素
块级元素在普通文档流中会换行。一个占一行，一行不容二块。
1.4 行内元素
行内元素在普通文档流中不会换行。
1.5 display
用display可以改变元素的显示属性。
2、包含块
许多用百分比计算尺寸的情形以及定位问题都涉及包含块的概念。
CSS2.1定义包含块的规则：
1、根元素和position:fixed的元素，其包含块为视窗（viewport），又称“初始包含块”。
2、定位为relative和stalic的元素，其包含块为父元素。
3、定位为absolute的元素，其包含块为最近的有定位的祖先元素。如果没有，则包含块为初始包含块。
3、块级元素盒模型
3.1 概述
盒模型，就是关于尺寸的一系列计算规则。
对于块级非替换元素，有一个非常重要的约束规则：
左右margin+左右padding+左右border+content的宽=父元素的content宽。
只有外边距和宽高可以设为auto，具体计算出的值由上面的公式决定。
只有外边距可以设置为负值。
垂直方向也一样。
|
非替换元素 |
|
|
content |
默认情况下由width和height指定 |
|
padding |
四周表现一致。 |
|
border |
四周表现一致。 |
|
margin |
四周表现一致。 |
3.2 垂直外边距合并
相邻的垂直方向的外边距会发生合并（重叠）。
4、行内元素盒模型
|
非替换元素 |
|
|
content |
用width和height指定宽高无效。 宽由内容决定，高由行高决定。 行高由line-height以及替换元素或inline-block纵向高度总和（包括内外边距和边宽）共同决定。 |
|
padding |
上下padding不会影响行高。左右padding会增加总宽度。 |
|
border |
左右边会显示并占据空间，将邻近内容挤开。上下边会显示，但不会占据空间，而是浮在上面。 |
|
margin |
左右margin起作用，上下margin不起作用。 |
5、inline-block盒模型
大致可以认为，替换元素的表现和inline-block是一样的，或者说inline-block这种混合特性就是用于描述替换元素的。
inline-block的尺寸计算继承了block的规则，而在是否换行这一点，它则继承了inline元素的特性。
Kidney自得其乐版CSS教程 Chapter2 Box Model
标签：
原文地址：http://www.cnblogs.com/kidney/p/5547928.html
