### 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的空白字符
```
