淺談CSS盒模型
一、什麼是css盒模型
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式
上邊這句話摘自W3C，翻譯成人話：css盒模型又叫css框模型，由4部分組成：框內容、內邊距、邊框、外邊距。通過css來設定這些屬性決定這個盒子長什麼樣！
廢話少說，直接上圖
從技術角度看盒模型（圖片摘自W3School）：
解釋解釋，哪部分是外邊距、邊框、內邊距、盒元素內容。
外邊距（margin）：如圖中所示最外層的虛線到最外層的實線之間的內容都屬於外邊距部分，作用：設定兩個相鄰同級盒子之間的距離
邊框(border)：最外層的實線就是邊框，邊框也有自己的寬度，可以通過border-width設定（邊框外邊是外邊距，邊框裡邊是內邊距）
內邊距(padding)：最外層實線部分到最內層虛線部分就是內邊距，作用：設定單一盒子的邊框到內容之間的距離
元素內容(content)：最裡邊虛線部分包含的部分就是盒子的內容部分，作用：設定一個盒子內容的大小
是不是聽完這些，感覺還是不夠直觀。那在來一張圖。
從生活角度看盒模型：
通常我們買的新手機都有包裝盒，看我們包裝盒的結構，包裝盒一般都有個外紙殼，還有避免手機被碰撞在外紙殼和手機之間加了一層軟和東西（我們暫且稱為泡沫），泡沫裡邊放的就是手機。好， 挨個解釋：
手機外紙殼：橙色邊框部分，相當於盒模型中的邊框（border）部分，手機外紙殼也有自己的寬度（外殼寬度也就相當於邊框的寬度），並且外紙殼越厚，整個包裝就顯得越大。
手機內的泡沫：圖中有文字標出，也就是褐色部分，相當於盒模型中內邊距（padding）部分，泡沫隔開了外紙盒和手機，泡沫越多，手機盒紙盒的距離就越遠，是不是解釋了上邊的padding表示邊框到內容之間的距離
手機：盒子中盛放的整個手機相當於盒模型的內容部分。手機也有自己的尺寸，相當於盒模型中盒內容（content）
與其他盒子的距離：這個概念牽扯到兩個盒子，好多文章解釋盒模型只用一個盒子來解釋，我總感覺不太直觀，所以再來一張圖（實在找不到合適的素材，只好自己畫了）。
圖中兩個盒子之間的距離為50cm,這個距離就是用盒模型中的margin來表示。
二、影響盒子大小的元素
上面解釋了盒模型的組成部分有四部分，哪些部分是影響盒子大小的呢？不賣關子直接給答案。
盒子實際寬度=盒子內容寬度（content）+左右內邊距(padding)+左右邊框寬度（border）。
這時候咱們還可以對比手機包裝盒那個例子。影響手機包裝盒的因素有哪些?是不是
手機包裝盒實際寬度=手機大小+兩側泡沫寬度+最外層紙殼寬度。
這麼一對比是不是好記多了....
三、案例
<head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background: #ccc;
padding: 10px 20px 30px 40px;
border-top: 10px solid lightblue;
border-bottom: 20px solid lightblue;
border-left: 30px solid lightblue;
border-right: 40px solid lightblue;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
看一下渲染效果：
左側圖為瀏覽器中渲染出來的效果，
中間圖是審查元素時給的提示效果，標明盒子內容寬度為230px,高度為170px。
想一下，我程式碼中明明設定的width和height都是100px.是不是渲染的比設定的寬度和高度都要大，是怎麼計算的呢？
看最右側圖是瀏覽器控制面板的盒模型分析圖。
先看寬度部分：左邊border:30px,右邊border:40px,左邊padding:40px，右邊padding:20px,設定的寬度width:100px;
總寬度=30px+40px+40px+20px+100px=230px.
再看高度部分：上邊border:10px,下邊border:20px,上邊padding:10px,下邊padding:30px,設定的高度height:100px;
總高度 :10px+20px+10px+30px+100px=170px
咱們用第二點的公式是不是驗證了為什麼盒子的寬度和高度是230px和170px了。
看完這些是不是對盒模型有所瞭解了？
&n