【CSS】基础一篇过

- 一，导入CSS的三种方式
- - [1. 行内样式 (Inline Styles)](#1. 行内样式 (Inline Styles))
  - [2. 内部样式表 (Internal Style Sheets)](#2. 内部样式表 (Internal Style Sheets))
  - [3. 外部样式表 (External Style Sheets) ------ **推荐做法**](#3. 外部样式表 (External Style Sheets) —— 推荐做法)
  - 三种方式的"权力"对比
- 二，选择器
- - [1. 元素选择器 (Element Selector)](#1. 元素选择器 (Element Selector))
  - [2. 类选择器 (Class Selector)](#2. 类选择器 (Class Selector))
  - [3. ID 选择器 (ID Selector)](#3. ID 选择器 (ID Selector))
  - [4. 通用选择器 (Universal Selector)](#4. 通用选择器 (Universal Selector))
  - [5. 子元素选择器 (Child Selector)](#5. 子元素选择器 (Child Selector))
  - [6. 后代选择器/包含选择器 (Descendant Selector)](#6. 后代选择器/包含选择器 (Descendant Selector))
  - [7. 并集选择器与兄弟选择器 (Grouping & Sibling Selectors)](#7. 并集选择器与兄弟选择器 (Grouping & Sibling Selectors))
  - [8. 伪类选择器 (Pseudo-classes)](#8. 伪类选择器 (Pseudo-classes))
- 三，属性
- - 1.有关常用属性
  - 2.有关复合属性
  - - [1. `font` 字体复合属性](#1. font 字体复合属性)
    - [2. `background` 背景复合属性](#2. background 背景复合属性)
    - [3. `border` 边框复合属性](#3. border 边框复合属性)
    - [4. `padding` / `margin` 内外边距属性](#4. padding / margin 内外边距属性)
    - [5. `transition` 过渡复合属性](#5. transition 过渡复合属性)
    - [6. `animation` 动画复合属性](#6. animation 动画复合属性)
  - 3.有关盒模型
  - 4.有关浮动
  - - [1. 浮动的三大核心特性](#1. 浮动的三大核心特性)
    - [2. 高度塌陷](#2. 高度塌陷)
    - [3. 清除浮动（治理后遗症）](#3. 清除浮动（治理后遗症）)
    - [4. 代码实现参考](#4. 代码实现参考)
  - [5. 有关定位 (Position)](#5. 有关定位 (Position))
  - - [1. 定位的组成](#1. 定位的组成)
    - [2. 四种常用的定位模式](#2. 四种常用的定位模式)
    - [3. 核心口诀：子绝父相](#3. 核心口诀：子绝父相)
    - [4. 完整代码演练：定位布局示例](#4. 完整代码演练：定位布局示例)
    - [5. 定位总结](#5. 定位总结)

简单来说，如果把网页比作一栋房子，html就是骨架，css就是装修的那层东西。

CSS （Cascading Style Sheets，层叠样式表）是一种用来表现 HTML 文件样式的计算机语言。它的核心任务就是：告诉浏览器，HTML 里的那些元素应该"长什么样"以及"摆在什么位置"。

一，导入CSS的三种方式

学习 CSS 的第一步就是学会如何把样式表"喂"给 HTML。通常我们有三种主流方式：行内样式 、内部样式表 和外部样式表。

1. 行内样式 (Inline Styles)

直接在 HTML 标签的 style 属性里写 CSS 代码。这种方式最直接，但通常只用于临时调试或处理极个别特殊样式。

语法： <标签名 style="属性: 值;">
优点： 优先级最高，修改非常快。
缺点： 无法复用样式，代码臃肿，后期维护简直是噩梦。

html 复制代码

<p style="color: red; font-size: 20px;">这是一段红色的文字。</p>

2. 内部样式表 (Internal Style Sheets)

在 HTML 文档的 <head> 部分，使用 <style> 标签包裹 CSS 代码。

语法： 放在 <head> 区域内。
优点： 适合单个页面的独特设计，不需要额外加载文件。
缺点： 样式不能跨页面共用，如果一个网站有 10 个页面，你就得复制粘贴 10 次。

html 复制代码

<head>
    <style>
        body { background-color: #f0f0f0; }
        h1 { color: blue; }
    </style>
</head>

3. 外部样式表 (External Style Sheets) ------ 推荐做法

这是最专业、最常用的方式。将所有 CSS 代码写在一个独立的 .css 文件中，然后在 HTML 中通过 <link> 标签引用它。

语法： <link rel="stylesheet" href="style.css">

rel表示"当前文档与链接资源的关系"，stylesheet 说明链接的文件是一个样式表（CSS 文件）。

href 表示"链接资源的地址"，这里指向同目录下的 style.css 文件。
优点：
结构与表现分离： HTML 只负责结构，CSS 负责样子。
易于维护： 修改一个文件，全站样式跟着变。
性能好： 浏览器会缓存这个 CSS 文件，提高加载速度。

html 复制代码

<!-- HTML 文件 index.html -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* CSS 文件 styles.css */
p {
    line-height: 1.5;
    color: #333;
}

注：CSS的注释和HTML的并不一样，向上面那样写。而且不适用于行内属性。

三种方式的"权力"对比

如果一个元素同时被这三种方式"指手画脚"，该听谁的？

导入方式	优先级 (权重)	适用场景
行内样式	最高	临时调试、极个别动态修改
内部样式表	中	单一的特殊活动页
外部样式表	普通 (由加载顺序决定)	正式项目、多页面网站

还有一个 @import 指令也可以导入 CSS，但它会导致加载速度变慢（页面渲染时才会去下载），现在基本已经被 <link> 取代了，初学者可以先不用管它。

二，选择器

1. 元素选择器 (Element Selector)

直接用 HTML 标签名来选中所有的同类标签。

示例场景： 让文章里所有的段落文字都变成灰色。

html 复制代码

<p>这是第一段。</p>
<div><p>这是在 div 里的第二段。</p></div>

<style>
  p { 
    color: grey; 
  }
</style>

结果：上面两个 <p> 标签里的文字都会变成灰色。

2. 类选择器 (Class Selector)

用一个自定义的名字（class）来选中元素，前面加一个点 .。这是最常用的方式，因为可以随意复用。

示例场景： 给特定的几句话加上高亮背景。

html 复制代码

<p class="highlight">这句话很重要。</p>
<p>这句话很普通。</p>
<span class="highlight">这个词也很重要。</span>

<style>
  .highlight { 
    background-color: yellow; 
  }
</style>

结果：第一段和最后那个 span 的背景会变黄。

3. ID 选择器 (ID Selector)

针对页面里唯一的一个元素，前面加井号 #。就像身份证一样，不能重复。

示例场景： 设置网页唯一的顶部导航栏的宽度。

html 复制代码

<nav id="main-nav">我是导航栏</nav>
<div>我是普通内容</div>

<style>
  #main-nav { 
    font-weight: bold;
    font-size: 20px; 
  }
</style>

结果：只有 <nav> 的字体会变大变粗。

4. 通用选择器 (Universal Selector)

用星号 * 表示，选中页面里的所有标签。通常用来做初始化，去掉浏览器默认的间距。

示例场景： 清除所有元素的内外边距。

html 复制代码

<h1>标题</h1>
<p>段落</p>

<style>
  * { 
    margin: 0; 
    padding: 0; 
  }
</style>

结果：页面上所有的元素（包括 h1 和 p）的内外边距全都被清零。

5. 子元素选择器 (Child Selector)

用大于号 > 表示，只选中某个元素的直接子元素（亲儿子），不包含孙子辈。

示例场景： 只给外层列表项加边框，不影响嵌套在里面的子列表。

html 复制代码

<ul class="parent-list">
  <li>我是亲儿子 1</li>
  <li>我是亲儿子 2
      <ul>
          <li>我是孙子，选不到我</li>
      </ul>
  </li>
</ul>

<style>
  .parent-list > li { 
    border: 1px solid black; 
  }
</style>

结果：只有"亲儿子 1"和"亲儿子 2"这两个 li 会有边框。

6. 后代选择器/包含选择器 (Descendant Selector)

用空格表示，选中某个元素里面的所有后代，不管是儿子、孙子还是重孙子，只要在它肚子里就算。

示例场景： 把某个特定的 div 区域里所有的段落都变成蓝色。

html 复制代码

<div class="article-box">
  <p>我是儿子，变蓝。</p>
  <section>
      <p>我是孙子，也变蓝。</p>
  </section>
</div>
<p>我在外面，不变。</p>

<style>
  .article-box p { 
    color: blue; 
  }
</style>

结果：前两个 <p> 都会变蓝，最后一个不变。

7. 并集选择器与兄弟选择器 (Grouping & Sibling Selectors)

A. 并集选择器： 用逗号 , 隔开，大家共享同一套样式。

html 复制代码

<h1>大标题</h1>
<h2>小标题</h2>
<style>
  /* h1 和 h2 都变成红色 */
  h1, h2 { color: red; }
</style>

B. 相邻兄弟选择器： 用加号 + 表示，选中紧跟在后面的那一个兄弟。

html 复制代码

<h2>标题</h2>
<p>紧挨着标题的段落（被选中）</p>
<p>第二个段落（不被选中）</p>
<style>
  h2 + p { color: green; }
</style>

8. 伪类选择器 (Pseudo-classes)

用冒号 : 表示，它是用来选中元素的特定状态。

示例场景： 鼠标放上去时，按钮变色。

html 复制代码

<button class="my-btn">点我</button>

<style>
  .my-btn { 
    background-color: blue; 
    color: white;
  }
  /* 鼠标悬停时的状态 */
  .my-btn:hover { 
    background-color: darkblue; 
  }
</style>

结果：平时是蓝色，当你把鼠标光标移动到按钮上时，它会变成深蓝色。

三，属性

1.有关常用属性

类别	属性名 (Property)	作用说明	常用取值示例
字体相关	`font-size`	字体大小	`16px`, `1.2rem`, `125%`
	`font-weight`	字体粗细	`bold`, `normal`, `700`, `bolder`
	`font-family`	字体系列	`"Microsoft YaHei"`, `serif`, `Arial`
	`font`	复合属性	`bold 20px/1.5 "楷体"` (粗细大小/行高字体)
文本修饰	`color`	字体颜色	`#ff0000`, `rgb(0,0,0)`, `blue`
	`text-align`	文本水平对齐	`left`, `center`, `right`, `justify`
	`line-height`	行高（行间距）	`1.5` (倍数), `30px`, `200%`
	`text-decoration`	文本修饰线	`none` (去下划线), `underline`, `line-through`
	`text-indent`	首行缩进	`2em`, `32px`
盒模型	`width` / `height`	宽度 / 高度	`200px`, `50%`, `100vw`, `auto`
	`padding`	内边距	`10px`, `5px 10px 15px 20px` (顺时针)
	`margin`	外边距	`0 auto` (居中), `20px`
	`border`	边框复合属性	`1px solid red` (粗细类型颜色)
	`box-sizing`	盒子尺寸计算模式	`border-box` (推荐), `content-box`
显示布局	`display`	元素显示模式	`block`, `inline`, `inline-block`, `flex`, `none`
	`overflow`	内容溢出处理	`hidden`, `scroll`, `auto`, `visible`
	`visibility`	显隐（保留占位）	`visible`, `hidden`
背景属性	`background-color`	背景颜色	`#f5f5f5`, `transparent`
	`background-image`	背景图片	`url('image.jpg')`
	`background-size`	背景缩放	`cover`, `contain`, `100% 100%`
	`background-repeat`	背景平铺方式	`no-repeat`, `repeat-x`, `repeat-y`
定位属性	`position`	定位模式	`static`, `relative`, `absolute`, `fixed`
	`top / bottom`	垂直偏移量	`10px`, `50%`, `0`
	`left / right`	水平偏移量	`10px`, `50%`, `0`
	`z-index`	层叠顺序	`1`, `999`, `-1` (数字越大越靠前)
外观美化	`border-radius`	圆角	`8px`, `50%` (画圆)
	`box-shadow`	盒子阴影	`2px 2px 10px rgba(0,0,0,0.1)`
	`opacity`	透明度	`0` (完全透明) 到 `1` (不透明)
	`cursor`	鼠标指针样式	`pointer` (小手), `default`, `move`, `text`

关于这部分内容，用的时候回来看就行。

2.有关复合属性

有一些属性后面可以直接设置很多参数，接下来讲解常用的复合属性。

1. `font` 字体复合属性

这是最讲究顺序的属性，主要用于一次性定义文本样式。

语法顺序 ：font: style weight size/line-height family;
子属性含义：
font-style (字体样式：如 italic 斜体、normal 常规)
font-weight (字体粗细：如 bold 加粗、400 常规)
font-size (字体大小：如 16px、1.2rem)
line-height (行高：文字占据的高度，用于控制行间距)
font-family (字体家族：如 "微软雅黑"、Arial)

代码示例：

css 复制代码

h1 {
    /* 斜体 加粗 30px大小/1.5倍行高 楷体 */
    font: italic 700 30px/1.5 "KaiTi";
}

2. `background` 背景复合属性

用于设置容器的背景效果。

语法顺序 ：background: color image repeat position/size;
子属性含义：
background-color (背景颜色：如 #fff)
background-image (背景图片：url('路径'))
background-repeat (平铺方式：如 no-repeat 不平铺、repeat-x 横向平铺)
background-position (图片位置：如 center 居中、left top 左上)
background-size (图片缩放：如 cover 铺满、contain 包含)

代码示例：

css 复制代码

.banner {
    /* 蓝色背景 引入图片 不平铺 居中对齐/覆盖容器 */
    background: #00bfff url('bg.jpg') no-repeat center/cover;
}

3. `border` 边框复合属性

定义元素四周的线条。

语法顺序 ：border: width style color;
子属性含义：
border-width (边框粗细：如 2px)
border-style (边框样式：如 solid 实线、dashed 虚线、dotted 点线)
border-color (边框颜色：如 red)

代码示例：

css 复制代码

.box {
    border: 1px solid #ccc; /* 1像素 实线 灰色边框 */
    border-bottom: 3px dashed orange; /* 底部：3像素 虚线 橙色 */
}

4. `padding` / `margin` 内外边距属性

这两个属性的写法完全一致，通过数值个数决定作用方向。

子属性含义：
**padding-top / margin-top** (上)
**padding-right / margin-right** (右)
**padding-bottom / margin-bottom** (下)
**padding-left / margin-left** (左)

代码写法（顺时针）：

css 复制代码

div {
    /* 1个值：上下左右都是20px */
    margin: 20px; 
    
    /* 2个值：上下为10px，左右为auto（常用于水平居中） */
    margin: 10px auto; 
    
    /* 4个值：上10px, 右20px, 下30px, 左40px (顺时针) */
    padding: 10px 20px 30px 40px; 
}

5. `transition` 过渡复合属性

用于实现属性变化时的平滑动画效果。

语法顺序 ：transition: property duration timing-function delay;
子属性含义：
transition-property (过渡属性：如 all 所有、width 宽度)
transition-duration (持续时间：如 0.3s)
transition-timing-function (时间曲线：如 linear 匀速、ease 缓动)
transition-delay (延迟时间：如 0.1s 后开始)

代码示例：

css 复制代码

.btn {
    width: 100px;
    /* 宽度属性 0.5s内完成 缓动变化 */
    transition: width 0.5s ease;
}

.btn:hover {
    width: 200px; /* 鼠标悬停时，宽度会平滑拉伸 */
}

6. `animation` 动画复合属性

用于调用定义的关键帧动画。

语法顺序 ：animation: name duration timing-function iteration-count;
子属性含义：
animation-name (动画名称：对应 @keyframes 定义的名字)
animation-duration (持续时间)
animation-timing-function (运动曲线：如 linear 匀速)
animation-iteration-count (重复次数：如 infinite 无限次、数字 3)

代码示例：

css 复制代码

.loading {
    /* 动画名叫 move, 耗时1s, 匀速, 无限循环 */
    animation: move 1s linear infinite;
}

@keyframes move {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

3.有关盒模型

任何 HTML 元素都可以看作一个盒子。

以下是一个'名片'盒子，可以直观的看到有哪些属性来设置一个盒模型。

也可以复制到vscode中，调整值看效果。

css 复制代码

.card {
    /* 1. 尺寸与盒模型算法 */
    width: 300px;
    box-sizing: border-box; /* 锁死宽度为300px */
    /* 2. 内容修饰 */
    background-color: white;
    /* 3. 内边距：内容不贴边，更有呼吸感 */
    padding: 20px; 
    /* 4. 边框：纸箱的外壳 */
    border: 5px solid #3498db; 
    /* 5. 外边距：距离旁边元素50px，并在页面水平居中 */
    margin: 50px auto; 
    /* 6. 修饰属性（不属于盒模型，但常用） */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

4.有关浮动

在浮动出现之前，网页元素像乖学生一样排队：块级元素（如 div）各占一行，从上往下堆叠。

想让两个 div 并排显示，在那个年代是很难做到的。

浮动的初衷是模仿报纸排版，让文字能环绕在图片的周围。"脱离文档流，向左或向右靠拢，直到遇到边框或另一个浮动元素。"

1. 浮动的三大核心特性

脱离文档流
普通的盒子是占位置的，但一旦设置了 float，这个盒子就会从普通的排队序列中"飘"起来，不再占据原来的位置。
向左或向右看齐
你可以设置 float: left; 或 float: right;。如果空间足够，多个浮动元素会并排显示。如果一行装不下了，它们会自动换行。
盒子的性格改变
设置浮动后，原本霸道的"块级元素"不再独占一行，它的宽度会根据内容自动收缩。

2. 高度塌陷

产生原因
由于浮动元素脱离了文档流，父盒子无法检测到子元素的高度。如果父盒子没设高度，其高度会变为 0，导致背景消失且下方元素乱入。
表现形式
子元素在上面"飘"，父元素在下面"缩"，导致页面布局结构崩坏。

3. 清除浮动（治理后遗症）

方法一：给父级加高度
手动写死 height 属性。缺点是不够灵活，内容增多时会溢出。
方法二：额外标签法
在浮动元素末尾添加空标签 <div style="clear:both;"></div>。缺点是增加了无意义的 HTML 结构。
方法三：伪元素清除法（推荐）
给父盒子添加 .clearfix 类，利用 CSS 在内部末尾生成块级元素收尾。

4. 代码实现参考

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动布局与清除示例</title>
    <style>
        /* 1. 核心：清除浮动的类 (推荐方案) */
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        /* 父盒子的样式 */
        .container {
            width: 800px;
            border: 5px solid #333;
            background-color: #f0f0f0;
            margin: 20px auto;
        }

        /* 2. 子盒子的通用样式 */
        .box {
            width: 200px;
            height: 150px;
            color: white;
            text-align: center;
            line-height: 150px; /* 文字垂直居中 */
            font-size: 20px;
        }

        /* 3. 开启浮动 */
        .left-box {
            float: left;        /* 向左浮动 */
            background-color: #e74c3c; /* 红色 */
        }

        .center-box {
            float: left;        /* 紧跟在左侧盒子后面 */
            background-color: #3498db; /* 蓝色 */
        }

        .right-box {
            float: right;       /* 向右浮动 */
            background-color: #2ecc71; /* 绿色 */
        }

        /* 4. 标准流文字（用于展示浮动的环绕效果） */
        .text-content {
            padding: 10px;
            color: #666;
        }
    </style>
</head>
<body>

    <h2 style="text-align:center;">浮动布局演示（带 clearfix）</h2>

    <div class="container clearfix">
        <div class="box left-box">左浮动 1</div>
        <div class="box center-box">左浮动 2</div>
        <div class="box right-box">右浮动 3</div>
    </div>

    <div class="container">
        <p class="text-content">
            <b>导师说明：</b><br>
            1. 上面的红、蓝、绿三个盒子都设置了 <code>float</code>，所以它们能并排显示。<br>
            2. 因为父盒子加了 <code>clearfix</code> 类，所以即便子元素"飘"了，父盒子的灰色背景和黑边框依然能包裹住它们。<br>
            3. 如果你删掉代码中第 10 行的 <code>clearfix</code> 相关样式，你会发现黑边框瞬间"扁了"。
        </p>
    </div>

</body>
</html>

5. 有关定位 (Position)

如果说浮动是让盒子"往一边靠"，那么定位就是精准地"移动到某个点"。它允许你将元素放置在页面的任意位置，甚至让它们重叠。

1. 定位的组成

定位 = 定位模式 + 边偏移。

定位模式 ：通过 position 属性指定（如 relative, absolute 等）。
边偏移 ：通过 top, bottom, left, right 四个属性决定最终位置。

2. 四种常用的定位模式

相对定位 (Relative)
相对于自己原先在标准流中的位置进行移动。

特点：不脱标。它虽然移动了，但原本占有的位置依然被保留，后面的元素不会顶上来。

绝对定位 (Absolute)
相对于它的父级或祖先元素进行移动。

特点：完全脱标。不再占有位置，父盒子和其他盒子会无视它。
参考标准：如果没有父元素或父元素没有定位，则以浏览器窗口为准；如果父元素有定位（非 static），则以最近一级的有定位祖先元素为准。

固定定位 (Fixed)
相对于浏览器可视窗口进行移动。

特点：完全脱标。无论页面如何滚动，它的位置始终固定在屏幕的某个地方（如回到顶部按钮）。

粘性定位 (Sticky)
相对定位和固定定位的结合体。

特点：平时随页面滚动，当达到指定的距离（如 top: 0）时，它会"粘"在那个位置不动。

3. 核心口诀：子绝父相

这是定位中最常用的布局方式：子级使用绝对定位，父级使用相对定位。

理由：父级需要占有位置（相对定位不脱标）来撑开布局，而子级需要在父级内部灵活移动（绝对定位脱标且以父级为参考）。

4. 完整代码演练：定位布局示例

这段代码展示了如何利用"子绝父相"在一个卡片内部放置一个标签，并演示了固定定位的侧边栏。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 定位演示</title>
    <style>
        body {
            height: 2000px; /* 增加高度以便演示滚动 */
            background-color: #f4f4f4;
        }

        /* 1. 子绝父相示例 */
        .card {
            position: relative;    /* 父级：相对定位 */
            width: 300px;
            height: 200px;
            background-color: white;
            margin: 100px auto;
            border: 1px solid #ddd;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .hot-tag {
            position: absolute;    /* 子级：绝对定位 */
            top: -10px;            /* 向上偏移 */
            right: -10px;          /* 向右偏移 */
            background-color: red;
            color: white;
            padding: 5px 15px;
            font-size: 12px;
            border-radius: 5px;
        }

        /* 2. 固定定位示例 */
        .sidebar {
            position: fixed;       /* 固定在浏览器窗口 */
            top: 50%;              /* 垂直居中 */
            right: 20px;
            transform: translateY(-50%);
            width: 50px;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            border-radius: 8px;
        }

        /* 3. 层叠顺序 z-index */
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .blue { background: blue; top: 20px; left: 20px; z-index: 2; }
        .orange { background: orange; top: 50px; left: 50px; z-index: 1; }
    </style>
</head>
<body>

    <div class="card">
        <div class="hot-tag">热门推荐</div>
        <p style="padding: 20px;">这是一个卡片容器，红色标签使用了绝对定位，参考对象是这个白色的卡片。</p>
    </div>

    <div class="sidebar">
        侧<br>边<br>栏
    </div>

    <div style="position: relative; margin-top: 50px; margin-left: 200px;">
        <div class="box blue">蓝色 (z-index: 2)</div>
        <div class="box orange">橙色 (z-index: 1)</div>
    </div>

</body>
</html>

5. 定位总结

相对定位 ：原地踏步，仅视觉移动，位置还在。
绝对定位 ：放飞自我，以有定位的父辈为准，位置不在。
固定定位：死心眼，只认浏览器窗口，不随页面滚动。
z-index：定位元素的"高度"，数字越大越在最上面。注意：只有定位了的元素（除了 static）才有 z-index。

【CSS】基础一篇过

目录

一，导入CSS的三种方式

1. 行内样式 (Inline Styles)

2. 内部样式表 (Internal Style Sheets)

3. 外部样式表 (External Style Sheets) ------ 推荐做法

三种方式的"权力"对比

二，选择器

1. 元素选择器 (Element Selector)

2. 类选择器 (Class Selector)

3. ID 选择器 (ID Selector)

4. 通用选择器 (Universal Selector)

5. 子元素选择器 (Child Selector)

6. 后代选择器/包含选择器 (Descendant Selector)

7. 并集选择器与兄弟选择器 (Grouping & Sibling Selectors)

8. 伪类选择器 (Pseudo-classes)

三，属性

1.有关常用属性

2.有关复合属性

1. font 字体复合属性

2. background 背景复合属性

3. border 边框复合属性

4. padding / margin 内外边距属性

5. transition 过渡复合属性

6. animation 动画复合属性

3.有关盒模型

4.有关浮动

1. 浮动的三大核心特性

2. 高度塌陷

3. 清除浮动（治理后遗症）

4. 代码实现参考

5. 有关定位 (Position)

1. 定位的组成

2. 四种常用的定位模式

3. 核心口诀：子绝父相

4. 完整代码演练：定位布局示例

5. 定位总结

1. `font` 字体复合属性

2. `background` 背景复合属性

3. `border` 边框复合属性

4. `padding` / `margin` 内外边距属性

5. `transition` 过渡复合属性

6. `animation` 动画复合属性