## 讲讲盒模型 **考察点** 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/