1. 程式人生 > >前端響應式痛點解決之box-sizing

前端響應式痛點解決之box-sizing

前置

在 CSS 盒子模型的預設定義裡,你對一個元素所設定的 width 與 height 只會應用到這個元素的內容區。如果這個元素有任何的 border 或 padding ,繪製到螢幕上時的盒子寬度和高度會加上設定的邊框和內邊距值。這意味著當你調整一個元素的寬度和高度時需要時刻注意到這個元素的邊框和內邊距。當我們實現響應式佈局時,這個特點尤其煩人。

定義

CSS 中的 box-sizing 屬性定義了 user agent 應該如何計算一個元素的總寬度和總高度。

1.content-box 是預設值。如果你設定一個元素的寬為100px,那麼這個元素的內容區會有100px 寬,並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中。


2.border-box 告訴瀏覽器:你想要設定的邊框和內邊距的值是包含在width內的。也就是說,如果你將一個元素的width設為100px,那麼這100px會包含它的border和padding,內容區的實際寬度是width減去(border + padding)的值。大多數情況下,這使得我們更容易地設定一個元素的寬高。