css盒模型个人学习笔记

提示：每天进步一点点，不断超越自我。

---

前言

`提示：学习css盒模型

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、盒模型定义

盒模型是指在网页布局中，每个元素都被看作一个矩形的盒子，盒模型包括内容区、内边距、边框和外边距四个部分。这四个部分组成了一个完整的盒子，用于定义元素的尺寸、边距和边框等样式。

二、盒模型要素：

1. 内容区：盒子中用来放置文本内容和其他子元素的区域，可以通过设置盒子的宽度和高度来控制。
2. 内边距（padding）：内容区与边框之间的空间，用来设置盒子内部的空隙。可以通过设置padding-top、padding-right、padding-bottom和padding-left来具体指定上右下左的内边距。
3. 边框（border）：包裹内容区和内边距的线条，用于定义盒子的边框样式、宽度和颜色等属性。可以通过设置border-width、border-style和border-color来指定边框的样式。
4. 外边距（margin）：盒子与其他盒子之间的空间，用于设置盒子的外部空隙。可以通过设置margin-top、margin-right、margin-bottom和margin-left来具体指定上右下左的外边距。

三、设置盒模型

属性值	简介
content-box	默认值，标准盒子模型，盒模型是外扩的。width与height只包括内容的宽和高。在widht和height之外绘制元素的内边距和边框。
border-box	怪异模式，盒模型是內减的。width和height属性包括内容，内边距和边框，但不包括外边距。为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制。

四、content-box标准模式

Standard模式：标准模式中，盒子总体大小为width（height）+padding+border，内容区域是width和height部分。

五、 border-box怪异模式

Quirks模式：怪异模式中，盒子总体大小为width和height，添加了padding和border后，内容区域会收缩。

六、margin合并

margin合并：如果两个box都设置了外边距，那么在垂直方向上，两个box的外边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

1. 哪些情况下会出现 margin 合并

● 父子元素合并：如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化；
● 兄弟合并：在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个。
● 注意：行内元素没有 margin-top 或 margin-bottom，也就是说，在行内元素上设置 margin-top 或 margin-bottom 是不起作用的

2.如何阻止 margin 合并

方法很多，下面列三项常用的
● 父子合并用 padding / border挡住；
● 父子合并用 overflow：hidden挡住；
● 父子合并用display：flex,不知道为什么；
● 兄弟合并用 display：inline-block消除；
● 注意：兄弟合并是符合预期的。

总结

平时多练习。