css盒模型理解
摘要：
css盒子模型概念
css盒子模型又稱框模型 (Box Model) ，包含了 元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin） 幾個要素。
圖中element元素是實際內容，也就是元素框，緊挨著元素框外部的是內邊距pa...
css盒子模型概念
css盒子模型又稱框模型 (Box Model) ，包含了 元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin） 幾個要素。
圖中element元素是實際內容，也就是元素框，緊挨著元素框外部的是內邊距padding，其次是邊框（border），然後最外層是外邊距（margin），整個構成了盒子模型。通常我們設定的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。 那麼：
- 總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + border的左右寬度 + margin的左邊距和右邊距的值；
- 總高度 = 元素（element）的height + padding的上下邊距的值 ＋ border的上下寬度 + margin的上下邊距的值。
css外邊距合併(疊加)
兩個上下方向相鄰的元素框垂直相遇時，外邊距會合並，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.top{
width:400px;
background: #0ff;
height:100px;
margin:30px 30px;
}
.bottom{
width:400px;
height:100px;
margin:50px 30px;
background: #ddd;
}
</style>
</head>
<body>
<section class="top">
<h1>上</h1>
margin-bottom:30px;
</section>
<section class="bottom">
<h1>下</h1>
margin-top:50px;
</section>
</body>
</html>
需要注意的是：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。
邊距合併解決方案(BFC)
BFC其英文拼寫為 Block Formatting Context 直譯為“塊級格式化上下文”
元素產生BFC的條件
- float屬性不為none（脫離文件流）
- position為absolute或fixed
- display為inline-block,table-cell,table-caption,flex,inine-flex
- overflow不為visible
BFC元素所具有的特性
- 在BFC中，盒子從頂端開始垂直地一個接一個地排列。
- 盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子垂直方向的margin會發生重疊。
- 在BFC中，每一個盒子的左外邊距（margin-left）會觸碰到容器的左外邊緣（border-left），對於從右往左的格式來說，會觸碰到右邊緣。
- BFC不會與浮動盒子產生交集，而是緊貼浮動元素邊緣。
- 計算BFC高度BFC時，自然也會檢測浮動的子盒子高度。
應用場景
- 自適應兩欄佈局
- 清除內部浮動
- 防止垂直margin重疊
上面邊距合併例子調整：
<section class="top"> <h1>上</h1> margin-bottom:30px; </section> <!-- 給下面這個塊新增一個父元素，在父元素上建立bfc --> <div style="overflow:hidden"> <section class="bottom"> <h1>下</h1> margin-top:50px; </section> </div>
關於bfc的應用的案例這裡就不在一一舉出了，大家去網上找一些其他的文章看一下。
box-sizing屬性介紹
box-sizing : content-box|border-box|inherit
總寬度=margin+border+padding+width;總高度=margin+border+padding+height 總寬度=margin+width; 總高度=margin+height
偷兩張圖貼起來~
