CSS 知识点 - 技术栈

前言

在学习完 HTML 的基础知识点以后，我们迎来了CSS知识点的学习。一句话说明 HTML 和 CSS 的区别与联系就是：HTML负责定义页面的结构和内容，CSS负责控制页面的外观和样式。

CSS 概念

全称与中文译名

英文全称：Cascading Style Sheets

中文名称：层叠样式表

本质与作用

用于定义网页样式和布局的样式表语言。

可以精确控制页面元素的颜色、字体、大小、间距、边框、背景等视觉表现，从而实现精细的页面设计。

CSS 语法

基本结构

CSS 规则由选择器 和声明块组成，格式如下：

css 复制代码

选择器 {
  属性1: 属性值1;
  属性2: 属性值2;
}

核心规则

选择器的声明块中可以包含任意数量的属性。

每一条属性声明都必须以英文分号 ; 结尾。

所有属性和值都以键值对（属性: 值）的形式出现。

示例：

css 复制代码

/* 这是一个 p 标签选择器 */
p {
  color: blue;
  font-size: 16px;
}

CSS 导入方式

1、内联样式（Inline Styles）

直接写在 HTML 元素的style 属性 中。

示例：

html 复制代码

<div style="color: red;">这是红色文字</div>

2、内部样式表（Internal Stylesheet）

写在 HTML 文件的**<head> 标签内，用 <style> 标签包裹** 。

示例：

html 复制代码

<head>
  <style>
    div { color: red; }
  </style>
</head>

3、外部样式表（External Stylesheet）

写在单独的 .css 文件中，通过**<link> 标签引入** 到 HTML。

示例：

html 复制代码

<head>
  <link rel="stylesheet" href="style.css">
</head>

优先级规则

三种导入方式的优先级从高到低为：内联样式 > 内部样式表 > 外部样式表。

记忆的话就是离标签越近越优先。

练习

.html文件：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 导入方式</title>
    <link rel="stylesheet" href="./CSS/style.css">
    <!-- 内部样式法 -->
    <style>
        p{
            color:plum;
            font-size: 16px;
        }
        h2{
            color: aqua;
        }
    </style>
</head>
<body>
    <p>这是一个应用了css样式的文本</p>
    <h1 style="color: blueviolet;">这是一个一级标题标签，使用内联样式</h1>
    <h2>这是一个二级标题标签，使用内部样式</h2>
    <h3>这是一个三级标题标签，使用外部样式</h3>
</body>
</html>

.css文件：

css 复制代码

h3{
    color:aquamarine;
}

结果展示：

CSS 选择器

选择器就是用来选择要应用样式的 HTML 元素，它可以选择所有的元素，也可以是特定的元素，或者特定的类、ID等等。

CSS 常见选择器有以下几种：

1、元素选择器

直接使用 HTML 标签名作为选择器，选中所有该类型的元素。

示例：

css 复制代码

p { color: red; }

会选中页面中所有 <p> 标签。

2、类选择器

使用 .类名 格式，选中所有带有对应 class 属性的元素。

示例：

css 复制代码

.box { font-size: 16px; }

会选中所有 class="box" 的元素。

3、ID 选择器

使用**#ID名** 格式，选中带有对应 id 属性的唯一元素。

示例：

css 复制代码

#header { background: #eee; }

会选中 id="header" 的元素。

4、通用选择器

使用*****，选中页面中所有元素。

示例：

css 复制代码

* { margin: 0; padding: 0; }

常用于重置默认样式。

5、子元素选择器

使用 父元素 > 子元素，只选中父元素的直接子元素。可以理解为代码里面的嵌套。

示例：

css 复制代码

div > p { color: blue; }

只选中 <div> 直接包裹的 <p>。

6、后代选择器（包含选择器）

使用祖先元素后代元素，选中祖先元素内所有层级的后代元素。

示例：

css 复制代码

div p { color: green; }

会选中 <div> 里所有层级的 <p>。

7、并集选择器（分组选择器）

使用 选择器1, 选择器2，同时选中多个选择器匹配的元素。

示例：

css 复制代码

h1, h2, h3 { font-weight: bold; }

同时作用于所有标题。

8、伪类选择器

使用选择器:状态，选中元素在特定状态或者位置时的样式（如 hover、active），通常是给用户交互文档结构或者其他条件下的元素应用样式。

示例：

css 复制代码

a:hover { color: red; }

表示鼠标悬停在链接上时的样式。

当然，选择器也是有优先级的：ID选择器 > 类选择器 > 标签(元素)选择器。

所以在编程时要注意，能直接指明类就指明类而不是统一用标签，否则会出现如下情况：因为

这里的两组的上下顺序调换以后，呈现的样式就不同了，完全是根据编程的先后顺序来决定的。

像这样指明了类就不会差错了：

练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 选择器</title>
    <style>
        /* 元素选择器示例 */
        h2{
            color: gold;
        }
        /* 类选择器示例 */
        .highlight{
            background-color: aqua;
        }
        /* ID 选择器示例 */
        #header{
            background-color: aquamarine;
        }
        /* 通用选择器示例 */
        *{
            font-family:kaiTi;
        }
        /* 元素选择器示例 */
        .father>.son{
            color: plum;
        }
        /* 后代选择器示例 */
        div p{
            color: rgb(255, 0, 85);
        }
        /* 并集选择器示例 */
        p,h6{
            background-color: yellow;
        }
        /* 伪类选择器示例 */
        #element:hover{
            background-color: blueviolet
        }
        /* 结构伪类选择器
        :first-child  选中父元素下的第一个子元素
        :nth-child(1)  选中父元素下的第n个子元素
        :active  选中元素被激活时的状态（如按钮按下、链接点击瞬间） */

        /* 伪元素选择器
        ::after
        ::before
        在选中元素之前或者之后插入虚拟的行内元素 */
    </style>
</head>
<body>
    <h1>不同类型的 CSS 选择器</h1>
    <h2>这是一个元素选择器示例</h2>
    <h3 class="highlight">这是一个类选择器示例</h3>
    <h4 id="header">这是一个 ID 选择器示例</h4>
    <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>子元素选择器示例对比组</div>
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>
    </div>
    <p>这是一个普通的p标签</p>
    <h6>这是一个并集选择器示例</h6>
    <p>这是另一个p标签</p>
    <h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

CSS 常用属性

在菜鸟教程上有很全很清晰的 CSS 属性大全，指路：CSS 属性大全手册（按功能） - 菜鸟教程，在这里我就只做练习。

练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 常用属性</title>
    <style>
        .block{
            background-color: aqua;
            width: 150px;
            height: 80px;
        }
        .inline{
            color: #000;
            background-color: rgb(1, 148, 245);
            /* 行内元素无法定义宽度和高度,设置宽高是不会起作用的 */
            width: 200px;
            height: 500px;
        }
        .inline-block{
            height: 100px;
        }
    </style>
</head>
<body>
    <h1 style="font:bolder 50px kaiTi">这是一个 font 复合属性示例</h1>
    <p style="line-height:40px;">这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本</p>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <!-- 行内块元素 -->
     <img src="知识点.png" alt="行内块元素" class="inline-block">
</body>
</html>

CSS 盒子模型（box model）

定义

盒子模型是 CSS 中一种常用于布局的基础概念。它描述了文档中的每一个元素都可以被看成一个矩形的盒子，封装周围的 HTML 元素，包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。div 是最典型的 "盒子载体" ，我们写页面布局时，几乎都是用 div（或其他块元素）来搭建一个个盒子，再通过盒子模型控制布局。

（图源：网页）

Content (内容) - 盒子的内容，显示文本和图像。
Padding (内边距) - 围绕在内容内部，是内容与边框之间的空间。可以使用 padding 属性来设置。
Border(边框) - 围绕在内边距的外部，是盒子的边界。可以使用 border 属性来设置。
Margin(外边距) - 围绕在边框的外部，是盒子与其他元素之间的空间。可以使用 margin 属性来设置。
gap - 父盒子内子元素之间的间距。

特别的，这里的 padding、border、margin 都是复合属性，也就是我们可以通过这一个属性来设置多个样式。但是 padding/margin 与 border 的规则存在差异，本质上是因为它们描述的属性维度的不同所导致的。

1、padding/margin（方位型复合属性）

只描述 "距离" 这一个维度，所以多值规则是按方位分配（顺时针：上→右→下→左），缺省值会自动复用。

2、border（多维度复合属性）

同时描述 "宽度、样式、颜色" 三个维度，所以复合写法需要包含核心维度（至少要包含样式），维度内的顺序可灵活，但维度不能缺核心项。

缺省规则：

缺宽度：默认 medium（约 3px）；
缺颜色：默认继承父元素文字颜色；
缺样式：整个 border 失效。

补充：

border-方向（如 border-left）也是多维度复合属性，规则是和 border 一致的。

练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 盒子模型</title>
    <style>
        .demo{
            background-color: aqua;
            /* 转换成行内块元素 */
            display: inline-block;
            border: 5px solid rgb(60, 255, 0);
            padding:50px;
            margin: 50px 10px;/* 上下50px 左右10px*/
        }
        .border-demo{
            background-color: gold;
            width: 300px;
            height: 200px;
            /* 依然是复合属性 */
            border-style: dashed;
            border-width: 3px 6px 12px;/* 遵循顺时针，如果只设置一个值默认上下左右边框全是这个大小，如果是三个值就依次是上右下，那左边框没有值就会向右边框看齐*/
            border-color: orangered;
        }
    </style>
</head>
<body>
    <div class="demo">一个demo</div>
    <div class="border-demo">一个边框demo</div>
</body>
</html>

拓展： 盒子模型中的复合属性遵循顺时针的原则，如果只设置一个值默认上下左右边框全是这个属性值，如果是三个值就依次是上右下，那此时左边框没有值就会向右边框看齐故呈现出来和右边框属性值一样。例如：

上图的 border-width 属性就设置了3个属性值，那分别就是上、右、下对应的属性值，因为左边框没有专门设置属性值，故其会对应右边框的属性值，所以从图中看就是左右边框宽度一样。

其他属性（以 margin 为例）也一样：

CSS 浮动

在学习浮动之前我们先了解了解传统的网页布局方式。

网页布局主要有五种方式：

标准流（普通流 / 文档流）：网页按照元素的书写顺序依次排列，是最基础的布局方式。
浮动：用于实现元素并排等布局。
定位：用于精确控制元素的位置。
Flexbox：现代弹性布局，用于灵活排列元素。（自适应布局）
Grid：现代网格布局，用于二维布局。（自适应布局）

浮动

1、浮动是什么

1）正常情况（没有浮动）

块级元素（div、p、h1 等）默认：

独占一行
从上往下排
各占各的位置，互不干扰

2）加了浮动后

比如：

css 复制代码

float: left; /* 向左飘 */
float: right; /* 向右飘 */

效果：

元素飘起来了 → 脱离正常文档流
原来的位置空出来 → 下面的元素会顶上来
多个浮动元素会并排 → 实现横向排列

你可以理解为浮动 = 从地面升到空中，地面的人可以走到你原来站的地方。

2、核心作用

理解完什么是浮动了以后我们就可以看看浮动的核心作用了：

让元素脱离文档流，不再占据标准流的空间。
元素会根据开发者的设置，向左或向右 "漂浮"，直到触碰到父元素的边缘或另一个浮动元素的边缘。

一句话总结就是浮动就是让元素 "飘起来"，不再占原来的位置，还能让块级元素并排显示。浮动最典型的应用就是让多个块级元素在同一行内排列显示。

提问：浮动和行内块有什么区别？

解答：二者的区别就是浮动的元素是相互贴靠在一起的，不会有缝隙，如果父级宽度装不下浮动的盒子，多出去的盒子会另起一行；而行内块元素的彼此间是有缝隙的。特别的，浮动是相对于父元素进行浮动的，只会在父元素的内部进行移动。

3、浮动最常见的应用

让多个 div 横着排（做导航、卡片、布局）
文字环绕图片

4、语法

css 复制代码

选择器 {
    float: left/right/none;
}

left：元素向左浮动
right：元素向右浮动
none：默认值，元素不浮动

5、特性

1）脱标

浮动元素会脱离标准文档流，不再占据原来的空间，后面的标准流元素会自动向上移动，填补它留下的位置。（这也是后文为什么会出现父元素高度塌陷的根本原因。）
2）一行显示，顶部对齐

多个设置了浮动的元素会在同一行内并排显示，并且它们的顶部会保持对齐。如果父元素宽度不足，浮动元素会自动换行。
3）具备行内块元素特性

浮动元素会表现得像行内块元素一样：

可以设置宽高和内外边距
多个元素可以在一行内排列
默认宽度由内容决定，而不是像块级元素那样独占一行

6、清除浮动

既然浮动元素会脱离文档流，就会带来一个常见问题 ------ 父元素高度塌陷。

如下图：

按理说我们这个 p 标签内的内容应该在 div 标签的内容下面，但你会发现这个 p 标签内的内容夹在了两个浮动盒子中间，这是因为子元素飘走了，父元素不知道里面有东西，高度变成 0，因而出现了坍塌。那解决方法就是清除浮动。

方法1：

在浮动元素的父元素中添加 overflow 属性，设置父元素的 overflow 属性的属性值为 auto 或 hidden 会创建一个新的块格式化上下文（Block Formatting Context）。这样子这个父元素的边框就被撑开了。（在 BFC 中，浮动元素会被包含在父元素的边界内，从而解决浮动引起的高度塌陷问题。）

方法2：

伪元素清除法。

css 复制代码

/* 方法2 */
        .father::after {
        /* 1.content: "" 是创建一个空的伪元素 */
        content: "";
        /* 2.display: table 使其成为一个块级元素 */
        display: table;
        /* 3.clear: both 清除左、右两边的浮动 */
        clear: both;
        }

练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 浮动</title>
    <style>
        .father{
            background-color: aqua;
            border: 10px solid blue;
            /*方法一：overflow: hidden;*/
        }
        /* 方法2 */
        .father::after {
        /* 1.content: "" 是创建一个空的伪元素 */
        content: "";
        /* 2.display: table 使其成为一个块级元素 */
        display: table;
        /* 3.clear: both 清除左、右两边的浮动 */
        clear: both;
        }
        .left-son{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        .right-son{
            width: 100px;
            height: 100px;
            background-color:yellow;
            float:right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
    </div>
    <p>这是一个普通的p标签</p>
</body>
</html>

CSS 定位

浮动布局虽然灵活，但是不容易控制，而定位布局则可以让用户精准定位页面中的某一元素。

定位方式

定位方式	参考基准	是否脱离文档流	核心特点	典型场景
相对定位 (relative)	元素在文档流中的正常位置	不脱离	保留原位置，仅视觉偏移	微调位置、做绝对定位的父容器
绝对定位 (absolute)	最近的已定位祖先元素	脱离	不占据文档流空间	弹窗、角标、下拉菜单
固定定位 (fixed)	浏览器视口窗口	脱离	位置固定，不随页面滚动	固定导航、返回顶部按钮

这里提供各定位方式的示例，以便大家理解。

相对定位

绝对定位

固定定位

练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 定位</title>
    <style>
        .box1{
            height: 350px;
            background-color: aqua;
        }
        .box-normal{
            width: 100px;
            height: 100px;
            background-color: rgb(255, 0, 85);
        }
        .box-relative{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            left: 20px;
            top:40px;
        }
        .box2{
            height: 350px;
            background-color:aquamarine;
            margin-bottom: 400px;
        }
        .box-absolute{
            width: 100px;
            height: 100px;
            background-color: rgb(253, 62, 253);
            position: absolute;
            left: 120px;
        }
        .box-fixed{
            width: 100px;
            height: 100px;
            background-color:yellow;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
    <h1>绝对定位</h1>
    <div class="box2">
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-normal"></div>
    </div>
    <h1>固定定位</h1>
    <div class="box-fixed"></div>
</body>
</html>