【css3】【box-sizing】
阿新 • • 發佈:2019-02-10
平常我們使用width和height屬性定義盒子div的寬或者高時(例如<div style="width: 300px"></div>
),只是在設定裡面內容的寬高,不是div本身的寬高,具體體現:
div {
padding: 0 10px;
width: 300px;
border: 1px solid red;
}
/* 此時div的寬是 width + padding + border = (300 + 20 + 2)px */
如果我們想讓盒子div的寬為300px,我們需要計算:300px - 22px = 278px
改為:
div {
padding: 0 10px;
width: 278px;
border: 1px solid red;
}
/* 此時div的寬是 width + padding + border = (278 + 20 + 2)px */
不過這種情況下,box-sizing: border-box可以免除計算,讓內容寬度自動更具padding和border的設定值進行增減:
div {
box-sizing: border-box;
padding: 0 10px;
width: 300px;
border: 1px solid red;
}
/* div盒子的寬度就是300px,內容會是278px */
/* 建議設定overflow: auto 因為padding值過大會使內容超出div盒子外 */