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 屬性的值。 |