✊不积跬步，无以至千里；不积小流，无以成江海

外边距折叠的几种案例

外边距折叠是指当相邻的两个元素具有垂直方向上的外边距时，它们的外边距会发生合并（折叠）的现象。外边距折叠只会在普通流中的块级元素中发生，以下是几种常见的外边距折叠案例：

1. 兄弟元素的上下外边距折叠 当相邻的两个兄弟元素没有边框、内边距、行内内容、浮动等分隔时，它们的上下外边距会发生折叠。

<style>
    .box {
        margin: 20px 0;
        background-color: gray;
        height: 50px;
    }
</style>

<div class="box">Box 1</div>
<div class="box">Box 2</div>

在这个修正后的例子中，两个相邻的 .box 元素之间的上下外边距会发生折叠。每个 .box 元素的上下外边距都设置为 20px，并且添加了内容 "Box 1" 和 "Box 2"。它们之间的垂直间距实际上只有 20px，而不是 40px。

1. 父元素和第一个/最后一个子元素的外边距折叠 当父元素没有边框、内边距、行内内容、浮动等分隔，并且第一个或最后一个子元素也没有边框、内边距、行内内容、浮动等分隔时，父元素的上下外边距会与第一个或最后一个子元素的上下外边距折叠。

<style>
    .parent {
        background-color: lightgray;
        overflow: auto;
    }

    .child {
        margin: 20px 0;
        background-color: gray;
        height: 50px;
    }
</style>

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

在这个例子中，.parent 元素的内部添加了 overflow: auto; 的样式，这将创建一个新的块格式化上下文（block formatting context），从而阻止父元素和第一个/最后一个子元素外边距的折叠。

父元素的背景色为浅灰色，子元素的背景色为灰色，外边距折叠的区域将显示为灰色。

1. 空元素的上下外边距折叠 当一个元素没有边框、内边距、行内内容、浮动等分隔时，它的上下外边距会发生折叠，即使没有相邻的元素。

<style>
    .content-element {
        margin: 20px 0;
        background-color: gray;
        height: 50px;
    }

    .empty-element {
        margin: 30px 0;
        background-color: lightgray;
        height: 0;
    }
</style>

<div class="content-element">Content Element</div>
<div class="empty-element"></div>

在这个例子中，.content-element 是一个具有实际内容的元素，上下外边距设置为 20px，并且具有灰色的背景色和高度为 50px。.empty-element 是一个空元素，没有实际内容，高度为 0，上下外边距设置为 30px，并且具有浅灰色的背景色。

由于 .content-element 和 .empty-element 是相邻的兄弟元素，它们之间的上下外边距会发生折叠。在这种情况下，折叠后的外边距将取较大的外边距值，即 30px。.content-element 的背景色为灰色，.empty-element 的背景色为浅灰色，它们之间的外边距折叠区域将显示为浅灰色。

外边距折叠是 CSS 盒模型的一种规则，可以在某些情况下简化布局，但也可能导致意外的间距效果。如果需要避免外边距折叠，可以使用一些方法，如设置边框、内边距、浮动或使用定位等。

CSS3背景、渐变、阴影等用法

CSS3 提供了丰富的功能来创建背景、渐变和阴影效果。以下是一些常见的用法：

1. 背景（Background） 使用 background 属性可以设置元素的背景样式。常用的属性包括：

   • background-color：设置背景颜色。
   • background-image：设置背景图像。
   • background-repeat：设置背景图像的重复方式。
   • background-position：设置背景图像的位置。
   • background-size：设置背景图像的尺寸。

2. 渐变（Gradient） 使用 CSS 渐变可以创建平滑的过渡效果。常用的渐变类型有：

   • 线性渐变（Linear Gradient）：在两个或多个颜色之间创建线性过渡。
   • 径向渐变（Radial Gradient）：从一个中心点向外辐射状地创建颜色过渡。
   • 渐变色停止（Gradient Color Stops）：指定渐变中的颜色和位置。

渐变可以通过 background-image 属性结合 linear-gradient() 或 radial-gradient() 函数来实现。

1. 阴影（Box Shadow） 使用 box-shadow 属性可以创建元素的阴影效果。该属性接受一组参数来定义阴影的样式，包括：

   • 阴影颜色（color）
   • 水平偏移量（horizontal offset）
   • 垂直偏移量（vertical offset）
   • 模糊半径（blur radius）
   • 扩展半径（spread radius）

   阴影可以通过将 box-shadow 应用于元素来实现，例如：

<style>
    .shadow-box {
        width: 200px;
        height: 200px;
        background-color: lightgray;
        box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.5);
    }
</style>

<div class="shadow-box"></div>

在这个例子中，.shadow-box 类被应用于一个 div 元素，该元素的宽度和高度分别为 200px，背景色为浅灰色。box-shadow 属性被设置为 10px 10px 20px 0px rgba(0, 0, 0, 0.5)。

在 box-shadow 属性值中，第一个值表示阴影的水平偏移量，这里是 10px；第二个值表示阴影的垂直偏移量，这里是 10px；第三个值表示阴影的模糊度，这里是 20px；第四个值被添加为 0px，表示阴影的扩展度，即阴影的大小，最后一个值表示阴影的颜色，这里使用了 RGBA 颜色值 rgba(0, 0, 0, 0.5)，表示黑色带有 0.5 的不透明度。这样修正后的代码将正确显示具有指定阴影样式的矩形框。