css3 的box-sizing屬性理解

標籤：

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

 有時候在某些項目中會發現這些css。box-sizing究竟有什麼用還得重頭說起...

 我們一般計算一個塊狀元素的寬度的時候會將左右padding，左右border寬度，margin 都算進去，如所示（瀏覽器預設計算方式）,寬度不是100px，而是160px：

style="width:100px;padding:15px;border:5px solid black;margin:10px;"

 

如果我們不想瀏覽器按照這種方式計算寬度，那就需要用到css3的新屬性box-sizing。

那麼box-sizing有幾種值呢：

box-sizing:context-box  ,box-sizing:padding-box ,box-sizing:border-box 

 

context-box:這種計算方式是要求瀏覽器將width屬性應用到內容上，那麼總的寬度計算方式和瀏覽器預設的計算方式一樣，那麼該屬性也就沒必要設定了,件圖1。

      

         

                                                                         （圖1）

padding-box：這種指定意思的100px是包含左右padding值得，那麼真正內容地區的寬度就是70px（70+15+15=100），具體可參照2

 

        

                                                                                         圖2

border-box: 意思width屬性應用到border地區內（包含border）,那麼內容地區的寬度就是100-（5+5）-（15+15）=60，不管你怎麼設定border的寬度還是padding的大小，都不會影響整體的width:100的寬度，只是內容地區受影響罷了，圖3

 

      

                                                                        （圖3）

css3 的box-sizing屬性理解