CSS笔记——盒模型及外边距合并解决

CSS盒模型是用于布局和定位HTML元素的一种概念

组成结构：

1. 内容区域（Content）：元素内部的内容部分，如文本、图像等。

2. 内边距区域（Padding）：内容区域与边框之间的空白区域。内边距可以使用CSS属性padding来设置，例如padding-top、padding-bottom、padding-left和padding-right。内边距的大小可以是一个固定的像素值，也可以是一个百分比或em/rem单位。

3. 边框区域（Border）：位于内边距区域外部的边框线。边框可以使用CSS属性border来设置，例如border-top、border-bottom、border-left和border-right。边框的样式、宽度和颜色都可以分别设置。

4. 外边距区域（Margin）：位于边框区域之外的空白区域。外边距可以使用CSS属性margin来设置，例如margin-top、margin-bottom、margin-left和margin-right。与内边距一样，外边距的大小可以是一个固定的像素值，也可以是一个百分比或em/rem单位。

   注释：

   1、边框属性：border：border-width border-style border-color

   2、margin不会影响盒子的大小，只会影响盒子的位置

   3、margin可取负值表示相反margin，margin： 0 auto ；水平居中效果

1、标准盒模型和怪异(IE)盒模型

标准盒模型（默认,box-sizing值为content-box):

元素的宽度高指内容区域Content的宽高，不含Padding、border和margin。
1

怪异（IE）盒模型 （box-sizing值为border-box)

元素的宽度和高度包括了内边距和边框的大小。如果要使用IE盒模型，可以在CSS中将**box-sizing属性设置为border-box**。这样，设置元素的宽度和高度时，就会包括内边距和边框的大小。
1

设置background-color是对content、border 、padding起作用。对margin不起作用

2、盒模型产生的问题

当两个元素的垂直外边距相遇时，它们之间的外边距会合并成一个外边距，这被称为外边距合并（Margin Collapse）

当两个相邻的元素的外边距重叠时，它们的外边距大小将会取两者之间较大的那个值

1. 相邻元素的外边距合并：

   当两个相邻元素的上下外边距相遇时，它们的外边距会合并成一个外边距，导致它们之间的间距变得比预期的要小。

   解决方法：可以是在两个元素之间添加一个内边距padding、边框或清除浮动。

2. 父元素与第一个子元素的外边距合并：

   当父元素没有边框或内边距，并且第一个子元素有上外边距时，它们的上外边距会合并成一个外边距，导致父元素顶部的间距变得比预期的要小。

   解决方法：

   • 父元素上添加一些padding或border

   • 在第一个子元素上使用margin-top: 0。

   • overflow:hiddle;

   • 给父元素加一个：：before,让该元素不在是第一个元素

     .div::before{
     	display:table;
     	content:"";
     }
     1
     2
     3
     4

3. 空元素的外边距合并：

   当一个元素没有内容、没有边框、没有内边距，并且只有上下外边距时，它们的外边距会合并成一个外边距。

   解决方法：可以是在元素中添加一些内容、内边距或边框。

4. 浮动元素的外边距合并：

   当一个浮动元素和它的父元素之间有外边距时，它们的外边距可能会合并。

   解决方法：可以是在浮动元素和父元素之间添加一个内边距、边框或使用clear属性来清除浮动。