盒子模型（Box Model）
盒子模型(Box Modal)： 把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形包括：margin border padding content 四个属性
| 设置的width包含 | 盒子总宽度 | 指定盒模型类型 | |
|---|---|---|---|
| 标准盒模型（W3C盒模型） | content宽度 | width + padding + border + margin | box-sizing: content-box; |
| 怪异盒模型（IE盒模型） | content + padding + border | width + margin | box-sizing: border-box; |
解决兼容性问题
- 不给元素添加具有指定宽度的padding， 将 padding 或 margin 添加到元素的父元素或子元素
| 垂直外边距的合并（塌陷） | 发生塌陷条件 | 垂直间距 | 解决方式 |
|---|---|---|---|
| 相邻块元素 | 上元素margin-bottom=20px; 下元素margin-top=10px; | 二者最大值20px | 创建不属于同一个BFC |
| 嵌套块元素 | 父元素必须没有上内边距及边框,margin-top=20px; 子元素margin-top=10px; 父上外边距为0，也会发生合并 | 二者最大值20px | 父元素添加上内边距或者边框 父元素加 overflow: hidden |
版权声明：本文为weixin_42235173原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。