盒模型是用來表示每一個元素所佔用空間的大小。由4個區域組成,分別是內容區域、內邊距區域、邊框區域、外邊距區域。這些區域分別對應了5個屬性:css
width
和height
,寬度和高度padding
內邊距border
邊框margin
外邊距代碼演示:spa
div{ border:1px solid red; height:200px; width: 200px; padding: 40px; }
效果圖:code
上面雖然指定了width
和height
爲200px
,但實際上它的寬高是282px * 282px
。blog
這是由於盒模型是content-box
,它的寬高就是實際內容的寬高。增長內邊距和邊框不會影響內容區域的尺寸,但會增長元素的總尺寸。開發
使用content-box
寫樣式時,不太符合人類理解,通常會經過設置box-sizing
來改變它的盒模型。rem
使用border-box
,它的寬高就是元素的尺寸,也是內容區域寬高+內邊距+邊框。改變border
或者padding
的大小會影響內容區的大小。it
代碼演示:class
div { box-sizing: border-box; border:1px solid red; height: 200px; width: 400px; padding: 40px; }
效果圖:im
從這個效果圖中能夠看到,元素總的寬高是400px * 200px
,它的內容區域是318px
。內容區域+內邊距+邊框正好爲400px
。d3
上面說到使用border-box
人類理解。
這是由於,在實際開發中,若是你要保證元素實際佔有的寬高不變,就要在寫width
時減去padding
,寫padding
時減去width
。由於改變元素的實際大小每每是災難性的。