css盒模型
在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內(nèi)容。每個盒子有四個邊：外邊距邊, 邊框邊, 內(nèi)填充邊 與 內(nèi)容邊。
content-box
默認(rèn)值，標(biāo)準(zhǔn)盒子模型。 width
與 height
只包括內(nèi)容的寬和高， 不包括邊框（border），內(nèi)邊距（padding），外邊距（margin）。
border-box（ie盒模型）
width
和 height
屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。這是當(dāng)文檔處于 Quirks模式 時Internet Explorer使用的盒模型。
background-box
元素的background范圍覆蓋了content, padding和border，但不包括margin.
外邊距合并（外邊距塌陷）
發(fā)生margin合并的三種基本情況:
相鄰的兄弟姐妹元素
塊級父元素與其第一個/最后一個子元素
如果塊級父元素中，不存在上邊框
、上內(nèi)邊距
、內(nèi)聯(lián)元素、清除浮動
這四條屬性（也可以說，當(dāng)上邊框?qū)挾燃吧蟽?nèi)邊距距離為0時），那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“。此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象，換句話說，此時這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。空塊元素（僅設(shè)置margin元素）
解決方法
- 在父層div加上：overflow:hidden；
- 把margin-top外邊距改成padding-top內(nèi)邊距;
關(guān)于讓一個未知寬高的img在一個div中居中的問題
這是兼容ie8的解決方法
<!-- HTML結(jié)構(gòu) -->
<div><span>here are test words</span></div>
<!-- 樣式如下 -->
<style>
img {
vertical-align: middle;
}
div:before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
span {
vertical-align: middle;
}
</style>
display:inline-block
將圖片既具有block的寬度高度特性又具有inline的同行特性。
這里的img與一個height:100% 的span同行，使這一行的行高撐滿div。vertical-align: middle;
讓行內(nèi)元素垂直居中。text-align: center;
頁面內(nèi)居中對齊，因為水平上有寬度的只有圖片，所以圖片水平也居中了。關(guān)于為什么〈span〉也要加vertical-align：
因為你如果不給span設(shè)置屬性，css會給span一個默認(rèn)屬性：vertical-align:baseline;也就是span底部對齊父元素的基線（baseline），你在span里打個字就看出來了，基線被自動畫在div的底部的話，<img>就跟著依據(jù)這條基線為軸垂直居中了。
如果不用兼容呢
- 方法一：絕對定位
#container{
position:relative;
}
#center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 方法二：flex布局
#container{
display:flex;
// display: -webkit-flex; Safari需要使用特定的瀏覽器前綴
justify-content:center;
align-items: center;
}
#center{
}
