html文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒模型。盒模型通过四个边界来描述:margin(外边距),border(边框),padding(内边距),content(内容区域),如图所示:
![](https://img.haomeiwen.com/i11973287/a4a59418525eebaa.gif)
两种盒模型
1)W3C盒模型:width(宽度)= content(内容宽度)
2)IE盒模型:width(宽度)= padding(内边距) + border(边框)+ content(内容宽度)
box-sizing 属性
1)box-sizing:content-box (W3C盒模型)
2)box-sizing:border-box(IE盒模型)
content-box 和 border-box 之间的区别在于有没有包含边框和内边距
网友评论