CSS盒模型

css

1、盒模型

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

• content-box （w3c标准盒模型）

• border-box (IE盒模型)

• padding-box (FirFox曾经支持)

• margin-box (浏览器还未实现)

  Content box
  
  
  Border box
  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; }