box-sizing相容ie8,需要加字首 -ms- ,但 ie9 瀏覽器開始就不需要私有字首了。
1、box-sizing的作用:
box-sizing 顧名思義就是「盒尺寸」,其更準確的叫法應該是「盒尺寸的作用細節」,或者說得更通俗一點,叫「width 作用的細節」,也就是說,box-sizing 屬性的作用是改變 width 的作用細節。
「內在盒子」分別是「content box」 「padding box」 「border box」 「margin box」,預設情況是「content box」。
理論美好,現實殘酷。實際上,支援情況如下:
.box1 /* 預設值 */
.box2 /* firefox 曾經支援 */
.box3 /* 全線支援 */
.box4 /* 從未支援過 */
2、box-sizing 的語法:
box-sizing:content-box|border-box|inherit
標準盒模型box-sizing:content-box
content -box的總寬度=margin+border+padding+width
在寬度和高度之外繪製元素的內邊距和邊框。
怪異盒模型 box-sizing:border-box
border-box 的總寬度=margin+width
在寬度和高度之內繪製元素的內容、內邊距和邊框
指定 box-sizing 屬性的值,應該從父元素繼承
css布局學習筆記之box sizing
當你設定了元素的寬度,實際展現的元素卻能夠超出你的設定 因為元素的邊框和內邊距會撐開元素。div 上面的元素所展示出來的效果,寬度會不止500px。這可能不是我們想要的。通常或許我們會去計算寬度來實現想要的效果。但是如果計算的地方太多的話,事件很煩人的事。此時我們可以通過設定box sizing b...
筆記 學習CSS布局06 box sizing
人們慢慢的意識到傳統的盒子模型不直接,所以他們新增了乙個叫做box sizing的css屬性。當你設定乙個元素為box sizing border box 時,此元素的內邊距和邊框不再會增加它的寬度。這裡有乙個與前一頁相同的例子,唯一的區別是兩個元素都設定了box sizing border box...
CSS 3學習 box sizing和背景
在css 2中設定元素的width和height僅僅是設定了元素內容區的寬和高,元素實際的尺寸是 margin border padding 內容區。css 3 截止到2016年12月6日該屬性還是草案 中新加了box sizing屬性,用來重新規定設定元素的width和height時,到底包含哪些...