CSS學習(一) box sizing的應用

2022-08-21 17:15:13 字數 1002 閱讀 9747

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時,到底包含哪些...