CSS中box-sizing屬性的理解與部分用法

　　今天看了一些關於box-sizing的一些資料，在這裏整理一下，但願也能對你們有所幫助。

　　box-sizing是CSS的一個屬性，很好的解決了盒模型的相關問題。CSS中的盒模型（Box model）分爲兩派，一派是W3C的標準模型，一派是IE的傳統模型。那它們之間有什麼不一樣的呢？首先須要明確它們都是對元素計算尺寸的模型，具體說就是對元素的width,height,padding,border以及元素實際尺寸的計算關係；而不一樣的地方就在於二者的計算方法不一至：（下面引用一些公式向你們展現一下二者的不一樣之處）

W3C的標準盒模型

 

IE傳統盒模型（IE6如下不含IE6版本或「QuirksMode下IE5.5+」）

　　接下來直接看看box-sizing的應用吧。

box-sizing屬性能夠分爲兩個值：content-box（default），border-box。

content-box，border和padding不計算入width以內

border-box，border和padding計算入width以內

（注1：ie8+瀏覽器支持content-box和border-box；ff則支持所有三個值）

（注2：使用時，有些瀏覽器仍是須要加上本身的前綴，Mozilla須要加上-moz-，Webkit內核須要加上-webkit-，Presto內核-o-,IE8-ms-）

栗子，接住：

<style type="text/css">
.content-box{
　　-webkit-box-sizing:content-box;
　　width: 100px;
　　height: 100px;
　　padding: 20px;
　　border: 5px solid #E6A43F;
　　background: blue;
}
.border-box{
　　-webkit-box-sizing:border-box;
　　width: 100px;
　　height: 100px;
　　padding: 20px;
　　border: 5px solid #3DA3EF;
　　background: yellow;
}
</style>

我是在谷歌下運行的，因此加了-webkit-前綴，效果以下：

藍色加邊框：總寬150px，高150px

黃色加邊框：總寬100px，高100px

經過這一栗子，相信你們弄清楚了這兩個。與剛纔給你們說起的兩派盒子模型聯繫看看，總結得出：content-box至關於W3C下的模式，而border-box則爲傳統IE下的模式了。這樣你們就能夠解決一些佈局上的難題了吧。固然，box-sizing的更多實際運用，在這裏就很少說了，在次拋磚而已，獻上。