盒模型是界面佈局需要掌握的基本功。
盒模型基本概念
盒模型四要素:margin
、border
、padding
、content
。
盒模型分爲:標準盒模型(W3C盒模型) 、 怪異盒模型(IE盒模型)
盒模型區別
怪異盒模型總寬度 = content + padding
標準盒模型總寬度 = content
盒模型使用
box-sizing: border-box(怪異盒模型) || content-box(標準盒模型)
兼容性
IE8及以上版本支持該屬性,Firefox 需要加上瀏覽器廠商前綴-moz-,對於低版本的IOS和Android瀏覽器也需要加上-webkit-。