認識盒模型

盒模型是用來表示每一個元素所佔用空間的大小。由4個區域組成,分別是內容區域、內邊距區域、邊框區域、外邊距區域。這些區域分別對應了5個屬性:css

  • widthheight,寬度和高度
  • padding內邊距
  • border邊框
  • margin外邊距

代碼演示:spa

div{
  border:1px solid red;
  height:200px;
  width: 200px;
  padding: 40px;
}

效果圖:code

111.png

上面雖然指定了widthheight200px,但實際上它的寬高是282px * 282pxblog

這是由於盒模型是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

123.png

從這個效果圖中能夠看到,元素總的寬高是400px * 200px,它的內容區域是318px。內容區域+內邊距+邊框正好爲400pxd3

上面說到使用border-box人類理解。

這是由於,在實際開發中,若是你要保證元素實際佔有的寬高不變,就要在寫width時減去padding,寫padding時減去width。由於改變元素的實際大小每每是災難性的。

相關文章
相關標籤/搜索