響應式Web設計經常需要我們通過百分比設置組件寬度。如果我們不考慮邊框，那么很容易就可以實現，但如果你給每一列以及總寬度都采用百分比設置，那這個時候固定的邊框大小就會出來搗亂。下面我們將看到一組方法去解決這個問題，你會學到如何創建一個流式布局，而不用擔心額外的邊框以及內邊距。 假設我們需要一個五列的布局。我們要考慮的第一件事就是外邊距（margins）.假設所有的列都需要4%的外邊距，我們需要為所有的外邊距保留20%（4%*5（5列）=20%）的占寬比；然后我們從總寬比（100%）里面減去20%，得到的就是所有列實際占的總寬比。所以每一列的占寬比即16%（80% /5）。下面是一個詳細的圖表： 相應的CSS代碼如下： .column{? width:16%;? margin: 2% 2%; float: left; background: #03a8d2; ? }? 對應的界面是：

當我們給每一列添加一個2px的邊框時，問題出現了，如下圖，最后一列被擠到下面去了。

?

解決方案當然應該是：在之前的計算中我們應該考慮到邊框（border），但是我們怎么去做呢？結論是，我們不能用百分比去設置border邊框的大小，只能用一個固定的值。因為如果所有的都使用百分比設置，那么我們留給border的空間也會是一個變化的值，也就是說當頁面寬度變化時，border的值也會跟著變化，這樣是有問題的。這使得我們沒有辦法去決定我們邊框的寬度！ 解決方案 設置CSS的box-sizing屬性值為“border-box”，這樣就會把borders和padding全都包含在定義的寬高里面。這就意味著一個帶有2px邊框的200px的div仍然寬度是200px!!是不是很神奇呢？ .column{? width: 16%;? margin: 2% 2%;? float: left;? background:#03a8d2;? border: 2px solid black;? box-sizing: border-box;? -webkit-box-sizing: border-box;? -moz-box-sizing: border-box;? }?

即使我們加上padding，也同樣可以正常顯示：

瀏覽器兼容性問題： 兼容性和上面的一樣，除了IE需要8以上的版本，其他瀏覽器均可兼容，同時這個方法不會出現上面提到的陰影問題。 轉載自：http://blog.sina.com.cn/s/blog_771875550101hv5f.html

轉載于:https://www.cnblogs.com/xinjianheyi/p/6552695.html

總結

以上是生活随笔為你收集整理的css3属性box-sizing:border-box 用法解析的全部內容，希望文章能夠幫你解決所遇到的問題。

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