### 深入理解content
#### content與替換元素
我們根據“外在盒子”是內聯還是塊級將元素分成內聯元素和塊級元素兩種，也可以根據內容是否可替換將元素分為可替換元素和不可替換元素。`<img>\<object>\<video>\<iframe>`等都是可替換元素。
*** `src=""`即便是這樣仍然有圖片請求，它請求的是當前頁面數據，當沒有src屬性時，圖片便不會有任何請求。“在圖片加載完成之前用占位圖片代替直到加載完成”這一需求的最優方案是：
```
<img>
<img src="后臺圖片.jpg">
img {
display: inline-block;
visibility: visible;
}
img[src] {
visibility: hidden;
}
//在firefox中，img是inline，導致圖片寬高設置無效，因此手動設置為inline-block
```
### padidng屬性
#### padding與元素尺寸
```
.box {
width: 80px;
padding: 20px 60px;
box-sizing: border-box;
}
//設置了border-box，按理說最終寬度是80px，但由于120px的padding超出了范圍，導致最終寬度是120px。因此，設置了border-box后，請保證你的border+padding+content小于等于width。
```
*** 實現“登錄 | 注冊”效果（|的高度比文字要小）：
```
<a>登錄</a><a>注冊</a>
a + a:before {
content: "";
font-size: 0;
padding: 10px 3px 1px; (上10 右3 下1 左3)
margin-left: 6px;
border-left: 1px solid gray;
}
//如果不加font-size: 0，最終結果就是：“登錄 | 注冊”（|的高度是文字高度）。因為內聯元素高度默認由font-size控制。
a + a:before {
content: "";
border-left: 1px solid gray;
}
//但是我們希望|的高度能夠小一些，因此將font-size設置為0，用border控制高度。在padding為0時此時border在注冊的左下方：“登錄 . 注冊”。padding-top使其向上延伸，padding-bottom使其向下延伸。
```
padding和margin百分比值無論是水平方向還是垂直方向都是相對于寬度計算的。
平時的網頁很少只用`<button>`，而是用`<a>`來代替。但是，在表單中，有時候需要用到`<button>`自帶的交互行為，因此可以這樣：
```
<button id="btn"></button>
<label for="btn">按鈕</label>
button {
position: absolute;
clip: react(0 , 0, 0, 0); //隱藏之
}
label {
display: inline-block;
line-height: 20px;
padding: 10px;
}
```
line-height就是文字加上空白加下空白的高度。可以理解為是一行文本的最終占用高度。
#### padding與圖形繪制
```
//繪制“三”
div {
display: inline-block;
width: 140px;
height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bototm: 10px solid;
background-color: black;
background-clip: content-box;
}
//繪制圓環（radio效果）
div {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: black;
background-clip: content-box;
}
//內心圓是width100和height100，中間空間的padding，外圓是border。bkc默認是連padding也填充為背景色，使用bkc-clip: content-box 將背景色設置為不填充padding。
```
### margin屬性
#### margin與元素尺寸以及相關布局
```
<div>
<img/>
<p>內容</p>
</div>
img {
width: 100px;
height: 100px;
background-color: red;
}
p {
background-color: blue;
}
```
從圖中可以看出，流式盒子會蓋住正常流盒子。
如何將最后一個元素的margin去掉？一般做法是：
```
div {
margin-right: 20px;
}
div:nth-child(最后一個元素索引) {
margin-right: 0;
}
```
可以這樣做，最簡單高效，也不用去計算最后一個元素索引：
```
.father {
margin-right: -20px;
}
.child {
margin-right: 20px;
}
```
只能使用子元素的margin-bottom來實現滾動容器的底部流白。滾動容器設置padding-bottom在有滾動條時會被忽略。
利用margin實現等高布局：
```
.box {
overflow: hidden; （!!!!!!）
height: 500px;
}
.left, .right {
width: 50%;
float: left;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
```
#### margin合并
margin合并：只發生在塊級元素上，并且只發生在垂直方向上。
* 相鄰兄弟之間的margin合并
* 父級和第一個/最后一個元素的margin合并，以下三種設置的最終效果是相同的：
```
//1
.child { margin-top: 80px; }
//2
.father { margin-top: 80px; }
//3
.father, .child { margin-top: 80px; }
//這下你知道為什么給第一個子元素設置margin-top后，父元素卻跟著向下移動的原因了吧。
```
如何阻止父子之間的margin合并？
對于margin-top合并：
* 父元素overflow: hidden
* 父元素設置border-top
* 父元素設置padding-top
* 父與第一個子之間添加一個內聯元素
對于margin-bottom合并：
* 父元素overflow: hidden
* 父元素設置border-bottom
* 父元素設置padding-bottom
* 父與最后一個子之間添加一個內聯元素
* 父元素設置height、min-height或max-height中的任意一個
以上設置滿足一個即可。
margin合并的計算規則：正正取大值（10,20->20），正負相加（-10,20->10），負負最負值（-10,-20->-20）。
#### 深入理解margin: auto
margin: auto的填充規則如下：
* 一側定值，一側auto，則auto為剩余大小
* 兩側均auto，平分剩余空間
* 只有一側auto，另一側沒有設置，則auto為剩余空間的全部
*** 水平垂直居中
```
//在absolute下，對側均為0會導致容器自動填充至父級寬度（高度）
.son {
position: absolute;
left: 0;
right: 0;
}
```
```
.son {
position: absolute;
left: 0;
right: 0;
margin-left: 50px;
margin-right: 50px;
}
//加了marginHorizontal后，內容寬度少了100px，多了水平方向100px的可填充空間，如果我們有width，就可以用marginHorizontal: auto來填充剩余空間。
```
```
.son {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
}
//首先四方向均為0為容器爭取到了width和height均為100%的可填充空間，在設置width\height后，可填充空間就只剩下father-son了，再設置margin: auto讓son的margin占據全部剩余空間，在視覺上就是水平垂直居中了。
```
#### margin合并的無效情況
一個普通元素，在默認流下，其定位方向是左側以及上方，此時只有margin-left和margin-top可以影響元素定位。如果改變了定位方向，如`float: right`或者`absolute, right`定位，則margin-right可以影響元素定位。
### border屬性
border-width不支持百分比。
border與三角：
```
div {
border: 10px solid;
border-color: black transparent transparent;
}
//效果就是一個頭向下的高度為5px的等腰直角三角形（border-top部分）
```
