box-sizing: content-box | border-box
浏览器默认属性是 content-box
content-box
content-box观察上图,
- 在css区 设置div宽度为100px,高度为60px;
- 在css区 设置 box-sizing: content-box
- 盒模型总content区宽度为100px,高度为60px,padding和border不占据content区。
border-box
border-box观察上图,
- 在css区 设置div宽度为100px,高度为60px;
- 在css区 设置 box-sizing: border-box;
- 盒模型总content区宽度为60px,高度为20px,padding和border占据content区原本的空间,padding分别占据了10px,border分别占据了10px。
60px + 10px* 2 + 10px* 2 = 100px;
20px + 10px* 2 + 10px* 2 = 60px;
网友评论