CSS 盒模型
1.0 什么是CSS盒模型
在CSS中,所有的元素都被一个个的“盒子(box)”包围着,封装周围的HTML元素,它包括:外边距,边框,填充和实际内容。
![b03c13502df98296df25e2c515bf3404.png](https://img-blog.csdnimg.cn/img_convert/b03c13502df98296df25e2c515bf3404.png)
不同部分说明:
- Margin(外边距)- 清除边框外的区域,外边距是透明的。
- Border(边框)- 围绕在内边距和内容外的边框。
- Padding(内边距)- 清楚内容周围的区域,内边距是透明的。
- Content(内容)- 盒子的内容,显示文本和图像。
2.0 两种盒模型
CSS 盒模型分为两种:content-box 和 border-box。
![cf53ba0edde72f83988b1749174bb325.png](https://img-blog.csdnimg.cn/img_convert/cf53ba0edde72f83988b1749174bb325.png)
2.1 两种盒模型的区别
- content-box
![a58d4110b21954183c329db177618acc.png](https://img-blog.csdnimg.cn/img_convert/a58d4110b21954183c329db177618acc.png)
![b49c46c4a4b53fbc31e1437a7a08c066.png](https://img-blog.csdnimg.cn/img_convert/b49c46c4a4b53fbc31e1437a7a08c066.png)
这里可以发现,使用开发者工具所看到的盒模型,里面的 border 的边框总共加起来是 140px ,因此可以发现,content-box 中,width: 100px
影响的是内容的像素为100px 。
2. border-box
![5b5383997d875d1b1792a577b3ac87d9.png](https://img-blog.csdnimg.cn/img_convert/5b5383997d875d1b1792a577b3ac87d9.png)
![9662c9cbe46f21eaa6269a9370f4ceec.png](https://img-blog.csdnimg.cn/img_convert/9662c9cbe46f21eaa6269a9370f4ceec.png)
在使用 border-box 时,width: 100px
所影响的则是 border 的像素为 100px ,包含了border、padding、content。
3.0 margin
(外边距)
1. 当分别给两行内容加上margin时,分别是 30px ,会发现这两行内容之间的距离不是变成了60px,而是发生了合并,变成了30px。
![870eb8e53089052f58ad9b4d78709e61.png](https://img-blog.csdnimg.cn/img_convert/870eb8e53089052f58ad9b4d78709e61.png)
2. 可以使用margin: 30px 0为内容在上下以及内容之间增加 30px
![a1883b2e4727873ca9a0b851b8426862.png](https://img-blog.csdnimg.cn/img_convert/a1883b2e4727873ca9a0b851b8426862.png)
3. 添加了display: inline-block(内联块)后,内容之间的 margin 就不会被合并。使用display: inline-block后两行内容会并排,需要再添加一句width: 100%。也可以通过增加padding或overflow: hidden来取消合并
margin和margin合并的前提是它们之间什么都没有。
![1532d124f6d8b7b9595d16fa72040d6d.png](https://img-blog.csdnimg.cn/img_convert/1532d124f6d8b7b9595d16fa72040d6d.png)
4. 当margin
的取值不为0时,可以发现左右外边距并不会合并,所以外边距(margin)只会合并上下,不会合并左右。
![246e4a06410831df8b3cb54d394e8c80.png](https://img-blog.csdnimg.cn/img_convert/246e4a06410831df8b3cb54d394e8c80.png)
总结
- 哪些情况会合并
父子margin
合并
兄弟margin
合并 - 如何阻止合并
父子合并用padding
/border
/overflow: hidden
挡住
兄弟合并用inline-block
消除
本文为本人的原创文章,著作权归本人和饥人谷所有,转载请注明来源