HTML5+CSS3（黑马程序员）——第二篇

明快de玄米61

272人浏览 · 2025-10-18 10:19:34

明快de玄米61 · 2025-10-18 10:19:34 发布

本系列文章列表

二、CSS基本内容

1、CSS引入方式

1.1、行内样式

1.1.1、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
  </head>
  <body> <!-- 主体 -->
    <p style="color: red;">你好</p>
  </body>
</html>

1.1.2、页面效果

在这里插入图片描述

1.2、内部样式表

1.2.1、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <!-- 层叠样式表 -->
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>你好</p>
  </body>
</html>

1.2.2、页面展示

在这里插入图片描述

1.3、外部样式表

1.3.1、代码示例

》》》helloworld.html：
<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <!-- 引入层叠样式表文件 -->
    <link rel="stylesheet" href="./helloworld.css">
  </head>
  <body> <!-- 主体 -->
    <p>你好</p>
  </body>
</html>

》》》helloworld.css：
p {
    color: red;
}

1.3.2、页面展示

在这里插入图片描述

2、选择器

2.1、标签选择器

2.1.1、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <!-- 层叠样式表 -->
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>你好</p>
  </body>
</html>

2.1.2、页面示例

在这里插入图片描述

2.2、类选择器

2.2.1、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <!-- 层叠样式表 -->
    <style>
      .info {
        color: red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p class="info">你好</p>
    <h3 class="info">同好</h3>
  </body>
</html>

2.2.2、页面效果

在这里插入图片描述

2.3、id选择器

2.3.1、基本信息

用途：id选择器一般不用于设置css样式，大多数时间都是配合js使用
规则：id名在一个网页中只能使用1次

2.3.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <!-- 层叠样式表 -->
    <style>
      #info {
        color: red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p id="info">你好</p>
  </body>
</html>

2.3.3、页面效果

在这里插入图片描述

2.5、属性选择器

2.5.1、基本信息

用途：针对是否存在属性或者属性值进行搜索
写法：[属性名]或者[属性名=属性值]

2.5.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <!-- 层叠样式表 -->
    <style>
      /* 判断是否存在属性 */
      [type] {
        color: red;
      }

      /* 存在属性，并且属性值是password */
      [type=password] {
        color: blue;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <input type="text">
    <input type="password">
  </body>
</html>

2.5.3、页面效果

在这里插入图片描述

2.5、通配符选择器

2.5.1、基本信息

用途：查找页面所有标签，设置相同样式，可以对所有标签做相同的处理
写法：* {XXX}

2.5.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <!-- 层叠样式表 -->
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>你好</p>
  </body>
</html>

2.5.3、页面效果

在这里插入图片描述

2.6、复合选择器

2.6.1、后代选择器

2.6.1.1、基本信息

用途：选中某元素的所有后代元素，包括儿子、孙子、重孙子……
写法：父选择器子选择器…… {CSS属性}，父子选择器之间用空格隔开
说明：例如a b {css属性}，那么a选择器中的所有b选择器都会使用这个css属性

2.6.1.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div span {
        color: red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>
      <span>第一层</span>
      <p>
        <span>第二层</span>
        <p><span>第三层</span></p>
      </跑>
    </div>
  </body>
</html>

2.6.1.3、页面效果

在这里插入图片描述

2.6.2、子代选择器

2.6.2.1、基本信息

用途：选中某元素的所有子代元素
写法：父选择器 > 子选择器…… {CSS属性}，父子选择器之间用>隔开
说明：例如a > b {css属性}，那么a选择器下面的所有b选择器都会使用这个css属性

2.6.2.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div > span {
        color: red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>
      <span>第一层</span>
      <p>
        <span>第二层</span>
        <p><span>第三层</span></p>
      </跑>
    </div>
  </body>
</html>

2.6.2.3、页面效果

在这里插入图片描述

2.6.3、并集选择器

2.6.3.1、基本信息

用途：选中多组标签，设置相同样式
写法：选择器1, 选择器2, 选择器3…… {CSS属性}，其中选择器之间用逗号分隔，其中选择器支持普通选择器和复合选择器（后代选择器、子代选择器）
说明：例如a, b {css属性}，那么a选择器和b选择器都会使用这个css属性

2.6.3.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div, h6, p {
        color: pink;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>你好</div>
    <h6>Hello</h6>
    <p>안녕하세요.</p>
  </body>
</html>

2.6.3.3、页面效果

在这里插入图片描述

2.6.4、交集选择器

2.6.4.1、基本信息

用途：选中同事满足多个条件的元素
写法：选择器1选择器2…… {CSS属性}，选择器之间需要连接，仅支持普通选择器
说明：例如ab {css属性}，只有同时符合a和b这两个选择器要求的才能使用这个css属性
注意：如果交集选择器中存在标签选择器，那么标签选择器必须放在前面

2.6.4.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 标签选择器+类选择器 */
      p.box {
        color: pink;
      }

      /* 标签选择器+属性选择器 */
      input[type=text] {
        color: red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div class="box">你好</div>
    <p>Hello</p>
    <p class="box">안녕하세요.</p>

    <input type="text">
    <input type="password">
  </body>
</html>

2.6.4.3、页面效果

在这里插入图片描述

2.6.5、伪类选择器

2.6.5.1、基本信息

含义：伪类表示元素状态，选中元素某状态后设置样式
元素状态
- 通用状态：
  - 鼠标悬停状态：选择器:hover {CSS属性}
  - 鼠标点击状态：选择器:active {CSS属性}
- 超链接标签独有状态：
  - 访问前状态：选择器:link {CSS属性}
  - 访问后状态：选择器:visited {CSS属性}
注意：如果要给超链接标签设置以上四个状态，需要按照link、vistied、hover、active的顺序书写，当然并不是说所有的状态都要有哈，只是写的时候要按照顺序书写

2.6.5.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 验证通用状态 */
      div {
        width: 100px;
        height: 100px;
        background-color: gray;
      }
      div:hover {
        background-color: pink;
      }
      div:active {
        background-color: aqua;
      }

      /* 验证超链接独有状态 */
      a:link {
        color: red;
      }
      a:visited {
        color: pink;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div></div>
    <br>
    <a href="https://weibo.com/1893892941/5200323875702664" target="_blank">全民社保</a>
  </body>
</html>

2.6.5.3、页面效果

在这里插入图片描述

2.6.6、结构伪类选择器

2.6.6.1、基本信息

作用：根据同级元素列表中的元素所在顺序查找元素
开始下标：下标从 1 开始计数，不是 0。
方式：
- 选择器:first-child：根据选择器找到的所有元素，选中第一个元素
- 选择器:last-child：根据选择器找到的所有元素，选中最后一个元素
- 选择器:nth-child(X)：根据选择器找到的所有元素，选中第X个元素，例如：选择器:nth-child(3)（说明：选中第3个元素）
- 选择器:nth-child(公式)：根据选择器找到的所有元素，根据公式选择多个元素，下面介绍一些常用公式
  - 偶数标签：2n
  - 奇数标签：2n+1、2n-1
  - 找到5的倍数的标签：5n
  - 找到从第5个开始的所有标签（包括第5个）：n+5
  - 找到从第5个之前的所有标签（包括第5个）：-n+5

2.6.6.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      ul>li:first-child {
        background-color: blue;
      }

      ul>li:last-child {
        background-color: green;
      }
      
      ul>li:nth-child(3) {
        background-color: purple;
      }

      ul>li:nth-child(6n) {
        background-color: yellow;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
      <li>seven</li>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
     </ul>
  </body>
</html>

2.6.6.3、页面效果

在这里插入图片描述

2.6.7、伪元素选择器

2.6.7.1、基本信息

作用：在元素中添加伪元素，可以用来摆放装饰性的内容。
要求：必须设置content属性，否则伪元素不生效
种类：
- 选择器::before：在选择器中最前面添加内容
- 选择器::after：在选择器中最后面添加内容

2.6.7.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 添加到li标签的原内容之前 */
      ul>li::before {
        content: "<";
        color: green;
        font-weight: bold;
      }
      /* 添加到li标签的原内容之后 */
      ul>li::after {
        content: ">";
        color: blue;
        font-weight: bold;
      }
      ul>li:hover {
        background-color: pink;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <ul>
      <li>手机</li>
      <li>电脑</li>
     </ul>
  </body>
</html>

2.6.7.3、页面效果

在这里插入图片描述

2.6.8、紧邻兄弟选择器

2.6.8.1、基本信息

语法：A + B
含义：选择紧跟在 A 元素后面的第一个 B 元素，且 A 和 B 必须拥有相同的父元素。
匹配规则：只匹配紧邻的下一个兄弟元素，不匹配后面的其他兄弟；B 不一定是 A 的最后一个兄弟，但必须是紧随其后的那个。
常用场景：
- 列表项之间的特殊样式（如除第一个外的项增加左边距）
- 段落之间添加分隔线
- 表单元素相邻时的布局调整
- 制作阶梯式动画（不同子项不同初始偏移）
特点：
- 只能向后选择，不能向前
- 不能跨越其他元素（必须紧邻）
- 可与伪类、类选择器、ID选择器等组合使用

2.6.8.2、代码示例

以下示例展示 + 选择器的三种典型用法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器演示</title>
    <style>
        /* 示例1：给紧跟在 h2 后面的第一个 p 添加特殊颜色 */
        h2 + p {
            color: red;
            font-weight: bold;
        }

        /* 示例2：导航列表：除第一个菜单项外，其他项左边距递增 */
        nav ul li + li {
            margin-left: 15px;
        }
        /* 第三个及以后的菜单项（即前面有两个 li 兄弟）左边距更大 */
        nav ul li + li + li {
            margin-left: 30px;
        }

        /* 示例3：阶梯式初始偏移（用于滑入动画） */
        .menu li {
            transform: translateX(0);
            transition: 0.3s;
        }
        .menu li + li {
            transform: translateX(-20px);
        }
        .menu li + li + li {
            transform: translateX(-40px);
        }
        /* 鼠标悬停时全部归位 */
        .menu:hover li {
            transform: translateX(0);
        }
    </style>
</head>
<body>
    <!-- 示例1 效果 -->
    <h2>标题</h2>
    <p>这个段落是紧跟在 h2 后面的第一个 p，将变为红色粗体。</p>
    <p>这个段落不是紧邻的 p，不会受影响。</p>

    <hr>

    <!-- 示例2 效果：导航项间距不同 -->
    <nav>
        <ul>
            <li>首页</li>
            <li>产品</li>   <!-- 第二个 li 有 margin-left:15px -->
            <li>服务</li>   <!-- 第三个 li 有 margin-left:30px -->
            <li>联系</li>   <!-- 第四个 li 同样是 +li+li 匹配？注意：li+li+li 匹配的是【前面恰好有两个 li】的 li，所以第三个和第四个都会匹配？实际上 li+li+li 会匹配第三个及之后所有，因为第三个符合（前有两个），第四个也符合（前有三个，但“前面有两个兄弟li”这个条件对第四个也成立，所以仍会匹配。通常用此技巧实现层级递增。如果需要精确控制第三个，可以结合 :nth-child(3)。但此处仅演示选择器语法）-->
        </ul>
    </nav>

    <hr>
    
    <!-- 示例3 效果：列表项阶梯偏移，鼠标悬停时归位 -->
    <ul class="menu">
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
    </ul>
</body>
</html>

注意：li + li + li 会匹配从第三个开始往后的所有 <li>（因为从第三个起，每个 <li> 前面都有至少两个 <li> 兄弟）。若只想要精确的第三个，应使用 :nth-child(3)。但在实际场景中，利用 + 的累加链可以实现逐级增量的效果（如偏移量递增、延迟递增等），非常方便。

2.6.8.3、页面效果

运行上述代码后，你会看到：

在这里插入图片描述

效果1 — 紧邻段落样式

紧跟在 <h2> 后面的第一个 <p> 显示为红色粗体。
第二个 <p> 保持普通样式。

效果2 — 导航项不等间距

第一个导航项没有左边距。
第二个导航项有 15px 的左边距。
第三、第四个导航项都有 30px 的左边距（因为 li + li + li 同时匹配了第三、第四项）。
如果需要第四项左边距继续增大，可以再写 li + li + li + li，以此类推。

效果3 — 阶梯偏移动画

初始状态下：
- 第一个 <li> 位置正常（translateX(0)）。
- 第二个 <li> 向左偏移 20px。
- 第三、第四个 <li> 向左偏移 40px。
当鼠标悬停在 <ul class="menu"> 上时，所有 <li> 的 transform 归零，产生整齐归位的滑动效果。

这些效果的核心就是 + 选择器能够针对“除第一个之外的兄弟”或“第N个之后的兄弟”快速设置差异化样式，无需额外添加类名或 ID。

2.6.9、通用兄弟选择器（后续兄弟选择器）

2.6.9.1、基本信息

语法：A ~ B
含义：选择 同一个父元素下，位于 A 元素后面的所有 B 元素（不要求紧邻）。
匹配规则：
- A 和 B 必须拥有相同的父元素。
- B 必须出现在 A 之后（文档顺序）。
- 不要求 A 和 B 紧邻，中间可以间隔其他元素。
- 会匹配 A 之后所有符合条件的 B 元素（零个、一个或多个）。
常用场景：
- 同组元素中，状态变化时改变后面所有兄弟的样式（如 hover 时让后面所有文字变色）
- 表单中，根据前置输入框的状态影响后面的提示文字
- 制作“开关”效果：选中某个复选框后，改变其后所有同级的样式
- 实现主题切换时，某个类出现在前面，影响后面所有元素的布局
特点：
- 只能向后选择，不能向前。
- 可以跨越其他元素（与 + 的区别所在）。
- 常与 :checked、:focus、:hover 等伪类组合使用，制作纯 CSS 交互。

2.6.9.2、代码示例

以下示例展示 ~ 选择器的三种典型用法：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器演示</title>
    <style>
        /* 示例1：鼠标悬停在 h2 上，让后面所有 p 的文字变蓝 */
        h2:hover~p {
            color: blue;
            transition: 0.3s;
        }

        /* 示例2：选中复选框后，让后面所有 .tip 显示出来 */
        #toggle:checked~.tip {
            display: block;
        }

        .tip {
            display: none;
            color: green;
            margin-top: 10px;
        }

        /* 示例3：给除第一个 li 之外的所有 li 添加不同的延迟动画（阶梯效果） */
        .list li {
            transform: translateX(0);
            transition: transform 0.4s;
        }

        /* 注意：这里 li ~ li 会匹配第二个及之后的所有 li */
        .list li~li {
            transition-delay: 0.1s;
        }

        .list li~li~li {
            transition-delay: 0.2s;
        }

        .list li~li~li~li {
            transition-delay: 0.3s;
        }

        /* 鼠标悬停时，所有项归位 */
        .list:hover li {
            transform: translateX(30px);
        }
    </style>
</head>

<body>
    <!-- 示例1 效果 -->
    <h2>把鼠标放我身上（hover）</h2>
    <p>我是第一个 p，但跟在前面的 h2 后面（中间无其他 p），我会变蓝。</p>
    <div>我是一个 div（不受影响）</div>
    <p>我是第二个 p，也在 h2 后面，也会变蓝。</p>
    <p>第三个 p，同样变蓝。</p>

    <hr>

    <!-- 示例2 效果：勾选复选框，显示后面隐藏的提示 -->
    <label>
        <input type="checkbox" id="toggle"> 同意条款
        <div class="tip">感谢你的同意！</div>
        <div class="tip">（这是后面的另一个 tip，也会显示）</div>
    </label>

    <hr>

    <!-- 示例3 效果：列表项悬停时依次向右移动 -->
    <ul class="list">
        <li>项目一（无延迟）</li>
        <li>项目二（延迟0.1s）</li>
        <li>项目三（延迟0.2s）</li>
        <li>项目四（延迟0.3s）</li>
    </ul>
</body>

</html>

注意：

li ~ li 匹配从第二个 <li> 开始往后的所有 <li>。
li ~ li ~ li 匹配从第三个开始往后的所有（第二个不匹配），依此类推。这种链式写法可以实现按顺序递增的延时或偏移，非常实用。
~ 与 + 不同：+ 只匹配紧邻的第一个兄弟，而 ~ 匹配后面所有符合的兄弟（即使中间有其他标签）。

2.6.9.3、页面效果

在这里插入图片描述

效果1 — hover 影响后面所有段落

鼠标未悬停时，所有段落为默认黑色。
鼠标移到 <h2> 上时，它后方的三个 <p> 全部变为蓝色（中间的 <div> 不受影响）。
鼠标移出，颜色恢复。

效果2 — 复选框切换显示后续提示

初始状态：.tip 都是隐藏的（display: none）。
勾选复选框 #toggle 后，复选框后面的所有 .tip 元素都显示为绿色块。
取消勾选，又重新隐藏。

效果3 — 列表项阶梯式延迟动画

初始所有 <li> 位置正常。
鼠标悬停在 <ul class="list"> 上时，所有 <li> 向右移动 30px。
- 项目一：立即移动（无延迟）
- 项目二：延迟 0.1s 后移动
- 项目三：延迟 0.2s 后移动
- 项目四：延迟 0.3s 后移动
移出时，同样按延迟时间依次归位（因为 transition-delay 同时作用于移入和移出）。

这些效果的核心是 ~ 能够匹配“后面所有兄弟”，配合伪类或状态变化，可以轻松实现批量样式联动，而无需为每个元素单独添加类名。

与 + 选择器的对比总结：

选择器匹配范围是否允许间隔元素典型用途
A + B 紧邻的下一个 B 否相邻项特殊样式，列表分隔线
A ~ B 后面所有的 B 是状态影响后续群组，阶梯动画，开关联动

选择器	匹配范围	是否允许间隔元素	典型用途
`A + B`	紧邻的下一个 `B`	否	相邻项特殊样式，列表分隔线
`A ~ B`	后面所有的 `B`	是	状态影响后续群组，阶梯动画，开关联动

3、CSS属性

3.1、字体属性

3.1.1、大小

3.1.1.1、基本信息

属性名：font-size
属性值：像素，比如 16px

3.1.1.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      p {
      	/* 必须设置单位 */
        font-size: 30px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>放大文本</p>
    <!-- 谷歌浏览器中文字原始大小：16px -->
    <div>原始大小文本</div>
  </body>
</html>

3.1.1.2、页面效果

在这里插入图片描述

3.1.2、粗细

3.1.2.1、基本信息

属性名：font-weight
属性值：
- 数字（开发使用）：
  - 正常：400
  - 加粗：700
- 关键字
  - 正常：normal
  - 加粗：bold
  - 变细：normal

3.1.2.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      #bold_word {
        /* 默认字体粗细单词：normal */
        font-weight: bold;
      }
      #bold_num {
        /* 默认字体粗细数值：400 */
        font-weight: 700;
      }
      #lighter {
        font-weight: lighter;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p id="bold_word">加粗文本（使用英文单词）</p>
    <p id="bold_num">加粗文本（使用数字）</p>
    <div>原始文本</div>
    <p id="lighter">加细文本</p>
  </body>
</html>

3.1.2.3、页面效果

在这里插入图片描述

3.1.3、倾斜

3.1.3.1、基本信息

属性名：font-style
属性值：
- 正常展示（不倾斜）：normal，可以将em标签内容设置成正常效果
- 倾斜：italic

3.1.3.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      em {
        font-style: normal;
      }
      p {
        font-style: italic;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <em>em标签</em>
    <p>p标签</p>
  </body>
</html>

3.1.3.3、页面效果

在这里插入图片描述

3.1.4、行高

3.1.4.1、基本信息

属性名：line-height
属性值：
- 数字：设置行高为字体大小的数字倍数，比如字体大小是16px、数字是2，那么行高就是32px；当没有设置元素高度的时候，比如a标签中的文字，可以设置line-height: 1使行高居中
- 像素值：直接设置行高为像素值，比如32px

3.1.4.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      p {
        /* 数字：如果值为数字，那么行高将设置为当前字体大小的倍数 */
        line-height: 2;
      }
      div {
        /* 像素：如果值为像素，那么行高就是像素值 */
        line-height: 30px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>《哈哈哈》是孟慧圆与宁夏共同作词作曲的流行歌曲，由王鹏编曲，由欣喜文化发行，收录于孟慧圆2019年7月25日发行的专辑《我被放上天空》中 [3]。该歌曲最初以Demo版本形式于2018年7月30日发布，展现了孟慧圆音色特质及创作理念 [6]。2022年6月17日，孟慧圆在央视音乐节目《一起音乐吧》现场演绎了该作品。</p>
    <hr>
    <div>《哈哈哈》是孟慧圆与宁夏共同作词作曲的流行歌曲，由王鹏编曲，由欣喜文化发行，收录于孟慧圆2019年7月25日发行的专辑《我被放上天空》中 [3]。该歌曲最初以Demo版本形式于2018年7月30日发布，展现了孟慧圆音色特质及创作理念 [6]。2022年6月17日，孟慧圆在央视音乐节目《一起音乐吧》现场演绎了该作品。</div>
  </body>
</html>

3.1.5.2、页面效果

在这里插入图片描述

3.1.4.4、拓展（垂直居中）

代码：

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 垂直居中 */
        line-height: 100px;
        /* 水平居中 */
        text-align: center;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>
      你好
    </div>
  </body>
</html>

页面效果：

在这里插入图片描述

3.1.5、字体

3.1.5.1、基本信息

属性名：font-family
属性值：字体名称，比如楷体，如果不确定前面字体是否生效，可以设置多个备用字体，字体之间用英文逗号分隔

3.1.5.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      p {
        font-family: 楷体;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>你好</p>
  </body>
</html>

3.1.5.3、页面效果

在这里插入图片描述

3.1.5.4、拓展（开发用法）

在这里插入图片描述

3.1.6、复合属性

3.1.6.1、基本信息

属性名：font
属性值：
- 完整写法：
  - 规则：是否倾斜、是否加粗(支持数值、单词)、字号/行高（支持数字[代表字体]、像素）字体
  - 示例：italic 700 30px/2 楷体
- 极简写法：
  - 规则：字号、字体
  - 示例：30px 楷体
  - 说明：必须带有字号、字体，否则font属性不生效

3.1.6.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      p {
        /* 完整写法：是否倾斜、是否加粗(支持数值、单词)、字号/行高（支持数字[代表字体]、像素） 字体 */
        /* font: italic 700 30px/2 楷体; */
        /* font: italic bold 10px/30px 楷体; */

        /* 必须带有字号、字体，否则font属性不生效 */
        font: 30px 楷体;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>2025年8月13日，河南郑州一餐馆发生消费纠纷</p>
  </body>
</html>

3.1.6.3、页面效果

在这里插入图片描述

3.1.7、缩进

3.1.7.1、基本信息

属性名：text-indent
属性值：支持两种单位，分别是px和em（1em等于字号宽度，这是常用写法）

3.1.7.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      p {
        /* 缩进指定像素值，这种方式较少使用 */
        /* text-indent: 40px; */

        /* 1em等于字号宽度，相当于首行缩进2个字符的效果 */
        text-indent: 2em;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>2025年8月13日，河南郑州一餐馆发生消费纠纷：三名女子带四名儿童共7人消费，点了两个凉菜、涮牛肚、点了一碗饸饹面，团购了十个羊肉串，并两次要求免费续面被拒。商家解释"免费续面"规则仅限"一人一碗"，建议单独购面，但顾客坚持并连给两个差评 [1]。双方争执后，商家公开监控自证，顾客以侵犯肖像权报警。警方介入未达成和解，商家拟调整规则。</p>
  </body>
</html>

3.1.7.3、页面效果

在这里插入图片描述

3.1.8、对齐

3.1.8.1、基本信息

属性名：text-align
属性值：
- left：左对齐，这是默认值
- center：居中对齐，常用值
- right：右对齐，很少使用
支持情况：将该属性设置在父标签中，将会对标签中的内容（包括文字、子标签）进行对齐

3.1.8.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        width:200px;
        height: 200px;
        background-color: pink;
        text-align: center;
      }
      img {
        width: 150px;
      }
      p {
        color: black;
        font-size: 15px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>
      <img src="./xiaomi.webp" alt="小米手机">
      <p class="name">Xiaomi MIX Flip 2</p>
    </div>
  </body>
</html>

3.1.8.3、页面效果

在这里插入图片描述

3.1.9、修饰线

3.1.8.1、基本信息

属性名：text-decoration
属性值：
- none：清除下划线、删除线、上划线
- underline：下划线
- line-through：删除线
- overline：上划线

3.1.8.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      a {
        /* 清除下划线、删除线、上划线 */
        text-decoration: none;
      }
      p {
        /* 下划线 */
        text-decoration: underline;
        /* 删除线 */
        /* text-decoration: line-through; */
        /* 上划线 */
        /* text-decoration: overline; */
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <a href="https://www.baidu.com">百度一下</a>
    <p>你好</p>
  </body>
</html>

3.1.8.3、页面效果

在这里插入图片描述

3.1.10、颜色

3.1.10.1、基本信息

属性名：color
属性值：
- 颜色英文单词（代码学习）：例如red、green、blue
- rgb表示法（了解即可）：例如rgb(r, g, b)，其中rgz表示红绿蓝三原色，取值是0-255
- rgba表示法（开发使用，实现透明色）：例如rgba（r, g, b, a），其中rgz表示红绿蓝三原色，取值是0-255。a表示透明度，取值是0-1的小数
- 十六进制表示法（开发使用，从设计稿复制）：两两一组，例如#ffcc00，如果一组中字母重复，支持简写成#fc0

3.1.10.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      p {
        /* 写法1：颜色英文单词，例如red、green、blue */
        /* color: red; */

        /* 写法2：rgb表示法，rgb取值0-255 */
        /* color: rgb(120, 0, 120); */

        /* 写法3：rgba表示法，，rgb取值0-255，a代表透明度，a取值0-1的小数 */
        /* color: rgba(0, 0, 0, 0.6); */

        /* 写法4：十六进制表示法，如果出现重复字母，支持简写#fc0 */
        color: #ffcc00;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>你好</p>
  </body>
</html>

3.1.10.3、页面效果

在这里插入图片描述

3.2、背景属性

3.2.1、背景颜色

3.2.1.1、基本信息

用途：设置背景颜色，支持div、p、h1等等
写法：background-color: gray;

3.2.1.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      p {
        background-color: gray;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>你好</p>
  </body>
</html>

3.2.1.3、页面效果

在这里插入图片描述

3.2.2、背景图

3.2.2.1、基本信息

用途：设置背景图片，默认展示方式是重复平铺
写法：background-image: url("./小米.png");

3.2.2.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-image: url("./小米.png");
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>你好</div>
  </body>
</html>

3.2.2.3、页面效果

在这里插入图片描述

3.2.3、背景图平铺方式

3.2.3.1、基本信息

用途：设置背景图片平铺方式
写法：background-repeat: 平铺效果;
- 平铺效果：
  - no-repeat：在盒子左上角显示一张背景图，不平铺
  - repeat：在盒子全局平铺背景图（包括x轴、y轴）
  - repeat-x：在盒子x轴方向平铺背景图
  - repeat-y：在盒子y轴方向平铺背景图

3.2.3.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      body {
        display: flex; /* 设置为flex容器 */
        gap: 20px; /* 盒子之间的间距 */
        width: 100%; /* 容器宽度，可根据需要调整 */
      }
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        background-image: url("./小米.png");
      }
      #no-repeat {
        /* 在盒子左上角显示一张背景图，不平铺 */
        background-repeat: no-repeat;
      }
      #repeat {
        /* 在盒子全局平铺背景图（包括x轴、y轴） */
        background-repeat: repeat;
      }
      #repeat-x {
        /* 在盒子x轴方向平铺背景图 */
        background-repeat: repeat-x;
      }
      #repeat-y {
        /* 在盒子y轴方向平铺背景图 */
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div id="no-repeat">在盒子左上角显示一张背景图，不平铺</div>
    <div id="repeat">在盒子全局平铺背景图（包括x轴、y轴）</div>
    <div id="repeat-x">在盒子x轴方向平铺背景图</div>
    <div id="repeat-y">在盒子y轴方向平铺背景图</div>
  </body>
</html>

3.2.3.3、页面效果

在这里插入图片描述

3.2.4、背景图位置

3.2.4.1、基本信息

用途：设置背景图展示位置
写法：background-position: 水平位置垂直位置;，无论是水平位置，还是垂直位置，都支持使用位置单词或者像素。支持使用单个位置单词，另外一个位置就是居中对齐；支持位置单词和像素值共用。
- 位置单词：left（水平位置）、right（水平位置）；top（垂直位置）、bottom（垂直位置）；center（居中对齐，包括水平位置、垂直位置）
  - 2个单词：代表水平位置和垂直位置
  - 1个单词：代表水平位置或者垂直位置，具体位置以单词来定（水平位置：left、right；垂直位置：top、bottom），另外一个方向默认使用center
- 像素：支持正值（例如10px）、支持负值（-10px）
- 百分比：支持正值（例如50%）、支持负值（-150%）。实际偏移量 = (容器尺寸 - 背景图尺寸) × 百分比值
- 位置单词+像素：支持混合使用

3.2.4.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      body {
        display: flex; /* 设置为flex容器 */
        gap: 20px; /* 盒子之间的间距 */
        width: 100%; /* 容器宽度，可根据需要调整 */
      }
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        background-image: url("./小米.png");
        background-repeat: no-repeat;
      }
      #right_bottom {
        /* 使用多个单词 */
        background-position: right bottom;
      }
      #right {
        /* 使用多个单词 */
        background-position: right center;
      }
      #px {
        /* 使用多个像素值 */
        background-position: 10px -10px;
      }
      #px_center {
        /* 使用像素值+位置 */
        background-position: 10px center;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div id="right_bottom">right bottom</div>
    <div id="right">right（center）</div>
    <div id="px">10px -10px</div>
    <div id="px_center">10px center</div>
  </body>
</html>

3.2.4.3、页面效果

在这里插入图片描述

3.2.5、背景图缩放

3.2.5.1、基本信息

用途：设置背景图在盒子中的展示大小
写法：background-size: XXX;，支持设置单词、百分比、像素值，其中百分比和像素值可以混用
- 单词：
  - contain：等比例放大或者缩小背景图片，背景图完全展示在盒子中，可能出现部分背景图空白的情况
  - cover：等比例放大或者缩小背景图片，背景图完全覆盖盒子，但是可能部分背景图超出盒子
- 百分比：
  - 设置2个：支持设置水平方式和垂直方向的百分比展示效果，代表将背景图设置为盒子的百分比。当然也支持设置单个百分比（代表水平方向），那么另外一个方向就是等比例缩放的
  - 设置1个：代表将水平方向的背景图设置为盒子的百分比，另外一个方向是等比例缩放的
- 像素值：直接设置背景图的像素值大小，较少使用；当然也支持设置单个像素值（代表水平方向），那么另外一个方向就是等比例缩放的
  - 设置2个：代表设置水平方式和垂直方向的像素值
  - 设置1个：代表设置水平方式的像素值，另外一个方向是等比例缩放的
- 像素值+百分比 / 百分比+像素值混合设置：支持这种设置方式

3.2.5.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      body {
        display: flex; /* 设置为flex容器 */
        gap: 20px; /* 盒子之间的间距 */
        width: 100%; /* 容器宽度，可根据需要调整 */
      }
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        background-image: url("./daotian.jfif");
        background-repeat: no-repeat;
      }
      #contain {
        /* 等比例放大或者缩小背景图片，背景图完全展示在盒子中，可能出现部分背景图空白的情况 */
        background-size: contain;
      }
      #cover {
        /* 等比例放大或者缩小背景图片，背景图完全覆盖盒子，但是可能部分背景图超出盒子 */
        background-size: cover;
      }
      #percentage {
        /* 支持设置水平方式和垂直方向的百分比展示效果，代表将背景图设置为盒子的百分比。
        当然也支持设置单个百分比（代表水平方向），那么另外一个方向就是等比例缩放的 */
        background-size: 50% 100%;
      }
      #pixel {
        /* 直接设置背景图的像素值大小，较少使用
        当然也支持设置单个像素值（代表水平方向），那么另外一个方向就是等比例缩放的 */
        background-size: 100px 100px;
      }
      #percentage_pixel {
        /* 支持同时设置像素值、百分比，代表水平方向、垂直方向 */
        background-size: 100px 100%;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div id="contain">contain（背景图完全展示，可能会存在空白）</div>
    <div id="cover">cover（背景图完全覆盖盒子，背景图可能超出盒子）</div>
    <div id="percentage">百分比（将背景图设置为盒子的百分比）</div>
    <div id="pixel">像素值（直接设置背景图的像素值）</div>
    <div id="percentage_pixel">像素值+百分比</div>
  </body>
</html>

3.2.5.3、页面效果

在这里插入图片描述

3.2.6、背景图固定

3.2.6.1、基本信息

用途：设置背景图是否跟随文字滚动
写法：background-attachment: fixed;，默认情况下是跟着滚动的，这种方式设置之后就不会跟着滚动

3.2.6.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        background-image: url("./big.png");
        background-color: white;
        background-size: 100%;
        background-repeat: no-repeat;
        /* 固定背景图，不会随着内容滚动 */
        background-attachment: fixed;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    </div>
  </body>
</html>

3.2.6.3、页面效果

在这里插入图片描述

3.2.7、背景图复合属性

3.2.7.1、基本信息

用途：设置多种背景属性
写法：background: 背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定（空格隔开）;

3.2.7.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        background: pink url("./big.png") no-repeat center center/cover fixed;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    <p>记者从中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动新闻中心</p>
    </div>
  </body>
</html>

3.2.7.3、页面效果

在这里插入图片描述

3.3、显示模式

3.3.1、显示模式种类

3.3.1.1、基本信息

概念：标签的默认展示方式
作用：在布局网页的时候，根据页面标签摆放位置，确定标签的显示模式，进而决定使用的标签
分类：
- 块级元素：
  - 独占一行
  - 宽度默认是父级的100%
  - 添加宽高属性生效
- 行内块元素：
  - 一行可以显示多个
  - 宽高尺寸默认由内容撑开
  - 设置宽高属性生效
- 行内元素：
  - 一行可以显示多个
  - 宽高尺寸由内容撑开
  - 设置宽高属性不生效

3.3.1.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 块级元素 */
      div {
        width: 100px;
        height: 100px;
      }
      div#div1 {
        background-color: pink;
      }
      div#div2 {
        background-color: greenyellow;
      }
      /* 行内块元素 */
      img#img2 {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <h3>块级元素</h3>
     <div id="div1">hello</div>
     <div id="div2">world</div>

     <h3>行内块元素</h3>
    <img id="img1" src="./小米.jpg" alt="小米">
    <img id="img2" src="./小米.jpg" alt="小米">
    <br>

     <h3>行内元素</h3>
     <span style="background-color: pink;">hello</span>
     <span style="background-color: greenyellow;">world</span>
  </body>
</html>

3.3.1.3、页面效果

在这里插入图片描述

3.3.2、转换显示模式

3.3.2.1、基本信息

概念：转换标签的默认展示方式
设置属性：
- 属性名：display
- 属性值：
  - 转换为块级：block
  - 转换为行内块：inline-block
  - 转换为行内（一般不用）：inline

3.3.2.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 块级元素 转换为 行内块元素 */
      div {
        width: 100px;
        height: 100px;
        display: inline-block;
      }
      div#div1 {
        background-color: pink;
      }
      div#div2 {
        background-color: greenyellow;
      }
      /* 行内块元素 转换为 块级元素 */
      img {
        display: block;
      }
      img#img2 {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <h3>块级元素 转换为 行内块元素</h3>
     <div id="div1">hello</div>
     <div id="div2">world</div>

     <h3>行内块元素 转换为 块级元素</h3>
    <img id="img1" src="./小米.jpg" alt="小米">
    <img id="img2" src="./小米.jpg" alt="小米">
    <br>
  </body>
</html>

3.3.2.3、页面效果

在这里插入图片描述

3.4、盒子模型

3.4.1、组成部分

3.4.1.1、基本信息

作用：用于网页布局，设置内外边距、边框
组成部分：
- 宽高：width、height
- 内边距：padding
- 边框：border
- 外边距：margin

3.4.1.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
        padding: 10px;
        margin: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div>hello</div>
  </body>
</html>

3.4.1.3、页面效果

在这里插入图片描述

3.4.2、border属性（边框）

3.4.2.1、基本信息

作用：设置盒子边框
用法：
- 统一设置盒子所有边框：
  - 写法：border: 粗细样式颜色（不区分顺序），例如border: 1px solid red
- 单独设置盒子边框：
  - 盒子上边框：border-top: 粗细线型颜色，例如border-top: 1px solid red
  - 盒子下边框：border-bottom: 粗细线型颜色，例如border-bottom: 1px solid red
  - 盒子左边框：border-left: 粗细线型颜色，例如border-left: 1px solid red
  - 盒子右边框：border-right: 粗细线型颜色，例如border-right: 1px solid red
常用线型：
- 实线：solid
- 虚线：dashed
- 点线：dotted

3.4.2.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      #first {
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 1px solid red;
        margin-bottom: 20px;
      }
      #second {
        width: 100px;
        height: 100px;
        background-color: pink;
        border-top: 1px solid red;
        border-bottom: 1px dashed red;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div id="first">hello</div>
     <div id="second">world</div>
  </body>
</html>

3.4.2.3、页面效果

在这里插入图片描述

3.4.3、内边距属性（padding）

3.4.3.1、基本信息

作用：设置盒子内边距
用法：
- 统一设置盒子内边距：
  - 设置所有内边距：padding： 10px;
  - 设置上下、左右内边距：padding: 10px 80px;
  - 设置上、左右、下内边距：padding: 10px 40px 80px;
  - 设置上、右、下、左内边距：padding: 10px 20px 40px 80px;
- 单独设置盒子内边距：
  - 设置上内边距：padding-top：10px;
  - 设置右内边距：padding-right：10px;
  - 设置下内边距：padding-bottom：10px;
  - 设置左内边距：padding-left：10px;

3.4.3.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      #first {
        width: 100px;
        height: 100px;
        background-color: pink;
        padding: 10px;
        margin-bottom: 20px;
      }
      #second {
        width: 100px;
        height: 100px;
        background-color: pink;
        padding-top: 10px;
        padding-bottom: 10px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div id="first">hello</div>
     <div id="second">world</div>
  </body>
</html>

3.4.3.3、页面效果

在这里插入图片描述

3.4.4、外边距属性（margin）

3.4.4.1、基本信息

作用：设置盒子外边距，其中外边距是在盒子宽高范围之外
用法：
- 统一设置盒子外边距：
  - 设置所有外边距：margin: 10px;
  - 设置上下、左右外边距写法1：margin: 10px 80px;
  - 设置上下、左右外边距写法2：margin: 0 auto;，可以让盒子水平自动居中，实现版心居中效果，该效果在京东首页也是存在的。注意：实现版心居中效果，要求盒子必须具有宽度。
  - 设置上、左右、下外边距：margin: 10px 40px 80px;
  - 设置上、右、下、左外边距：margin: 10px 20px 40px 80px;
- 单独设置盒子外边距：
  - 设置上外边距：margin-top：10px;
  - 设置右外边距：margin-right：10px;
  - 设置下外边距：margin-bottom：10px;
  - 设置左外边距：margin-left：10px;

3.4.4.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      #first {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 10px;
        margin-bottom: 20px;
      }
      #second {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      #auto {
        width: 800px;
        height: 300px;
        background-color: pink;
        margin: 0 auto;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div id="first">hello</div>
     <div id="second">world</div>
     <div id="auto">auto</div>
  </body>
</html>

3.4.4.3、页面效果

在这里插入图片描述

3.4.5、box-sizing属性（尺寸计算）

3.4.5.1、基本信息

作用：将边框宽度、内边距计算在盒子宽度和高度之内
说明：在默认情况下，盒子宽度、高度并不包括内边距和边框。但是设置box-sizing: border-box属性之后，盒子宽度、高度就包含了内边距和边框宽度。

3.4.5.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      #first {
        width: 100px;
        height: 100px;
        background-color: pink;
        padding: 10px;
        border: 5px solid red;
        margin: 10px;
      }
      #second {
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: pink;
        padding: 10px;
        border: 5px solid red;
        margin: 10px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div id="first">hello</div>
     <div id="second">world</div>
  </body>
</html>

3.4.5.3、页面效果

在这里插入图片描述

3.4.6、清除默认样式

3.4.6.1、基本信息

作用：清除默认样式，包括：（1）默认内外边距（2）列表前缀（点.）
写法：

3.4.6.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 去除标签的内外边距，包括body标签 */
      * {
        margin: 0;
        padding: 0;
      }
      /* 去除li前面的小点点 */
      li {
        list-style: none;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div>春天来了</div>
     <ul>
      <li>hello</li>
      <li>world</li>
      <li>spring</li>
     </ul>
  </body>
</html>

3.4.6.3、页面效果

在这里插入图片描述

3.4.7、元素溢出

3.4.7.1、基本信息

作用：控制元素溢出内容的展示方式
属性信息：
- 属性名：overflow
- 属性值：
  - 不设置该属性：直接溢出
  - hidden：隐藏溢出内容
  - scroll：无论是否出现内容溢出情况，都会出现x轴、y轴方向的滚动条
  - auto：如果内容没有溢出，将不会出现滚动条。如果溢出，将出现对应方向的滚动条

3.4.7.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin: 20px;
        display: inline-block;
      }
      #hidden {
        overflow: hidden;
      }
      #scroll {
        overflow: scroll;
      }
      #auto-one {
        overflow: auto;
      }
      #auto-two {
        overflow: auto;
        white-space: nowrap; /* 防止内容换行 */
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div>春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了</div>
     <div id="hidden">春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了</div>
     <div id="scroll">春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了</div>
     <div id="auto-one">春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了</div>
     <div id="auto-two">春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了春天来了</div>
  </body>
</html>

3.4.7.3、页面效果

在这里插入图片描述

3.4.8、外边距合并

3.4.8.1、基本信息

概念：垂直排列的兄弟元素，上面盒子—下外边距和下面盒子—上外边距会合并到一起，并取两个margin的最大值
解决方案：直接设置某一个盒子的外边距为合适大小，比如70px，另外一个不设置即可，这样两个盒子的外边距就是合适值了

3.4.8.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      #div1 {
        background-color: green;
        margin-bottom: 50px;
      }
      #div2 {
        background-color: blue;
        margin-top: 20px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div id="div1"></div>
     <div id="div2"></div>
  </body>
</html>

3.4.8.3、页面效果

在这里插入图片描述

3.4.8、外边距塌陷

3.4.8.1、基本信息

概念：如果子盒子设置了margin-top或者margin-bottom，将导致父盒子往下/向上移动
说明： margin 塌陷仅发生在 “处于标准流中的块级元素” 之间（包括父子元素、相邻兄弟元素）。而父子元素垂直外边距是否直接接触，这才是外边距塌陷的核心
解决方案：
- 设置父盒子padding-top（推荐）：使用父盒子的内边距实现子盒子的外边距效果
  - 原理：避免父子元素垂直外边距直接接触
- 设置父盒子overflow: hidden（可用）：设置父盒子超出隐藏
  - 原理：overflow: hidden 会触发父元素形成 “块级格式化上下文（BFC）”，而 BFC 具有 “隔离内部布局” 的特性，能阻止内部元素的外边距与外部元素的外边距合并（即避免塌陷）。
- 设置父盒子的border-top（不用）：有一个边框，不太合适
  - 原理：避免父子元素垂直外边距直接接触
- 设置before/after伪元素display:table
  - 原理：空的 display: block 伪元素就像一张 “透明的纸”，子元素的 margin 会透过它与父元素产生关联；而 display: table 则像一张 “不透明的板”，能彻底阻断这种关联。

3.4.8.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 说明：下面代码仅仅演示margin-top的效果，其实margin-bottom产生的外边距塌陷也是使用这种方法解决的 */
      #parent {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 方案1：使用padding-top模拟子元素设置margin-top的效果 */
        box-sizing: border-box;
        padding-top: 50px;

        /* 方案2：当子元素设置margin-top的时候，设置overflow会触发父元素形成 “块级格式化上下文（BFC）”，而 BFC 具有 “隔离内部布局” 的特性，能阻止内部元素的外边距与外部元素的外边距合并（即避免塌陷）。 */
        /* overflow: hidden; */

        /* 方案3:当子元素设置margin-top的时候，使用border-top隔绝父子元素外边距直接接触 */
        /* border-top: 1px solid black; */
      }

      /* 方案4：当子元素设置margin-top的时候，使用伪元素隔绝父子元素之间的外边距。其中display: table 会让伪元素生成一个 “表格匿名盒子”（类似 <table> 元素的特性）。这个伪元素会被插入到父元素的最顶部（子元素 #son 之前），并且表格元素默认会创建一个 “隔离边界”，将父元素的顶部内边距区域与子元素的 margin-top 隔离开来。
        如果冷成display:block是没有用的，原因是普通块级元素（无内容、无高度）在默认情况下，无法形成有效的隔离边界，依然会与父元素的顶部边缘直接接触，导致塌陷继续发生。 */
      /* #parent::before {
        content: "";
        display: table;
      } */

      #son {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 当采用方案2、方案3、方案4时，可以打开下面注释 */
        /* margin-top: 50px; */
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div id="parent">
      <div id="son"></div>
     </div>
  </body>
</html>

3.4.8.3、页面效果

在这里插入图片描述

3.4.9、行内元素垂直间距

3.4.9.1、基本信息

作用：对于行内元素来说，padding、margin都是无用的。但是line-height属性可以拉开行内元素的垂直间距

3.4.9.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      span {
        line-height: 50px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <span>这一握，情深意重。精神的传承，事业的赓续，前路未竟！老兵的皱纹，刻着时光的印记。老茧似铁，凝铸烽烟之痕。他们的手，握过寒枪、握过弹坑的焦土；他们的身，历经沙场之苦、溅过敌寇之血。</span>
  </body>
</html>

3.4.9.3、页面效果

在这里插入图片描述

3.4.10、border-radius属性（圆角）

3.4.10.1、基本信息

概念：设置盒子的圆角，属性值代表圆角半径，圆角半径支持px像素和百分比；如果使用百分比，最多50%，超过就没有效果，毕竟圆形就是最圆的圆角了
写法：
- 写一个值：设置所有圆角
- 设置多个值（从左上角顺时针进行赋值，如果部分角没有值，那么与对角的值相同）：
  - 设置2个值：分别代表左上+右下、右上+左下；分别设置左上、右上，那么右下=左上的值，而左下等于右上的值
  - 设置3个值：分别代表左上、右上+左下、右下；分别设置左上、右上、右下，那么左下=右上的值
  - 设置4个值：分别代表左上、右上、右下、左下；按照顺时针进行分别设置

3.4.10.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }
      div {
        width: 300px;
        height: 100px;
        background-color: pink;
        border-radius: 50px;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <img src="./刘亦菲头像.jpg" alt="刘亦菲">
     <div></div>
  </body>
</html>

3.4.10.3、页面效果

在这里插入图片描述

3.4.11、box-shadow属性（阴影）

3.4.11.1、基本信息

作用：设置阴影，用于提醒用户，或者让盒子更有立体感
写法：box-shadow: x轴偏移量 y轴偏移量模糊半径扩散半径颜色（支持rgba）内外阴影（默认值：外阴影，可省略，内阴影设置为inset）
- x轴偏移量、y轴偏移量：像素值，即阴影在x、y轴方向平移的尺寸
- 模糊半径：像素值，值越大阴影越柔和
- 扩散半径：像素值，值越大阴影越大
- 颜色（支持rgba）：阴影颜色
- 内外阴影：如果是外阴影，就不用写值了；如果是内阴影，需要写成inset

3.4.11.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      #one {
        width: 100px;
        height: 100px;
        background-color: pink;
        box-shadow: 5px 5px 10px 1px rgba(0, 255, 0, 0.5);
      }
      #two {
        width: 100px;
        height: 100px;
        background-color: pink;
        box-shadow: 5px 5px 10px 1px rgba(0, 255, 0, 0.5) inset;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
     <div id="one">外阴影</div>
     <br><br><br>
     <div id="two">内阴影</div>
  </body>
</html>

3.4.11.3、页面效果

在这里插入图片描述

3.5、布局属性

3.5.1、标准流

3.5.1.1、基本信息

概念：也称作文档流，指代标签在页面中的默认排班规则，例如：块级元素独占一行，行内元素可以一行显示多个

3.5.2、浮动

3.5.2.1、浮动效果

3.5.2.1.1、基本信息

概念：浮动就是脱离标准流，浮在标准流位置上面，简称脱标。具备以下几个特点：
- 顶对齐（盒子顶部对齐）
- 盒子宽高生效，然后在一行显示
- 脱标-即脱离标准流
写法：float
- left：左浮动
- right：右浮动

3.5.2.1.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      
      li {
        list-style: none;
      }

      .product {
        width: 1266px;
        height: 628px;
        background-color: pink;
        margin: 0 auto;
      }

      .left {
        float: left;
        width: 234px;
        height: 628px;
        background-color: skyblue;
      }
      
      .right {
        float: right;
        width: 978px;
        height: 628px;
        background-color: brown;
      }

      .right li {
        float: left;
        width: 234px;
        height: 300px;
        background-color: orange;
        margin-right: 14px;
        margin-bottom: 14px;
      }

      .right ul>li:nth-child(4n) {
        margin: 0;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
      <div class="product">
        <div class="left"></div>
        <div class="right">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
  </body>
</html>

3.5.2.1.3、页面效果

在这里插入图片描述

3.5.2.2、清除浮动-让父元素包裹住浮动的子元素

3.5.2.2.1、基本信息

概念：
- 为什么要清除浮动：如果父级元素没有设置高度，目的是想使用子级元素高度撑开父级高度。如果此时子级元素设置了浮动属性，那么子级元素将浮在标准流之上，所以子元素无法撑开父级高度，此时父级高度就是0，所以无法实现目的，因此才需要清除浮动效果，让父元素包裹住浮动的子元素。
清除浮动的方案：
- 设置父元素的overflow: hidden
  - 原理：overflow: hidden是触发 BFC 的条件之一。BFC 作为一个 “独立的布局容器”，有一个关键特性：BFC 会自动包裹内部所有浮动元素，会 “识别” 到内部浮动的子元素，将自身高度撑开至能包裹所有子元素（包括浮动元素），从而避免了高度塌陷。
- 在父元素末尾，添加一个伪元素，并设置clear: both
  - 原理：clear: both 强制伪元素排在所有浮动元素之后，从而 “撑开” 父元素的高度，使其能包裹住内部的浮动子元素。而浮动子元素的上方边界（即它们在父元素中的垂直起始位置），是由浮动元素自身的 margin-top 以及父元素的布局规则共同决定的

3.5.2.2.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .parent {
        width: 500px;
        background-color: pink;
        margin: 0 auto;
        /* 方案1：overflow: hidden 是触发 BFC 的条件之一。BFC 作为一个 “独立的布局容器”，有一个关键特性：BFC 会自动包裹内部所有浮动元素，会 “识别” 到内部浮动的子元素，将自身高度撑开至能包裹所有子元素（包括浮动元素），从而避免了高度塌陷。 */
        overflow: hidden;
      }
      .parent div {
        width: 50px;
        height: 50px;
        background-color: green;
      }
      .parent .son1 {
        float: left;
      }
      .parent .son2 {
        float: right;
      }
      .other {
        height: 100px;
        background-color: burlywood;
      }
      /* 方案2：clear: both 强制伪元素排在所有浮动元素之后，从而 “撑开” 父元素的高度，使其能包裹住内部的浮动子元素。而浮动子元素的上方边界（即它们在父元素中的垂直起始位置），是由浮动元素自身的 margin-top 以及父元素的布局规则共同决定的 */
      /* clear: both代表清除左右两侧浮动，并且只有设置在块级元素上才能生效，所以必须设置display为块级元素 */
      /* .parent::after {
        content: "";
        display: block; 
        clear: both;
      } */
    </style>
  </head>
  <body> <!-- 主体 -->
      <div class="parent">
        <div class="son1"></div>
        <div class="son2"></div>
      </div>
      <div class="other"></div>
  </body>
</html>

3.5.2.2.3、页面效果

在这里插入图片描述

3.5.2.2.4、演示未清除浮动效果的情况

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .parent {
        width: 500px;
        background-color: pink;
        margin: 0 auto;
        border: 1px solid red;
      }
      .parent div {
        width: 50px;
        height: 50px;
        background-color: green;
      }
      .parent .son1 {
        float: left;
      }
      .parent .son2 {
        float: right;
      }
      .other {
        height: 100px;
        background-color: burlywood;
      }
      /* 方案2：clear: both 强制伪元素排在所有浮动元素之后，从而 “撑开” 父元素的高度，使其能包裹住内部的浮动子元素。而浮动子元素的上方边界（即它们在父元素中的垂直起始位置），是由浮动元素自身的 margin-top 以及父元素的布局规则共同决定的 */
      /* clear: both代表清除左右两侧浮动，并且只有设置在块级元素上才能生效，所以必须设置display为块级元素 */
      /* .parent::after {
        content: "";
        display: block; 
        clear: both;
      } */
    </style>
  </head>
  <body> <!-- 主体 -->
      <div class="parent">
        <div class="son1"></div>
        <div class="son2"></div>
      </div>
      <div class="other"></div>
  </body>
</html>

页面效果：

在这里插入图片描述

3.5.3、Flex弹性布局

没问题，这里给你一份 Flex 弹性布局 的系统讲解，按概念—容器属性—项目属性—常见布局—注意事项整理，方便你随时查阅。

3.5.3.1、什么是 Flex？

Flex 是 display: flex 或 inline-flex 设置的一维布局模型。
它让父容器有能力控制子元素的排列、对齐、空间分配，解决了传统块级/浮动布局中垂直居中、等高、自动分配宽度等痛点。

.container {
  display: flex;    /* 块级 flex 容器 */
  /* 或 inline-flex 行内 flex 容器 */
}

主轴（main axis） 与 交叉轴（cross axis）：

默认主轴水平方向（从左到右），交叉轴垂直方向（从上到下）
可通过 flex-direction 改变

3.5.3.2、容器属性（6 个）

3.5.3.2.1、`flex-direction` – 主轴方向

flex-direction: row | row-reverse | column | column-reverse;

row（默认）：水平，起点在左
row-reverse：水平，起点在右
column：垂直，起点在上
column-reverse：垂直，起点在下

3.5.3.2.2、`flex-wrap` – 是否换行

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）：不换行，溢出压缩
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

3.5.3.2.3、`justify-content` – 主轴对齐

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

flex-start（默认）：起始对齐
flex-end：终点对齐
center：居中
space-between：两端对齐，项目之间间距相等
space-around：每个项目两侧间距相等（比 between 两端多出半个间距）
space-evenly：所有间距完全相等（包括两端）

3.5.3.2.4、`align-items` – 交叉轴对齐（单行）

align-items: stretch | flex-start | flex-end | center | baseline;

stretch（默认）：子项未设高度时占满交叉轴
flex-start：起点对齐
flex-end：终点对齐
center：居中
baseline：文字基线对齐

3.5.3.2.5、`align-content` – 多行时交叉轴对齐

仅在 flex-wrap: wrap 且有多行时生效

align-content: stretch | flex-start | flex-end | center | space-between | space-around;

作用类似 justify-content，但针对交叉轴的多行分布。

3.5.3.3、项目属性（6 个）

3.5.3.3.1、`order` – 排序

order: 0; /* 默认为0，数值越小越靠前 */

可以负值，改变视觉顺序（不改变 DOM 结构）。

3.5.3.3.2、`flex-grow` – 放大比例

flex-grow: 0; /* 默认0，不放大 */

容器有剩余空间时，按 flex-grow 比例分配给子项。
你之前代码中的 flex: 0.5 就相当于 flex-grow: 0.5（其余部分用默认值）。

3.5.3.3.3、`flex-shrink` – 缩小比例

flex-shrink: 1; /* 默认1，空间不足时等比例缩小 */

设为 0 则不会缩小。

3.5.3.3.4、`flex-basis` – 主轴方向的初始尺寸

flex-basis: auto | <width>;

默认 auto（基于宽度/高度）；可以设置具体像素或百分比。

3.5.3.3.5、`flex` – 上述三个的简写（最常用）

flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

常见写法：

flex: 1 → flex-grow:1; flex-shrink:1; flex-basis:0%
flex: auto → flex-grow:1; flex-shrink:1; flex-basis:auto
flex: none → flex-grow:0; flex-shrink:0; flex-basis:auto
flex: 0.5（你代码中）相当于 flex: 0.5 1 0%（因为省略了后两个）

3.5.3.3.6、`align-self` – 覆盖容器的 `align-items`

align-self: auto | stretch | flex-start | flex-end | center | baseline;

单独指定某个项目的交叉轴对齐方式。

3.5.3.4、常见布局示例

3.5.3.4.1、水平垂直居中（经典）

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

3.5.3.4.2、两列/三列自适应（圣杯/双飞翼效果）

.container {
  display: flex;
}
.left { width: 200px; }
.right { width: 200px; }
.center { flex: 1; }   /* 占据剩余所有空间 */

3.5.3.4.3、底部栏固定（Sticky Footer）

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  flex: 1;
}

3.5.3.4.4、平均分布，间距均匀

.parent {
  display: flex;
  justify-content: space-evenly;
}

3.5.3.5、注意事项

设为 Flex 容器后，子项的 float、clear、vertical-align 失效。
绝对定位的子项 不再参与 Flex 布局，但容器本身仍作为定位容器。
flex-basis 和 width/height 关系：主轴方向 flex-basis 优先级高于 width（水平方向时）；交叉轴方向 align-self 可能影响高度。
最小内容规则：Flex 子项通常不会收缩到小于内容尺寸，除非设置 min-width: 0 或 overflow: hidden。
flex: 1 不等于 width: 100%：它表示flex-grow:1，会参与剩余空间分配，而不是单纯的百分比宽度。
flex 子项的 flex-shrink 默认为 1，理论上允许收缩，但一旦子项有明确的 width，浏览器就会优先满足它。

3.5.3.6、与 Grid 的简单对比

特性	Flex	Grid
维度	一维（行或列）	二维（行+列）
适用场景	导航栏、列表、居中对齐、不确定项目数量的分布	整体页面布局、复杂网格

如果你想把 Flex 布局 用于你当前的“扩展卡片”项目，你已经在用了（.container { display: flex; } 配合 flex:0.5 / 5）。如果需要实际案例进一步消化，我可以帮你出几个练习小任务，随时说。

3.5.3.7、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      body {
        background-color: #f5f5f5;
      }
      .box {
        display: flex;
        width: 1226px;
        height: 614px;
        margin: 20px auto;
      }
      .left {
        margin-right: 14px;
      }
      .left img {
        width: 234px;
      }
      .right {
        width: 978px;
      }
      .right ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        height: 100%;
      }
      .right ul li {
        box-sizing: border-box; /* width 包含 padding 和 border */
        width: 234px;
        height: 300px;
        background-color: #fff;
        padding: 20px 0;
      }
      .right .figure {
        width: 100%;
        text-align: center; /* 让行内/行内块子元素水平居中 */
      }
      .right .figure img {
        width: 160px;
        height: 160px;
      }
      .right .title {
        margin: 0 10px 2px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
      }
      .right .desc {
        margin: 0px 10px 10px;
        font-size: 12px;
        color: #b0b0b0;
        text-align: center;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
      }
      .right .price {
        margin: 0 10px 14px;
        font-size: 12px;
        color: #ff6700;
        text-align: center;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
      <div class="box">
        <div class="left">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=316&h=829&f=webp&q=90" alt="">
        </div>
        <div class="right">
          <ul>
            <li>
              <div class="figure">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202510211539_ef4103335f09e9897ef1c4e94bdf790e.png?thumb=1&w=270&h=270&f=webp&q=90" alt="">
              </div>
              <h3 class="title">REDMI K90 Pro Max</h3>
              <p class="desc">第五代 骁龙®8至尊版｜超级像素护眼屏｜5X 潜望长焦</p>
              <p class="price">3999元起</p>
            </li>
            <li>
              <div class="figure">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202510211539_ef4103335f09e9897ef1c4e94bdf790e.png?thumb=1&w=270&h=270&f=webp&q=90" alt="">
              </div>
              <h3 class="title">REDMI K90 Pro Max</h3>
              <p class="desc">第五代 骁龙®8至尊版｜超级像素护眼屏｜5X 潜望长焦</p>
              <p class="price">3999元起</p>
            </li>
            <li>
              <div class="figure">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202510211539_ef4103335f09e9897ef1c4e94bdf790e.png?thumb=1&w=270&h=270&f=webp&q=90" alt="">
              </div>
              <h3 class="title">REDMI K90 Pro Max</h3>
              <p class="desc">第五代 骁龙®8至尊版｜超级像素护眼屏｜5X 潜望长焦</p>
              <p class="price">3999元起</p>
            </li>
            <li>
              <div class="figure">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202510211539_ef4103335f09e9897ef1c4e94bdf790e.png?thumb=1&w=270&h=270&f=webp&q=90" alt="">
              </div>
              <h3 class="title">REDMI K90 Pro Max</h3>
              <p class="desc">第五代 骁龙®8至尊版｜超级像素护眼屏｜5X 潜望长焦</p>
              <p class="price">3999元起</p>
            </li>
            <li>
              <div class="figure">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202510211539_ef4103335f09e9897ef1c4e94bdf790e.png?thumb=1&w=270&h=270&f=webp&q=90" alt="">
              </div>
              <h3 class="title">REDMI K90 Pro Max</h3>
              <p class="desc">第五代 骁龙®8至尊版｜超级像素护眼屏｜5X 潜望长焦</p>
              <p class="price">3999元起</p>
            </li>
            <li>
              <div class="figure">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202510211539_ef4103335f09e9897ef1c4e94bdf790e.png?thumb=1&w=270&h=270&f=webp&q=90" alt="">
              </div>
              <h3 class="title">REDMI K90 Pro Max</h3>
              <p class="desc">第五代 骁龙®8至尊版｜超级像素护眼屏｜5X 潜望长焦</p>
              <p class="price">3999元起</p>
            </li>
            <li>
              <div class="figure">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202510211539_ef4103335f09e9897ef1c4e94bdf790e.png?thumb=1&w=270&h=270&f=webp&q=90" alt="">
              </div>
              <h3 class="title">REDMI K90 Pro Max</h3>
              <p class="desc">第五代 骁龙®8至尊版｜超级像素护眼屏｜5X 潜望长焦</p>
              <p class="price">3999元起</p>
            </li>
            <li>
              <div class="figure">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202510211539_ef4103335f09e9897ef1c4e94bdf790e.png?thumb=1&w=270&h=270&f=webp&q=90" alt="">
              </div>
              <h3 class="title">REDMI K90 Pro Max</h3>
              <p class="desc">第五代 骁龙®8至尊版｜超级像素护眼屏｜5X 潜望长焦</p>
              <p class="price">3999元起</p>
            </li>
          </ul>
        </div>
      </div>
  </body>
</html>

3.5.3.8、页面效果

在这里插入图片描述

3.6、其他属性

3.6.1、user-select（选中属性）

3.6.1.1、概念

user-select 是 CSS 中用于控制用户能否选中文本的属性。它可以防止用户在双击或拖拽时意外选中页面上的文字、图片或其他元素内容，常用于提升交互体验（比如按钮、拖拽元素、可交互界面等）。

3.6.1.2、语法与取值

/* 关键字值 */
user-select: none;      /* 禁止选中 */
user-select: auto;      /* 浏览器默认行为（允许选中） */
user-select: text;      /* 允许选中文本 */
user-select: all;       /* 单击元素或其子元素时，整个元素内容会被一次性选中 */
user-select: contain;   /* 选中范围限制在元素内部，不能扩展到外部（部分浏览器支持有限） */
user-select: element;   /* 非标准，早期 IE 专用，不建议使用 */

/* 全局值 */
user-select: inherit;
user-select: initial;
user-select: unset;

3.6.1.3、常用取值详解

值	效果
`none`	完全禁止选中。用户无法通过鼠标拖拽、双击或键盘来选择该元素内的任何文本或子元素。
`auto`	默认值。浏览器根据上下文决定是否允许选中（通常允许选中文本）。
`text`	元素内的文本可以被选中，不受任何限制。
`all`	当用户单击元素（或者鼠标点击并稍微拖动）时，整个元素的所有内容（包括子孙元素）会被一次性选中，而不是按字符逐个选中。
`contain`	限制选中范围：选中操作从元素内部开始时，不能向外扩展到元素外部；从外部进入时，也不能进入该元素内部。用于复杂的富文本编辑器等场景。

3.6.1.4、典型使用场景

3.6.1.4.1、防止按钮上的文本被意外选中

.button {
  user-select: none;
  -webkit-user-select: none; /* Safari / iOS 需要加前缀 */
}

避免用户快速双击按钮时出现蓝色选中的“尴尬”效果。

3.6.1.4.2、拖拽元素时避免文字被选中

.draggable {
  user-select: none;
  -webkit-user-select: none;
}

配合 dragstart 事件，防止拖拽时原文本出现高亮。

3.6.1.4.3、实现“一键全选”效果（如代码块）

.code-block {
  user-select: all;
}

用户只要单击代码区域，整个代码块会被全部选中，方便复制。

3.6.1.4.4、保留可选中文本，但禁止选择其他UI元素

.content p {
  user-select: text; /* 段落文字可选中 */
}
.sidebar, .toolbar {
  user-select: none; /* 侧边栏和工具栏不可选中 */
}

3.6.1.5、浏览器兼容性

桌面浏览器：Chrome, Firefox, Safari, Edge 均支持（需加私有前缀）。
移动端：iOS Safari, Android 浏览器均良好支持。
老旧浏览器：IE 10+ 支持 -ms-user-select；IE 9 及更早不支持。

现代开发中，建议同时添加带前缀的写法，确保最大兼容：

.no-select {
  -webkit-user-select: none; /* Safari / Chrome 早期 */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE / Edge 旧版 */
  user-select: none;         /* 标准语法 */
}

3.6.1.6、注意事项

user-select: none 无法禁止通过浏览器控制台或 document.execCommand('copy') 等脚本方式复制内容，它只作用于用户鼠标/键盘的直观选择行为。
对于 input、textarea 等表单元素，user-select 的效果可能不同，部分浏览器会强制允许选中输入框内的文本，即使设置了 none。
user-select: all 会导致单击一下就全选，有时会干扰正常的文本选择。如果只想让用户双击全选，可以用 JavaScript 配合 onclick / ondblclick 实现。
该属性会继承，因此设置到祖先元素上会影响所有后代。

4、CSS特性

4.1、继承性

4.1.1、基本信息

用途：子级标签默认继承父级的文字控制属性
特殊情况：如果子级携带样式，那么以子级样式为准，就不会继承父级样式了，比如H1标签的超大字号、a标签的默认蓝色

4.1.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      body {
        font-size: 30px;
        color: pink;
        font-weight: 700;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <p>你好</p>
    <div>盒子</div>
    <br>
    <!-- 如果标签自己有样式，那么就生效自己的样式，不接继承 -->
    <a href="https://www.baidu.com">百度一下</a>
    <h1>大标题</h1>
  </body>
</html>

4.1.3、页面效果

在这里插入图片描述

4.2、层叠性

4.2.1、基本信息

用途：针对同一个标签添加的属性，如果选择器的优先级相同（比如下面例子中都是div标签选择器），那么相同属性以后面设置的为准，不同的属性都生效

4.2.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        color: blue;
        font-weight: 700;
      }
      div {
        /* 相同属性会覆盖，以后面的为准 */
        color: pink;
        /* 不同属性会叠加 */
        font-family: 楷体;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div>你好</div>
  </body>
</html>

4.2.3、页面效果

在这里插入图片描述

4.3、优先级（不存在复合选择器，这种情况很少，仅做学习了解）

4.3.1、基本信息

用途：当一个标签被多种选择器时，难免存在重复的属性，可以根据优先级决定最终的属性效果
优先级顺序：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important（添加在属性值后面）

4.3.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      div {
        color: blue;
      }
      .box {
        color: pink;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div class="box">你好</div>
  </body>
</html>

4.3.3、页面效果

在这里插入图片描述

4.4、优先级—叠加计算规则（存在复合选择器）

4.4.1、基本信息

用途：当存在复合选择器时，优先级的判断就比较复杂了，无法通过之前的简单规则进行判断
判断规则：
- !important：权重最高
- 继承：权重最低
- 计算（行内样式，id选择器个数，类选择器个数，标签选择器个数），从左到右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较
- 如果通过上面规则依然比较不出来，还有一个层叠性计算规则

4.4.2、代码示例1

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 
        下面这些复合属性都可能影响到“你好”二字的呈现效果
        经分析，不存在!important、继承属性，因此执行计算个数来比较了，规则如下：
          计算（行内样式，id选择器个数，类选择器个数，标签选择器个数），
          从左到右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较.
        根据以上比较规则可知，“你好”将被设置成橙色
       */
       /* 优先级个数统计结果： (0, 0, 2, 1) */
      .c1 .c2 div {
        color: blue;
      }

      /* 优先级个数统计结果：（0，1，0, 1） */
      div #i3 {
        color: green;
      }

      /* 优先级个数统计结果：（0，1，1, 0） */
      #i1 .c3 {
        color: orange;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div id="i1" class="c1">
      <div id="i2" class="c2">
        <div id="i3" class="c3">
          你好
        </div>
      </div>
    </div>
  </body>
</html>

4.4.3、页面效果1

在这里插入图片描述

4.4.4、代码示例2

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 
        下面这些复合属性都可能影响到“你好”二字的呈现效果
         - 判断规则：
          - `!important`：权重最高
          - 继承：权重最低
          - 计算（行内样式，id选择器个数，类选择器个数，标签选择器个数），从左到右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较
          - 如果通过上面规则依然比较不出来，还有一个层叠性计算规则
        根据以上比较规则可知，“你好”将被设置成红色
       */
      div p {
        color: red;
      }

      /* p标签继承“.father”的效果，所以优先级最低 */
      .father {
        color: blue;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div class="father">
      <p class="son">
        你好
      </p>
    </div>
  </body>
</html>

4.4.5、页面效果2

在这里插入图片描述

4.4.6、代码示例3

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 
        下面这些复合属性都可能影响到“你好”二字的呈现效果
         - 判断规则：
          - `!important`：权重最高
          - 继承：权重最低
          - 计算（行内样式，id选择器个数，类选择器个数，标签选择器个数），从左到右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较
          - 如果通过上面规则依然比较不出来，还有一个层叠性计算规则
        根据以上比较规则可知，“你好”将被设置成蓝色
       */
       /* （0，2, 0，0） */
      #father #son {
        color: blue;
      }

      /* （0，1, 1, 1） */
      #father p.c2 {
        color: black;
      }

      /* （0, 0，2, 2） */
      div.c1 p.c2 {
        color: red;
      }

      /* 这个和下面那个，对于p标签来说，都是继承，所以优先级最低 */
      #father {
        color: green !important;
      }

      div#father.c1{
        color: yellow;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div id="father" class="c1">
      <p id="son" class="c2">
        你好
      </p>
    </div>
  </body>
</html>

4.4.7、页面效果3

在这里插入图片描述

4.4.8、代码示例4

<!DOCTYPE html>
<html lang="en">
  <head> <!-- 表头 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好，春天~</title>
    <style>
      /* 虽然下面两个选择器配置，对于p标签来说，都是继承，但是第1个添加!important
      所以优先级比第二个高，因此字体颜色是绿色 */
      #father {
        color: green !important;
      }

      div#father.c1{
        color: yellow;
      }
    </style>
  </head>
  <body> <!-- 主体 -->
    <div id="father" class="c1">
      <p id="son" class="c2">
        你好
      </p>
    </div>
  </body>
</html>

4.4.9、页面效果4

在这里插入图片描述

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

亚马逊云科技技术品牌专区

所有评论(0)

查看更多评论

明快de玄米61

@qq_42449963

已为社区贡献5条内容

HTML5+CSS3（黑马程序员）——第二篇

明快de玄米61

目录

二、CSS基本内容

1、CSS引入方式

1.1、行内样式

1.1.1、代码示例

1.1.2、页面效果

1.2、内部样式表

1.2.1、代码示例

1.2.2、页面展示

1.3、外部样式表

1.3.1、代码示例

1.3.2、页面展示

2、选择器

2.1、标签选择器

2.1.1、代码示例

2.1.2、页面示例

2.2、类选择器

2.2.1、代码示例

2.2.2、页面效果

2.3、id选择器

2.3.1、基本信息

2.3.2、代码示例

2.3.3、页面效果

2.5、属性选择器

2.5.1、基本信息

2.5.2、代码示例

2.5.3、页面效果

2.5、通配符选择器

2.5.1、基本信息

2.5.2、代码示例

2.5.3、页面效果

2.6、复合选择器

2.6.1、后代选择器

2.6.1.1、基本信息

2.6.1.2、代码示例

2.6.1.3、页面效果

2.6.2、子代选择器

2.6.2.1、基本信息

2.6.2.2、代码示例

2.6.2.3、页面效果

2.6.3、并集选择器

2.6.3.1、基本信息

2.6.3.2、代码示例

2.6.3.3、页面效果

2.6.4、交集选择器

2.6.4.1、基本信息

2.6.4.2、代码示例

2.6.4.3、页面效果

2.6.5、伪类选择器

2.6.5.1、基本信息

2.6.5.2、代码示例

2.6.5.3、页面效果

2.6.6、结构伪类选择器

2.6.6.1、基本信息

2.6.6.2、代码示例

2.6.6.3、页面效果

2.6.7、伪元素选择器

2.6.7.1、基本信息

2.6.7.2、代码示例

2.6.7.3、页面效果

2.6.8、紧邻兄弟选择器

2.6.8.1、基本信息

2.6.8.2、代码示例

2.6.8.3、页面效果

2.6.9、通用兄弟选择器（后续兄弟选择器）

2.6.9.1、基本信息

2.6.9.2、代码示例

2.6.9.3、页面效果

3、CSS属性

3.1、字体属性

3.1.1、大小

3.1.1.1、基本信息

3.1.1.2、代码示例

3.1.1.2、页面效果

3.1.2、粗细

3.1.2.1、基本信息

3.1.2.2、代码示例

3.1.2.3、页面效果