css box-sizing的例子

標籤：

轉載自 http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html

css3 box-sizing屬性

box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。

content-box，border和padding不計算入width之內              //因為內容盒子 只包含內容 padding 和  border-box  的寬度所以會變得很大

padding-box，padding計算入width內　　　　　　　　　　　//padding不算在內

border-box，border和padding計算入width之內，其實就是怪異模式了~    //border和padding都算在內  什麼box前面的是最大的邊（記憶）

 

ie8+瀏覽器支援content-box和border-box；

ff則支援全部三個值。

 

使用時：

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

栗子：

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

（ff）：

css box-sizing的例子