在css中，你設定乙個元素的 width 與 height 只會應用到這個元素的內容區。如果這個元素有任何的 border 或 padding ，繪製到螢幕上時的盒子寬度和高度會加上設定的邊框和內邊距值。這意味著當你調整乙個元素的寬度和高度時需要時刻注意到這個元素的邊框和內邊距。當我們實現響應式布局時，這個特點尤其煩人。
box-sizing 屬性可以被用來調整這些表現:
用法：box-sizing: content-box | border-box | inherit;
content-box:
預設值，標準盒子模型。 width 與 height 只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。 比如. 如果 .box ; 而且 那麼在瀏覽器中的渲染的實際寬度將是370px;
尺寸計算公式：
width = 內容的寬度，height = 內容的高度。
寬度和高度都不包含內容的邊框（border）和內邊距（padding）。
width 和 height 屬性包括內容，內邊距和邊框，但不包括外邊距。這是當文件處於 quirks模式 時internet explorer使用的盒模型。注意，填充和邊框將在盒子內 , 例如, .box 導致在瀏覽器中呈現的寬度為350px的盒子。內容框不能為負，並且被分配到0，使得不可能使用border-box使元素消失。
這裡的維度計算為：
width = border + padding + 內容的 width，
height = border + padding + 內容的 height。
CSS3的新屬性
1.線性漸變 linear 線性 gradient 漸變 background image webkit linear gradient top，red 50 yellow 50 yellow90 2.徑向漸變 可以設定數值 百分比 英文 background image webkit radial...
css3邊框新屬性
通過css3，可以建立圓角邊框 border radius 向矩形新增陰影 border shadow 甚至使用 border image 來繪製邊框。圓角邊框 div 取值 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radius 由浮點數字和單位識別符號組成...
css3新屬性學習
box size width 這樣就可以讓我們不必要再去計算盒子增減內邊距後有沒有撐開什麼的，因為無論內邊距如何變化，盒子的大小始終只會等於width。filter blur 5px 濾鏡，css3為我們增加了濾鏡效果，當括號中的數值越大，則越模糊。width calc 100 30px 可以自動計...