盒子模型

发布时间 2023-06-20 14:14:42作者: 有只小菜猫

盒模型都是由四个部分组成的,分别是margin、border、padding和content

标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同:

  • 标准盒模型:width = content + padding + border + margin

  • IE盒模型:width = content(padding和border也算作主体部分) + margin

可以通过修改元素的box-sizing属性来改变元素的盒模型:

  • box-sizeing: content-box 表示 标准盒模型(默认值)

  • box-sizeing: border-box 表示 IE盒模型(怪异盒模型)