CSS分为两种盒模型:W3C标准盒子模型、IE盒子模型
两种盒模型的区别
1.W3C标准盒子模型:宽度 = 内容的宽度(content)
,padding
、border
、margin
都不算在里面。
2.IE盒子模型:宽度 = 内容宽度(content + padding + border)
补充:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
box-sizing属性
它是用来控制元素的盒子模型的解析模式,默认为
content-box(W3C盒子模型)
。
-box-sizing: content-box,是W3C盒子模型。
-box-sizing: border-box,是IE盒子模型。
网友评论