css盒模型

css盒模型

页面渲染时，dom元素才用的是布局模式。可通过box-sizing进行设置。根据计算宽高的区域可分为：

• content-box （w3c标准盒模型）
• border-box (IE盒模型)
• padding-box (FirFox曾经支持)
• margin-box (浏览器还未实现)

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

<style>
div {
  width: 160px;
  height: 80px;
  padding: 20px;
 border: 8px solid orange;
  background: pink;
}

 /**元素的总宽度 = 160 + 20*2 + 8*2; 总高度 = 80 + 20*2 + 8*2 ;padding和border的宽度没有包括在width: 160px中 */ 
.content-box { 
  box-sizing: content-box; 
}

 /** 元素的总宽度 = 160; 总高度 = 80px;padding和border的宽度已经包含width: 160px中 */  
.border-box { 
  box-sizing: border-box;
}
</style>