所有HTML元素都可以看作盒子。CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。因為Div添加了padding、border，Div的實際寬度=Div的初始固定值+邊距值+邊框值

盒子模型的組成：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區(qū)域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像

以上是html中盒子模型的結構，每個元素都可以用這個盒子模型來解析。在開發(fā)中，一個元素的樣式表現(xiàn)形式，也是由這個盒子模型的每個部分來表現(xiàn)的。對應到css中樣式的屬性有一下幾個緯度——width, height, padding, border, margin。由于在不同的瀏覽器中，這幾個屬性所表示的盒子模型中的部分有所差異，所以又分為了標準盒子模型和怪異盒子模型。

box-sizing下的盒子模型

語法：（屬性）box-sizing: （屬性值）content-box/border-box/inherit；

box-sizing對盒子模型的影響：

（1）當“box-sizing“的值為”content-box“時，css中的width所包含的部分是盒子模型中content的寬度。此時和標準盒子模型表現(xiàn)一致。

（2）當“box-sizing“的值為”border-box“時，css中的width所包含的是盒子模型中的content的寬度+padding+border的寬度。此時和怪異盒子模型的表現(xiàn)一致。

總結：box-sizing屬性，讓開發(fā)人員可以控制瀏覽器的是以標準盒子模型表現(xiàn)，還是以怪異盒子模型表現(xiàn)。

.box {
  box-sizing: border-box;
  padding   : 0 20px;
  width     : 780px;
  height    : 355px;
  background: #f2f1ef;
}

calc()的運用

知道總寬度是100%，在這個基礎上減去boder的寬度（5px * 2 = 10px）,在減去padding的寬度（10px * 2 = 20px），即”100% - (10px + 5px) * 2 = 30px” ，最終得到的值就是div.box的width值：

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
    width: 90%;/*寫給不支持calc()的瀏覽器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

到此這篇關于padding、border會把div撐大的解決方法的文章就介紹到這了,更多相關padding、border盒子撐大內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論