在我們討論寬度的時候，我們應該講下與它相關的一個重點知識：盒模型。當你設置了元素的寬度，實際展現的元素卻能夠超出你的設置：因為元素的邊框和內邊距會撐開元素。看下面的例子，兩個相同寬度的元素顯示的實際寬度卻不一樣。

.simple {width: 500px;margin: 20px auto; }.fancy {width: 500px;margin: 20px auto;padding: 50px;border-width: 10px; } <div class="simple">

我小一些...

</div> <div class="fancy">

我比它大！

</div>

以前有一個代代相傳的解決方案是數學。CSS開發者需要用比他們實際想要的寬度小一點的寬度，需要減去內邊距和邊框的寬度。值得慶幸地是你不需要再這么做了...

經過了一代又一代人們意識到數學不好玩，所以他們新增了一個叫做?box-sizing?的CSS屬性。當你設置一個元素為?box-sizing: border-box;?時，此元素的內邊距和邊框不再會增加它的寬度。這里有一個與前一頁相同的例子，唯一的區別是兩個元素都設置了?box-sizing: border-box;?：

.simple {width: 500px;margin: 20px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }.fancy {width: 500px;margin: 20px auto;padding: 50px;border: solid blue 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } <div class="simple">

我們現在一樣大小了！

</div>

? ?

<div class="fancy">

萬歲！

</div>

既然沒有比這更好的方法，一些CSS開發者想要頁面上所有的元素都有如此表現。所以開發者們把以下CSS代碼放在他們頁面上：

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }

這樣可以確保所有的元素都會用這種更直觀的方式排版。

既然?box-sizing?是個很新的屬性，目前你還應該像我之前在例子中那樣使用?-webkit-?和-moz-?前綴。這可以啟用特定瀏覽器實驗中的特性。同時記住它是支持IE8+。

轉自：http://zh.learnlayout.com/box-model.html

稍有改動

總結

以上是生活随笔為你收集整理的”盒模型“之如何防止边框和内边距把元素撑开的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。