Day05_CSS完整博客笔记(上)

知识脉络思维导图

Day05 CSS
长度与颜色
长度单位 px em %
颜色名
RGB颜色
HEX十六进制颜色
基本选择器
标签名选择器
类名选择器
ID选择器
全局通配选择器
选择器权重
元素显示模式
block 块级元素
inline 行内元素
inline-block 行内块元素
display 属性修改模式
字体样式
font-size
font-weight
font-style
font-family
font 复合属性
复合属性规则
文本样式
letter-spacing
word-spacing
text-decoration
text-indent
text-align
vertical-align
line-height

知识点目录索引

回顾
CSS长度单位
颜色名
RGB颜色
HEX颜色
标签名选择器
类名选择器
ID选择器
全局选择器
选择器权重
元素显示模式
默认显示模式总结
修改显示模式
字体大小粗细斜体
字体族科
font复合属性
复合属性规则
字词间距
文本修饰线
首行缩进
文本水平对齐
vertical-align

1. 回顾

Day04 知识回顾
HTML
CSS
表单标签 label / fieldset / legend
iframe 内嵌框架
字符实体 < > &
全局属性 title lang id name class style
meta 元信息
在HTML中使用CSS
行内式
内嵌式
外链式
CSS语法结构
CSS层叠性
CSS注释

2. CSS 长度单位和颜色设置

2.1 CSS 中的长度单位

名词解释：

px（Pixel，像素）：屏幕上的最小显示单元，固定的绝对单位，1px 就是屏幕上的一个点。在标准显示器上，1 英寸 = 96px。

em（相对于父元素字体大小） ：是一个相对长度单位，1em 等于当前元素的 font-size 值。若父元素字体为 16px，则 1em = 16px，2em = 32px。

%（百分比）：相对于父元素对应属性的百分比值。如宽度设为 50%，则为父元素宽度的一半。
CSS长度单位
绝对单位
相对单位
px 像素
em 相对字体大小
% 百分比
rem 相对根元素字体
vh/vw 视口单位

单位对比示例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS 长度单位演示</title>
  <style>
    /* px：固定值，不受父元素影响 */
    .box-px {
        width: 200px;
        height: 60px;
        background-color: #4fa8bb;
        color: white;
        line-height: 60px;
        text-align: center;
        margin-bottom: 10px;
    }

    /* em：相对于父元素字体大小 */
    .parent {
        font-size: 20px;
        background-color: #f0f0f0;
        padding: 10px;
        margin-bottom: 10px;
    }
    .child-em {
        /* 父元素 font-size 20px，所以 10em = 200px */
        width: 10em;
        height: 2em;      /* 40px */
        background-color: #ff9966;
        padding: 0.5em;   /* 10px */
        color: white;
    }

    /* %：相对于父元素宽度 */
    .container {
        width: 400px;
        background-color: #e0e0e0;
        padding: 10px;
    }
    .child-percent {
        width: 50%;       /* 200px */
        height: 40px;
        background-color: #66bb6a;
        line-height: 40px;
        text-align: center;
        color: white;
    }
  </style>
</head>
<body>
  <div class="box-px">宽200px（固定像素）</div>

  <div class="parent">
    父元素 font-size: 20px
    <div class="child-em">宽10em = 200px，高2em = 40px</div>
  </div>

  <div class="container">
    父元素宽400px
    <div class="child-percent">宽50% = 200px</div>
  </div>
</body>
</html>

经典使用场景：

px：边框（border: 1px solid）、精确图标尺寸

em：按钮内边距（padding: 0.5em 1em），随字体缩放

%：响应式布局，流式网格，如淘宝、京东商品列表宽度

2.2 CSS 中的颜色设置方式

颜色表示方式总览

CSS颜色表示
颜色名
RGB方式
HEX十六进制
RGBA含透明度
HSL色相饱和度亮度
red orange yellow green ...
rgb(255, 0, 0)
#ff0000
rgba(255, 0, 0, 0.5)
hsl(0, 100%, 50%)

① 颜色名

名词解释：CSS 预定义颜色名

CSS 规范中预定义了 140+ 个颜色关键字，可直接用于颜色属性。方便记忆但不够精准，适合原型开发。

css 复制代码

/* 基础颜色 */
color: red;           /* 红色 */
color: orange;        /* 橙色 */
color: yellow;        /* 黄色 */
color: green;         /* 绿色 */
color: cyan;          /* 青色 */
color: blue;          /* 蓝色 */
color: purple;        /* 紫色 */

/* 扩展颜色名 */
color: pink;          /* 粉红色 */
color: deeppink;      /* 深粉红 */
color: skyblue;       /* 天蓝色 */
color: greenyellow;   /* 黄绿色 */
color: tomato;        /* 番茄红（很常用）*/
color: coral;         /* 珊瑚色 */
color: chocolate;     /* 巧克力色 */
color: gold;          /* 金色 */
color: silver;        /* 银色 */
color: white;         /* 白色 */
color: black;         /* 黑色 */
color: gray;          /* 灰色 */
color: transparent;   /* 完全透明 */

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS 颜色名演示</title>
  <style>
    .color-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
    .color-box {
        width: 100px; height: 60px;
        line-height: 60px; text-align: center;
        color: white; font-size: 13px;
        border-radius: 4px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }
  </style>
</head>
<body>
  <div class="color-grid">
    <div class="color-box" style="background:red">red</div>
    <div class="color-box" style="background:orange">orange</div>
    <div class="color-box" style="background:gold; color:#333">gold</div>
    <div class="color-box" style="background:green">green</div>
    <div class="color-box" style="background:skyblue; color:#333">skyblue</div>
    <div class="color-box" style="background:blue">blue</div>
    <div class="color-box" style="background:purple">purple</div>
    <div class="color-box" style="background:tomato">tomato</div>
    <div class="color-box" style="background:coral">coral</div>
    <div class="color-box" style="background:deeppink">deeppink</div>
    <div class="color-box" style="background:gray">gray</div>
    <div class="color-box" style="background:silver; color:#333">silver</div>
  </div>
</body>
</html>

经典使用场景： 学习阶段快速测试样式效果；也常见于简洁风格的小组件中，如 color: tomato 表示错误提示红色。

② rgb 方式表示颜色

名词解释：RGB（Red Green Blue）三原色模型

RGB 是一种加色混合模型。计算机显示器通过红（R）、绿（G）、蓝（B）三种光的叠加来产生颜色。每种颜色的强度值范围是 0~255（8位，共256级），三者组合可产生约 1670 万种颜色（256³）。
红 R: 0~255
混合
绿 G: 0~255
蓝 B: 0~255
最终颜色

css 复制代码

/* 语法：rgb(红, 绿, 蓝)  每个值 0~255 */
background: rgb(255, 0, 0);     /* 纯红色 */
background: rgb(0, 255, 0);     /* 纯绿色 */
background: rgb(0, 0, 255);     /* 纯蓝色 */
background: rgb(255, 0, 255);   /* 品红色（红+蓝）*/
background: rgb(255, 255, 0);   /* 黄色（红+绿）*/
background: rgb(0, 255, 255);   /* 青色（绿+蓝）*/

/* 灰色系：三个通道值相同 */
background: rgb(0, 0, 0);       /* 黑色 */
background: rgb(255, 255, 255); /* 白色 */
background: rgb(100, 100, 100); /* 深灰 */
background: rgb(199, 199, 199); /* 浅灰 */
/* 规律：数值越大颜色越浅，全 255 为白，全 0 为黑 */

/* 混合颜色 */
background: rgb(100, 200, 120); /* 青草绿 */
background: rgb(255, 165, 0);   /* 橙色 */

/* 也可以使用百分比 */
background: rgb(45%, 80%, 74%);
background: rgb(100%, 0%, 0%);  /* 纯红色 */

RGBA 扩展（MDN 官方） --- 加入 Alpha 透明通道，值为 0（完全透明）到 1（完全不透明）：

css 复制代码

/* rgba：第4个参数为透明度 0~1 */
background: rgba(255, 0, 0, 1);     /* 不透明红色 */
background: rgba(255, 0, 0, 0.5);   /* 半透明红色 */
background: rgba(0, 0, 0, 0.3);     /* 30% 透明度黑色蒙层 */
background: rgba(255, 255, 255, 0.8); /* 80% 透明度白色 */

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>RGB 颜色演示</title>
  <style>
    .rgb-demo { padding: 16px; }
    .row { display: flex; gap: 8px; margin-bottom: 8px; }
    .swatch {
        width: 120px; height: 50px;
        line-height: 50px; text-align: center;
        font-size: 12px; color: white;
        border-radius: 4px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    /* rgba 透明度演示 */
    .overlay-demo {
        position: relative;
        width: 300px; height: 100px;
        background: url('https://picsum.photos/300/100') center/cover;
        border-radius: 6px; overflow: hidden; margin-top: 12px;
    }
    .overlay {
        position: absolute; inset: 0;
        background: rgba(0, 0, 0, 0.5);
        color: white; font-size: 14px;
        display: flex; align-items: center; justify-content: center;
    }
  </style>
</head>
<body>
  <div class="rgb-demo">
    <div class="row">
      <div class="swatch" style="background:rgb(255,0,0)">rgb(255,0,0)<br>纯红</div>
      <div class="swatch" style="background:rgb(0,255,0);color:#333">rgb(0,255,0)<br>纯绿</div>
      <div class="swatch" style="background:rgb(0,0,255)">rgb(0,0,255)<br>纯蓝</div>
      <div class="swatch" style="background:rgb(255,255,0);color:#333">rgb(255,255,0)<br>黄</div>
    </div>
    <div class="row">
      <div class="swatch" style="background:rgb(0,0,0)">rgb(0,0,0)<br>黑</div>
      <div class="swatch" style="background:rgb(128,128,128)">rgb(128,128,128)<br>中灰</div>
      <div class="swatch" style="background:rgb(255,255,255);color:#333;border:1px solid #ddd">rgb(255,255,255)<br>白</div>
      <div class="swatch" style="background:rgb(100,200,120);color:#333">rgb(100,200,120)<br>青草绿</div>
    </div>

    <!-- rgba 遮罩效果 -->
    <p style="margin-top:12px;font-size:14px;color:#666">rgba 半透明遮罩效果：</p>
    <div style="display:flex;gap:10px;margin-top:6px;">
      <div style="width:80px;height:80px;background:rgba(255,0,0,0.2);border:1px solid #ccc;line-height:80px;text-align:center;font-size:12px">opacity 0.2</div>
      <div style="width:80px;height:80px;background:rgba(255,0,0,0.5);border:1px solid #ccc;line-height:80px;text-align:center;font-size:12px;color:white">opacity 0.5</div>
      <div style="width:80px;height:80px;background:rgba(255,0,0,1);border:1px solid #ccc;line-height:80px;text-align:center;font-size:12px;color:white">opacity 1</div>
    </div>
  </div>
</body>
</html>

经典使用场景：

rgba(0, 0, 0, 0.5) --- 弹出层遮罩背景（淘宝、京东商品详情页弹窗）

rgba(255, 255, 255, 0.2) --- 毛玻璃效果（iOS 风格卡片）

rgb(255, 99, 71) --- tomato，常用错误/警告提示颜色

③ hex 十六进制方式表示颜色

名词解释：HEX（Hexadecimal，十六进制）

十六进制是一种以 16 为基数的计数系统，使用 0-9 和 a-f 共 16 个符号。两位十六进制数可表示 0~255，对应 RGB 的一个通道，因此 #rrggbb 六位表示一个完整颜色。
转换
十进制 0-255
十六进制 00-ff
#RRGGBB格式
颜色值

进制对比表：

十进制	十六进制	说明
0	00	最小值（该通道无光）
128	80	中间值
255	ff	最大值（该通道全亮）

css 复制代码

/* 六位十六进制：#RRGGBB */
background: #ff0000;   /* 纯红色（rgb 255,0,0）*/
background: #00ff00;   /* 纯绿色 */
background: #0000ff;   /* 纯蓝色 */
background: #ffffff;   /* 白色 */
background: #000000;   /* 黑色 */
background: #4fa8bb;   /* 自定义颜色 */
background: #ababab;   /* 浅灰色 */
background: #131313;   /* 近黑色 */

/* 三位简写：当每组两位相同时可简写 */
background: #fff;      /* 等同于 #ffffff（白色）*/
background: #000;      /* 等同于 #000000（黑色）*/
background: #f00;      /* 等同于 #ff0000（红色）*/
background: #bbb;      /* 等同于 #bbbbbb（浅灰）*/
background: #a8c;      /* 等同于 #aa88cc */

/* 不可简写的情况 */
background: #ab2233;   /* 两位不同，不可简写 */
background: #1a2b3c;   /* 两位不同，不可简写 */

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HEX 颜色演示</title>
  <style>
    .hex-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
    .hex-box {
        width: 110px; height: 56px;
        line-height: 56px; text-align: center;
        font-size: 13px; border-radius: 4px;
        font-family: monospace;
    }
    /* 知名品牌色 */
    .brand-section { padding: 16px; }
    .brand-row { display: flex; gap: 10px; margin-top: 8px; }
    .brand-chip {
        padding: 8px 16px;
        border-radius: 20px;
        color: white;
        font-size: 13px;
        font-weight: 500;
    }
  </style>
</head>
<body>
  <!-- 六位 HEX 示例 -->
  <div class="hex-grid">
    <div class="hex-box" style="background:#ff0000;color:white">#ff0000</div>
    <div class="hex-box" style="background:#00ff00;color:#333">#00ff00</div>
    <div class="hex-box" style="background:#0000ff;color:white">#0000ff</div>
    <div class="hex-box" style="background:#ffffff;color:#333;border:1px solid #ddd">#ffffff</div>
    <div class="hex-box" style="background:#000000;color:white">#000000</div>
    <div class="hex-box" style="background:#4fa8bb;color:white">#4fa8bb</div>
    <div class="hex-box" style="background:#ababab;color:white">#ababab</div>
    <div class="hex-box" style="background:#131313;color:white">#131313</div>
  </div>

  <!-- 三位简写示例 -->
  <div class="hex-grid">
    <div class="hex-box" style="background:#f00;color:white">#f00 = #ff0000</div>
    <div class="hex-box" style="background:#0f0;color:#333">#0f0 = #00ff00</div>
    <div class="hex-box" style="background:#00f;color:white">#00f = #0000ff</div>
    <div class="hex-box" style="background:#bbb;color:white">#bbb = #bbbbbb</div>
  </div>

  <!-- 知名品牌色 -->
  <div class="brand-section">
    <p style="font-size:14px;color:#666;margin-bottom:8px">知名品牌色：</p>
    <div class="brand-row">
      <span class="brand-chip" style="background:#07c160">微信绿 #07c160</span>
      <span class="brand-chip" style="background:#1677ff">支付宝蓝 #1677ff</span>
      <span class="brand-chip" style="background:#ff4400">淘宝橙 #ff4400</span>
      <span class="brand-chip" style="background:#e62222">京东红 #e62222</span>
    </div>
  </div>
</body>
</html>

HEX vs RGB 选择建议：

设计师给的色值通常是 HEX，直接复制使用

需要透明度时用 RGBA

HEX 更简洁，RGB 更直观
经典使用场景：

品牌色：微信绿 #07c160、支付宝蓝 #1677ff、淘宝橙 #ff4400

文字色：常用 #333333（深灰正文）、#666666（次要文字）、#999999（辅助文字）

3. CSS 基本选择器

名词解释：CSS 选择器（Selector）

CSS 选择器是 CSS 规则的第一部分，用于"选中"需要应用样式的 HTML 元素。MDN 定义：CSS 选择器规定了 CSS 规则会被应用到哪些元素上。

选择器类型总览

CSS 选择器
基本选择器
组合选择器
伪类选择器
伪元素选择器
标签名选择器 div {}
.类名选择器 .box {}
#ID选择器 #main {}
*通配选择器 * {}
后代 div p {}
子代 ul > li {}
相邻 h2 + p {}
:hover :active :focus
::before ::after

3.1 四种基本选择器

① 标签名（元素名）选择器

名词解释：标签名选择器（Type Selector / Element Selector）

通过 HTML 元素的标签名来选择对应的所有元素。语法为直接写标签名。会影响页面中所有该标签的元素，适合设置全局基础样式。

css 复制代码

/* 语法：标签名 {} */

/* 设置所有 p 标签的样式 */
p {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

/* 设置所有标题 h1 */
h1 {
    color: #1a1a1a;
    font-size: 32px;
}

/* 设置所有超链接 */
a {
    color: #1677ff;
    text-decoration: none;  /* 去掉下划线 */
}

/* 设置所有图片 */
img {
    max-width: 100%;  /* 响应式图片 */
    height: auto;
}

/* 设置所有无序列表 */
ul {
    list-style: none;  /* 去掉列表默认圆点 */
    padding: 0;
    margin: 0;
}

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标签名选择器演示</title>
  <style>
    /* 标签名选择器：统一设置全局基础样式 */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body { font-family: "Microsoft YaHei", sans-serif; padding: 20px; background: #f5f5f5; }

    h1 { color: #1a1a1a; font-size: 24px; margin-bottom: 10px; }
    h2 { color: #333; font-size: 18px; margin-bottom: 8px; }

    p {
        color: #555;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 10px;
    }

    a {
        color: #1677ff;
        text-decoration: none;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
  </style>
</head>
<body>
  <h1>标签名选择器示例</h1>
  <h2>这是 h2 标题</h2>
  <p>这是一段正文内容，所有 p 标签统一用标签名选择器设置了颜色和行高。</p>
  <p>再写一段，样式完全一致，无需重复添加 class。</p>
  <a href="#">这是一个超链接，已去掉默认下划线</a>
  <ul>
    <li>列表项一（去掉了默认圆点）</li>
    <li>列表项二</li>
  </ul>
</body>
</html>

经典使用场景：

各大网站的 CSS Reset/Normalize，如 * { box-sizing: border-box; }

淘宝、京东首页全局设置 body { font-family: ... }

② 类名选择器

名词解释：类选择器（Class Selector）

通过元素的 class 属性来选择元素，以 . 开头。同一个 class 可以用于多个元素（可复用），一个元素也可以有多个 class（空格分隔）。这是实际开发中最常用的选择器。

css 复制代码

/* 语法：.类名 {} */
.container {
    width: 1200px;
    margin: 0 auto;   /* 水平居中 */
}

.btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary {
    background-color: #1677ff;
    color: white;
    border: none;
}

.btn-danger {
    background-color: #ff4d4f;
    color: white;
    border: none;
}

.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

html 复制代码

<!-- HTML 中使用：多个元素共用同一个类 -->
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-danger">危险按钮</button>

<!-- 一个元素设置多个类名 -->
<div class="container text-center">内容区域</div>

<!-- 电商网站常见写法 -->
<li class="goods-item active">商品1</li>
<li class="goods-item">商品2</li>

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>类名选择器演示</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; padding: 20px; }

    /* 基础按钮样式（可复用）*/
    .btn {
        display: inline-block;
        padding: 8px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        border: none;
        margin-right: 8px;
        text-decoration: none;
        line-height: 1;
    }
    /* 颜色变体（组合使用）*/
    .btn-primary { background-color: #1677ff; color: white; }
    .btn-success { background-color: #52c41a; color: white; }
    .btn-danger  { background-color: #ff4d4f; color: white; }
    .btn-default { background-color: #fff; color: #333; border: 1px solid #d9d9d9; }

    /* 尺寸变体 */
    .btn-lg { padding: 12px 28px; font-size: 16px; }
    .btn-sm { padding: 4px 12px; font-size: 12px; }

    /* 文章卡片 */
    .card {
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        padding: 16px;
        margin-top: 20px;
        max-width: 400px;
    }
    .card-title { font-size: 18px; font-weight: bold; color: #1a1a1a; margin-bottom: 8px; }
    .card-desc  { font-size: 14px; color: #666; line-height: 1.6; }
    .card-tag {
        display: inline-block;
        background-color: #e8f4fd;
        color: #1677ff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 10px;
        margin-top: 10px;
        margin-right: 4px;
    }

    /* 商品列表 */
    .goods-item { padding: 8px; border-bottom: 1px solid #f0f0f0; color: #333; }
    .goods-item.active { color: #ff4400; font-weight: bold; }  /* active 叠加 */
  </style>
</head>
<body>
  <!-- 多个元素共用 btn，再用 btn-xxx 区分颜色 -->
  <button class="btn btn-primary">主要按钮</button>
  <button class="btn btn-success">成功按钮</button>
  <button class="btn btn-danger">危险按钮</button>
  <button class="btn btn-default">默认按钮</button>

  <br><br>
  <!-- 同一个 btn 叠加不同尺寸 -->
  <button class="btn btn-primary btn-lg">大按钮</button>
  <button class="btn btn-primary">默认</button>
  <button class="btn btn-primary btn-sm">小按钮</button>

  <!-- 文章卡片 -->
  <div class="card">
    <div class="card-title">CSS 选择器详解</div>
    <div class="card-desc">CSS 选择器是样式表中最核心的部分，通过选择器可以精准地指定样式作用范围。</div>
    <span class="card-tag">CSS</span>
    <span class="card-tag">前端</span>
    <span class="card-tag">入门</span>
  </div>

  <!-- 商品列表：active 类叠加 -->
  <ul style="margin-top:20px;list-style:none;padding:0;max-width:200px;">
    <li class="goods-item active">苹果（当前选中）</li>
    <li class="goods-item">香蕉</li>
    <li class="goods-item">橙子</li>
  </ul>
</body>
</html>

类名选择器的两个关键特性：

多个元素可以共用同一个类名 → 实现样式复用（如 Bootstrap 的 .btn）

一个元素可以设置多个类名 → 实现样式组合（如 .btn .btn-primary）
经典使用场景：

组件库（Element UI、Ant Design）全部基于类名选择器

Bootstrap 响应式栅格 .col-md-6 .col-lg-4

BEM 命名规范：.block__element--modifier

③ ID 选择器

名词解释：ID 选择器（ID Selector）

通过元素的 id 属性来选择唯一元素，以 # 开头。一个页面中每个 ID 值必须唯一（就像身份证号），主要用于页面中唯一的结构性区域。

css 复制代码

/* 语法：#ID名 {} */

#header {
    width: 100%;
    height: 80px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
}

#main-content {
    max-width: 1200px;
    margin: 100px auto 0;
    padding: 0 20px;
}

#footer {
    background-color: #2d2d2d;
    color: #aaa;
    text-align: center;
    padding: 40px 0;
}

#logo {
    font-size: 24px;
    font-weight: bold;
    color: #1677ff;
}

html 复制代码

<header id="header">
    <div id="logo">MyBrand</div>
</header>
<main id="main-content">
    <p>页面主要内容</p>
</main>
<footer id="footer">
    <p>Copyright © 2024</p>
</footer>

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ID 选择器演示</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: "Microsoft YaHei", sans-serif; min-height: 100vh; background: #f5f7fa; }

    /* 每个 ID 在页面中唯一 */
    #header {
        width: 100%;
        height: 60px;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        padding: 0 24px;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    #logo {
        font-size: 20px;
        font-weight: bold;
        color: #1677ff;
        letter-spacing: 1px;
    }

    #main-content {
        max-width: 800px;
        margin: 40px auto;
        padding: 0 20px;
    }

    #sidebar {
        width: 200px;
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    #footer {
        background-color: #2d2d2d;
        color: #aaa;
        text-align: center;
        padding: 30px 0;
        font-size: 13px;
        margin-top: 60px;
    }
  </style>
</head>
<body>
  <header id="header">
    <span id="logo">MyBrand</span>
  </header>

  <main id="main-content">
    <h1 style="margin-bottom:12px">页面主标题</h1>
    <p style="color:#666;line-height:1.7">
      ID 选择器适合页面中唯一的结构区域。头部、主内容区、侧边栏、页脚这些
      在一个页面里只出现一次的区域，非常适合用 ID 来标识和样式化。
    </p>

    <div id="sidebar" style="margin-top:24px">
      <p style="font-weight:bold;margin-bottom:8px">侧边栏</p>
      <p style="font-size:13px;color:#888">只出现一次，用 #sidebar</p>
    </div>
  </main>

  <footer id="footer">
    <p>Copyright © 2024 MyBrand. All rights reserved.</p>
  </footer>
</body>
</html>

ID vs Class 选择器：

特性	ID 选择器	Class 选择器
唯一性	页面中必须唯一	可重复使用
复用性	不可复用	可多个元素共用
权重	高（100分）	中（10分）
适用场景	页面唯一区域（头部、导航）	组件、模块样式

④ 全局（通配）选择器

名词解释：通配选择器（Universal Selector）

使用 * 号，能匹配页面中所有HTML元素，不区分标签类型。性能最差（需遍历所有元素），通常只用于 CSS 重置（Reset）场景。

css 复制代码

/* 语法：* {} */

/* 最经典用法：CSS Reset */
* {
    margin: 0;
    padding: 0;
}

/* 现代用法：统一盒模型 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 调试用：临时给所有元素加边框，查看布局 */
* {
    outline: 1px solid red;
}

经典使用场景：

CSS Reset 消除浏览器默认的 margin 和 padding 差异（各大网站必用）

box-sizing: border-box 设置成更直觉的盒模型计算方式

3.2 基本选择器之间的权重

名词解释：CSS 权重（Specificity，特异性/优先级）

当多个选择器作用于同一个元素时，CSS 通过权重（特异性）来决定哪条规则生效。权重高的样式会覆盖权重低的样式。
1000分
100分
10分
1分
0分
行内式 style=''
最高优先级
#ID 选择器
高优先级
.class 类选择器
中优先级
标签名选择器
低优先级
* 通配选择器
最低优先级

优先级从高到低：

复制代码

!important > 行内式(1000) > ID选择器(100) > 类选择器(10) > 标签名选择器(1) > 通配选择器(0)

css 复制代码

/* 权重计算示例 */

/* 权重 = 1（标签名）*/
p { color: black; }

/* 权重 = 10（类选择器）*/
.text { color: blue; }

/* 权重 = 100（ID选择器）*/
#main-text { color: red; }

/* 权重 = 11（标签名1 + 类10）*/
p.text { color: green; }

/* 权重 = 101（标签名1 + ID100）*/
p#main-text { color: purple; }

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>选择器权重演示</title>
  <style>
    /* 权重 = 1（标签名）*/
    p { color: black; }

    /* 权重 = 10（类选择器）*/
    .text { color: blue; }

    /* 权重 = 100（ID选择器）*/
    #main-text { color: red; }

    /* 权重 = 11（标签名1 + 类10）比单独类高 */
    p.special { color: green; }

    /* 辅助样式 */
    .demo-box { padding: 10px 16px; margin: 6px 0; border-radius: 4px; background: #f9f9f9; }
    .label { font-size: 12px; color: #999; margin-left: 8px; }
  </style>
</head>
<body>
  <!-- 只有标签名选择器 p，权重=1，黑色 -->
  <p class="demo-box">只有标签名选择器 → 黑色（权重=1）<span class="label">p{}</span></p>

  <!-- 类选择器权重=10，覆盖标签名，蓝色 -->
  <p class="text demo-box">类选择器 .text → 蓝色（权重=10）<span class="label">.text{}</span></p>

  <!-- ID选择器权重=100，覆盖类，红色 -->
  <p id="main-text" class="text demo-box">ID选择器 #main-text → 红色（权重=100）<span class="label">#main-text{}</span></p>

  <!-- 行内式权重最高=1000，orange，覆盖ID -->
  <p id="main-text" class="text" style="color:orange" class="demo-box">
    行内式 style="color:orange" → 橙色（权重=1000）
  </p>
</body>
</html>

权重冲突解决规则：

权重高的样式覆盖权重低的

权重相同时，后写的覆盖先写的（CSS 层叠性）

!important 优先级最高（慎用）

css 复制代码

/* !important 示例（不推荐频繁使用）*/
p {
    color: black !important;  /* 强制优先 */
}

4. 盒子模型（显示模式）

名词解释：元素显示模式（Display Mode）

HTML 元素根据其在页面中的排列方式，分为三种基本显示模式：块级（block）、行内（inline）、行内块（inline-block）。这是理解 CSS 布局的核心基础。

4.1 三种显示模式对比

HTML元素显示模式
block 块级
inline 行内
inline-block 行内块
独占一行
可设宽高
宽度默认100%
不独占一行
不可设宽高
宽高由内容撑开
不独占一行
可设宽高
兼具行内和块级特性

① 块级元素 block

名词解释：块级元素（Block-level Element）

块级元素在页面中像"块"一样存在，默认宽度充满父容器，前后会有换行，可以设置宽度和高度。

css 复制代码

/* 块级元素特点演示 */
div {
    width: 300px;           /* ✅ 可以设置宽度 */
    height: 100px;          /* ✅ 可以设置高度 */
    background-color: #e8f4fd;
    margin: 10px 0;         /* ✅ 上下 margin 生效 */
    padding: 20px;          /* ✅ padding 生效 */
}

p {
    width: 80%;
    background-color: #fff3e0;
}

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>块级元素演示</title>
  <style>
    /* 块级元素：独占一行，可设宽高 */
    div {
        width: 300px;
        height: 60px;
        background-color: #bde0fe;
        line-height: 60px;
        text-align: center;
        margin-bottom: 8px;
        border: 2px solid #74b9ff;
        border-radius: 4px;
    }
    p {
        width: 80%;
        background-color: #d4edda;
        padding: 10px;
        margin-bottom: 8px;
        border-left: 4px solid #52c41a;
    }
    h2 {
        background-color: #fff3cd;
        padding: 8px 12px;
        margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <!-- 以下每个元素都独占一行 -->
  <h2>h2 标题：独占一行（块级）</h2>
  <div>div：可设宽300px，高60px</div>
  <div>第二个div：自动另起一行</div>
  <p>p 标签：宽度80%，与父元素相关，同样独占一行</p>
</body>
</html>

默认为块级的元素：

排版标签：h1~h6、p、pre、hr、div
列表标签：ul、ol、li、dl、dt、dd
表单标签：form、option

② 行内元素 inline

名词解释：行内元素（Inline Element）

行内元素只占据内容本身的宽度，不会独占一行，多个行内元素并排显示。无法通过 CSS 设置宽度和高度，其尺寸由内容决定。

css 复制代码

/* 行内元素特点演示 */
span {
    color: #ff4400;
    /* width: 100px;   ❌ 无效，行内元素不可设宽 */
    /* height: 50px;   ❌ 无效，行内元素不可设高 */
    /* margin-top: 10px;  ❌ 上下margin无效 */
    margin-left: 5px;    /* ✅ 左右margin有效 */
    padding: 0 5px;      /* ✅ 左右padding有效 */
}

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>行内元素演示</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; padding: 20px; line-height: 2; }
    span  { background-color: #fff3cd; padding: 0 4px; }
    strong { background-color: #ffd6d6; padding: 0 4px; }
    em    { background-color: #d4edda; padding: 0 4px; }
    a     { color: #1677ff; text-decoration: none; background-color: #e8f4fd; padding: 0 4px; }

    /* 尝试给行内元素设置宽高（无效）*/
    .try-width {
        width: 200px;   /* ❌ 无效 */
        height: 50px;   /* ❌ 无效 */
        background-color: #ff9966;
        padding: 0 6px;
    }
  </style>
</head>
<body>
  <p>
    这是一段正文，其中有
    <span>span 高亮文字</span>，
    还有<strong>strong 加粗强调</strong>，
    以及<em>em 斜体文字</em>，
    和一个<a href="#">超链接</a>，
    它们都在同一行内并排显示，不会独占一行。
  </p>

  <p>
    尝试给行内 span 设置 width/height：
    <span class="try-width">我是 span，width/height 无效</span>
    ← 宽高并没有改变，大小由内容决定。
  </p>

  <!-- 上标和下标也是行内元素 -->
  <p>化学式：H<sub>2</sub>O，数学：x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>
</body>
</html>

默认为行内的元素：

文本标签：em、strong、del、ins、sub、sup、span
超链接标签：a
表单标签：label

③ 行内块元素 inline-block

名词解释：行内块元素（Inline-block Element）

行内块元素融合了行内和块级的特性：像行内元素一样不独占一行，但像块级元素一样可以设置宽度和高度。

css 复制代码

/* 行内块元素特点演示 */
img {
    width: 200px;       /* ✅ 可以设置宽度 */
    height: 150px;      /* ✅ 可以设置高度 */
    /* 不独占一行，多个img可以并排 */
    vertical-align: middle;
}

input {
    width: 300px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}

button {
    width: 120px;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>行内块元素演示</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; padding: 20px; }

    /* img：行内块，可设宽高，与文字同行 */
    img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        vertical-align: middle;
        object-fit: cover;
    }

    /* input：行内块，可设宽高 */
    input {
        width: 240px;
        height: 38px;
        padding: 0 12px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        font-size: 14px;
        vertical-align: middle;
    }

    /* button：行内块，可设宽高 */
    button {
        width: 88px;
        height: 38px;
        background-color: #1677ff;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        vertical-align: middle;
        margin-left: 8px;
    }

    .demo-section {
        margin-bottom: 20px;
        padding: 14px;
        background: #f9f9f9;
        border-radius: 6px;
    }
    .section-title { font-size: 13px; color: #999; margin-bottom: 10px; }
  </style>
</head>
<body>
  <!-- img 与文字同行，且可设宽高 -->
  <div class="demo-section">
    <div class="section-title">img（行内块）：与文字在同一行，可设宽高</div>
    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=1" alt="头像">
    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=2" alt="头像">
    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=3" alt="头像">
    <span style="margin-left:8px;color:#666">← 三张图片并排，不独占一行</span>
  </div>

  <!-- input + button 同行 -->
  <div class="demo-section">
    <div class="section-title">input + button（行内块）：在同一行，且可设尺寸</div>
    <input type="text" placeholder="请输入搜索内容...">
    <button>搜 索</button>
  </div>

  <!-- 三个 button 并排（行内块特性）-->
  <div class="demo-section">
    <div class="section-title">多个 button 并排（行内块，不独占一行）</div>
    <button style="background:#52c41a">确 认</button>
    <button style="background:#ff4d4f">删 除</button>
    <button style="background:#faad14">警 告</button>
  </div>
</body>
</html>

默认为行内块的元素：

图片标签：img
表单标签：input、button、textarea、select
框架标签：iframe