box-sizing 的使用

box-sizing 的使用


(1)border-box:如果設置padding,內容往裏面擠

內容的寬度:width減去(padding-left加padding-right)

元素的寬度:width

(2)content-box:如果設置了padding,往外面撐

 內容的寬度:width

元素的寬度:width加上(padding-left加padding-right)

 

語法

box-sizing: content-box|border-box|inherit;
描述
content-box

這是由 CSS2.1 規定的寬度高度行爲。

寬度和高度分別應用到元素的內容框。

在寬度和高度之外繪製元素的內邊距和邊框。

border-box

爲元素設定的寬度和高度決定了元素的邊框盒。

就是說,爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。

通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

inherit 規定應從父元素繼承 box-sizing 屬性的值。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章