前端基础巩固 - CSS 的两种盒模型

Code
, , ,

CSS 有两种盒模型:

  • IE 盒模型
    • 宽高包括元素的 content
    • width = content
  • W3C 盒模型
    • 宽高包括元素的 content, padding, border
    • width = content + padding-left + padding-right + border-left + border-right

IE 盒模型更符合物理意义上对盒子的理解，并且能保证每个盒子对其他盒子的影响更小，因此目前使用 IE 盒模型较多。

切换盒模型的方式：

1
2
3
4
// W3C
box-sizing: content-box;
// IE
box-sizing: border-box;