## 講講盒模型 **考察點** 1. 盒模型的概念和結構 2. 如何計算盒模型的高度和寬度 3. 如何改變盒模型結構 4. 塊標簽和行標簽盒模型的差別 **回答** 1. 頁面的任何一個元素可以是一個盒子，盒子包含了元素的內容(content)，內邊距(`padding`)，邊框(`border`)和外邊距(`margin`), 即盒模型，如圖所示。  2. 標準盒模型的高度(`height`)和寬度(`width`)是設置內容(content)的個高度和寬度，設置背景則包含了內容和內邊距。但是，盒模型所占的空間寬度則是內容寬度加上左右兩邊的內邊距寬度，左右兩邊的邊框寬度和左右兩邊的外邊距寬度。相同，所占空間高度也是內容高度加上上下的內邊距高度，上下的邊框高度和上下的外邊距高度。證明代碼： ```css .box-1{ background: red; width:300px; height:100px; padding:20px; border:30px solid #ddd; margin: 20px } .box-2{ background: green; width:300px; height:100px; padding:0; border:20px solid #ddd; margin: 20px } .box-3{ background: blue; width:300px; height:100px; padding:0; border:0 solid #ddd; margin: 20px } .box-4{ background: orange; width:300px; height:100px; padding:0; border:0 solid #ddd; margin: 0; } ``` ```html <div class="box-1">Box with padding, border, margin</div> <div class="box-2">Box with border, margin</div> <div class="box-3">Box with margin</div> <div class="box-4">box without noting</div> ```  代碼詳見： http://js.jirengu.com/pesos/2/ 3. 往往在布局的時候，我們希望能夠控制整盒模型的所占空間能夠不隨內容的高度和寬度變化，通過css3中的`box-sizing: border-box`可以控制，`box-sizing`有兩個值：`content-box`和`border-box`。當`box-sizing`為`content-box`時，元素設置的`height`和`width`只控制內容的高度和寬度， 元素的`box-sizing`的默認值是`content-box`；當`box-sizing`為`border-box`時，元素設置的`height`和`width`控制的是內容，內邊距和邊框的高度和寬度。證明代碼: ```css .border-box{ background: red; width: 200px; height: 100px; padding: 20px; border: 20px solid green; box-sizing: border-box; } .content-box{ background: red; width: 200px; height: 100px; padding: 20px; border: 20px solid blue; box-sizing: content-box; } .border-box-with-margin{ background: red; width: 200px; height: 100px; padding: 20px; border: 10px solid blue; box-sizing: border-box; margin: 20px; } ``` ```html <div class="content-box">content box</div> <div class="border-box">border box</div> <div class="border-box-with-margin">border box</div> ```  代碼詳見：http://js.jirengu.com/poyik/1/ 4. 如塊標簽和行標簽一節所說，行標簽設置`width`和`height`并無作用，且行標簽設置的外邊距(`margin`)的上下部分并無作用。并且，即使設置了內邊距(`padding`)和邊框(`border`), 行元素水平對齊也是從內容開始對齊。代碼證明: ```css .border-box{ box-sizing: border-box; background-color: red; height: 100px; width:800px; padding: 10px; border:10px solid blue; } span.border-box{ border:30px solid orange; } .content-box{ box-sizing: content-box; background-color: red; height: 100px; padding: 10px; border:10px solid blue; width:800px; } span.content-box{ border:20px solid orange; } span{ margin-left:20px; background: green; } ``` ```html <div class="border-box">border box block element</div> <span class="content-box">content box inline element</span> <span class="border-box">border box inline element</span> <span>pure inline element</span> <div class="content-box">content box block element</div> <span class="content-box">content box inline element</span> <span class="border-box">border box inline element</span> <span>pure inline element</span> ```  代碼詳見：http://js.jirengu.com/wavuj/4/