### 3.1 块级元素
每个元素都有两个盒子：外在盒子和内在盒子。外在盒子负责元素是否可以一行显示，还是只能换行显示；内在盒子（容器盒子）负责宽高、内容呈现等等。`display: block`实际由外在的块级盒子和内在的块级容器盒子组成。`display: inline-block`实际由外在的内联盒子和内在的块级容器盒子组成。`display: inline`内外均是内联。
### 3.2 width/height作用的具体细节
* 正常流（block、inline-block）的默认宽度是自适应的（尽可能填满父级宽度）
* 绝对定位的宽度默认情况下由其内容决定大小
* 当left、top、bottom、right对立方同时存在时，元素宽度为格式化宽度，大小相对于最近的`position: !static`的祖先元素计算
inline-block、float、absolute（relative）均具有包裹性：尺寸由内容决定，但永远小于外部包含块的尺寸。
```
<div class="box">
<p class="content">文字内容</p>
</div>
.box {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}
//正常p的宽度为父级100%，而inline-block约束了p标签默认宽度由内容决定，当文字很长很长超出父级宽度时，呈现第二行左侧居中效果。当内容小于父级宽度时，呈现居中父级的效果。
```
默认情况下，width是作用在`content box`中的，比如你设置了width为100px，padding为2px，border为1px，那么最终容器的宽度就是106px（高度也是如此）。盒子模型由：`content box`、`padding box`、`border box`这三者组成，`margin`会影响盒子的布局位置但不会影响盒子的计算宽度和高度。
我们可以使用`box-sizing`来改变默认的盒字模型计算方式（IE8浏览器需要加-ms-前缀，IE9及以上就不用了）：
* content-box 默认值，设置的宽度仅仅是width
* padding-box 设置的宽度包括了padding+width（没有浏览器支持）
* border-box 设置的宽度是总宽度，包括了border+padding+width
flex只能在IE10及以上版本使用。
`height: 100%`想要生效必须首先`html, body { height: 100% }`，然后一层一层指定元素的高度直到该标签为止。当然，绝对定位不需要这样，因为绝对定位的宽高就是根据参照物元素计算的（padding box），在绝对定位中直接使用`height: 100%`是没有任何问题的，前提是你的参照物元素已经指定了height。
`width: auto`可以理解为使用所有剩余的空间，而`width: 100%`就是父级`content box`的width的100%，所以，当父级元素剩余空间不够时，子元素设置auto会占满剩余空间，而100%会导致元素溢出。
### max与min
移动端图片自适应：
```
.container {
max-width: 100%;
height: auto !important
}
```
max-width和max-height的初始值是none，min-width和min-height的初始值是0。
min与max超越了`!important`：
```
.container {
width: 480px !impoertant;
max-width: 256px;
}
//最终width为256px
.container {
min-width: 1400px;
max-width: 1200px;
}
//最终值为1400px，秉承最大值原则
```
*** 在css3的动画中，`auto`与一个具体值之间是无法计算的，比如height从0px到`auto`来实现折叠与展开，你看到的动画效果就是硬生生的切换，没有过渡。我们可以使用max-height，让max-height从0到一个较大的数字（至少比最终高度要大）。
*** 幽灵空白节点：`inline`、`inline-block`、`inline-table`等内联元素的最前面永远有一个看不见的空白节点，不占位，也无法获取。但它就是会影响你的最终容器计算值。
```
div {
background-color: #cd0000;
}
span {
display: inline-block;
}
<div><span></span></div>
//最终div的高度却不是0
//可以把它理解为宽度为0，高度为font-size的空白字符
```
