CSS简明通俗教程

1. CSS简介

CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言。CSS用于描述HTML或XML（包括SVG或XHTML等XML方言）文档的呈现方式，它有自己的语法规则和逻辑，用于控制网页的视觉呈现。CSS的主要目的是为网页提供样式设计，包括颜色、字体、布局等，通过CSS，可以控制网页元素的外观和排版，使得网页更加美观和生动。HTML用于结构化内容，而CSS用于定义这些内容的样式和布局。

“层叠”意味着多个样式可以应用到同一元素，最终的样式是这些规则的组合结果。

可以用什么编辑和测试 CSS代码？

可以使用各种文本编辑器（如Windows的记事本、Sublime Text）、集成开发环境（IDE，如、HBuilder X、WebStorm）和在线代码编辑器（如 CodePen、JSFiddle 等），编辑CSS文件或代码片段。

所有现代浏览器都内置了强大的开发者工具，特别适合实时编辑和测试CSS。例如打开谷歌的Chrome或Microsoft的 Edge 浏览器的开发者工具DevTools（Windows/Linux: F12 或 Ctrl+Shift+I, Mac: Cmd+Option+I）

【虽然从严格的计算机科学角度来看，HTML和CSS可能不被归类为传统的编程语言，但在Web开发的实际应用和行业认知中，它们通常被视为“代码”的一部分。】

HTML引入CSS的方式主要有有三种：

1).内联样式（Inline Styles）

内联样式直接在HTML元素的style属性中定义CSS。如：

<p style="color: blue; font-size: 18px;">这是一个蓝色的段落，字体大小为18像素。</p>

内联样式完整而简单示例源码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例</title>
</head>
<body><h1 style="color: blue; text-align: center;">这是一个标题</h1><p style="font-size: 18px; color: green;">这是一个段落，使用内联样式设置字体大小和颜色。</p><div style="border: 1px solid black; padding: 20px; margin-top: 10px;">这是一个带边框的盒子。</div>
</body>
</html>

用浏览器打开运行效果：

2).内部样式表（Internal Stylesheet）

内部样式表在HTML文档的<head>部分使用<style>标签定义CSS。

示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例</title><style>p {color: green;font-size: 16px;}</style>
</head>
<body><p>这是一个绿色的段落，字体大小为16像素。</p>
</body>
</html>

你可以用浏览器打开运行看看。

3).外部样式表（External Stylesheet）

外部样式表是最常用的方法。CSS被定义在一个单独的.css文件中，然后通过<link>标签在HTML文档中引用：<link rel="stylesheet" type="text/css" href="styles.css"> ，其中type="text/css" 在HTML5中是可选的。在 HTML 文档中的 <head> 部分使用 <link> 标签引入。这样方式可以方便地重用 CSS 样式。

示例：

首先，创建一个名为styles.css的文件：

p {color: red;font-size: 20px;
}

然后，在HTML文件中引用这个CSS文件：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例</title><link rel="stylesheet" type="text/css" href="styles.css"> <!-- 引入外部 CSS 文件 -->
</head>
<body><p>这是一个红色的段落，字体大小为20像素。</p>
</body>
</html>

你可以用浏览器打开运行看看。

2.CSS基础语法

CSS规则由两个主要部分构成：选择器和声明块。语法：

selector {
property1: value;
property2: value;
/* 更多属性-值对 */
}
其中，selector是选择器名，{ }内是属性-值对。
每个CSS规则由属性和值对组成，放在英文大括号内，属性和值之间用英文冒号，属性和值对之间用英文分号隔开。用来定义特定样式。例如：
h1 {
color: blue; /* 文本颜色 */
font-size: 24px; /* 字体大小 */
}

CSS3的书写规范（约定）

遵循这些规范可以使您的CSS代码更加清晰、一致和易于维护。在团队开发中，遵循一致的编码规范尤为重要，可以提高协作效率。

选择器使用小写字母，使用连字符（-）而不是下划线（_）或驼峰命名。

每个属性声明单独一行，属性和属性值应使用小写字母，冒号后面加一个空格，以分号结束每个声明，最后一个属性也加分号（有利于添加新属性）。

在选择器和左大括号之间加一个空格，右大括号单独一行。

使用两个或四个空格进行缩进，保持一致。属性之间用一个空行分隔，选择器与其属性之间不需要额外空行。

2.1 选择器类型

常见的如下

☆元素选择器：直接使用标签名，例如 div、p、h1。

基本形式：
element {
property: value;
}

示例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>/* 选择所有的段落 */p {color: blue;font-size: 16px;}/* 选择所有的标题1 */h1 {color: green;font-size: 32px;}/* 选择所有的标题2 */h2 {color: orange;font-size: 24px;}</style>
</head>
<body><h1>这是一级标题</h1><h2>这是二级标题</h2><p>这是一段蓝色的文字。</p>
</body>
</html>

☆ 类选择器：使用.加类名，可以应用于多个元素。

基本形式：
.class-name {
property: value;
}
示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>.highlight {color: red;font-weight: bold;}</style>
</head>
<body><p class="highlight">这段文字将被高亮显示。</p><p class="highlight">这段文字也将被高亮显示。</p><p>这段文字没有高亮。</p>
</body>
</html>

☆ ID选择器：使用#加ID名，只能应用于一个唯一元素，即同一页面上不应出现相同的ID。

基本形式如下：
#id-name {
/* CSS 属性 */
property: value;
}
示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>#myId {background-color: lightblue;font-size: 12px;}</style>
</head>
<body><div id="myId">这是示例</div>
</body>
</html>

☆属性选择器：用于选择具有特定属性或属性值的 HTML 元素。它允许根据元素的特定属性来应用样式，而不需要依赖类或ID。

语法：
1) 选择具有指定属性的元素：
[attribute] {
property: value;
}
2)选择具有特定属性值的元素：
[attribute="value"] {
property: value;
}
3) 更复杂的属性选择器:
a．选择属性值以某个值开头:
[attribute^="value"] {
property: value;
}
b.选择属性值以某个值结尾:
[attribute$="value"] {
property: value;
}
c.选择属性值包含某个值:
[attribute*="value"] {
property: value;
}

示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>属性选择器示例</title><style>/* 选择所有带有title属性的元素 */[title] {border: 1px solid blue;padding: 5px;margin: 5px 0;}/* 选择所有href属性值为https的链接 */a[href^="https"] {color: green;font-weight: bold;}/* 选择所有href属性以.html结尾的链接 */a[href$=".html"] {color: orange;}/* 选择所有包含data特性（data-*）的元素 */[data-info] {background-color: lightyellow;}/* 选择所有class属性包含"btn"的元素 */[class*="btn"] {padding: 10px;background-color: lightgray;border: 2px solid black;cursor: pointer;}</style>
</head>
<body><h1>属性选择器 示例</h1><p title="这是段落">这是一段带有title属性的段落。</p><a href="https://example.com">这是一个安全链接</a><a href="http://example.com">这是一个不安全链接</a><a href="page.html">这是一个HTML页面链接</a><div data-info="一些信息">这个<div>元素包含data-info属性。</div><button class="btn-primary">主要按钮</button><button class="btn-secondary">次要按钮</button><button class="btn">普通按钮</button>
</body>
</html>

说明（解释）：

[title]：选中所有具有 title 属性的元素，给它们设置边框和内边距。

a[href^="https"]：选择所有href属性以https开头的链接，并使它们的文本颜色变为绿色，字体加粗。

a[href$=".html"]：选择所有href属性以.html结尾的链接，并给它们设置橙色文本。

[data-info]：选择所有带有data-info属性的元素，设置背景色为淡黄色。

[class*="btn"]：选择所有class属性中包含btn的元素，并应用一些按钮样式。

用浏览器运行效果：

☆ 组合选择器：结合多种条件进行选择，如后代、子代、兄弟等。

后代选择器：使用空格可以选择某个元素内的所有后代元素。例如 css div p { color: red; }

子代选择器：使用>选择器可以选择某个元素的直接子元素。例如 css div > p { color: green; }

相邻兄弟选择器：使用+选择器可以选择某个元素后面的第一个兄弟元素。例如 css h1 + p { margin-top: -10px; }

一般兄弟选择器：使用~可以选择某个元素后面的所有兄弟元素。例如，选择所有在h2后面出现的的p元素：h2 ~ p { color: green;}

通过组合选择器，可以灵活、精准地控制CSS样式的应用范围。可以组合多种选择器来提供更具体的样式。例如，选择所有div内的p元素或所有.highlight类的元素：div p, .highlight { font-weight: bold; }

简单而完整示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>组合选择器示例</title><style>/* 后代选择器 */div p {color: blue;}/* 子选择器 */ul > li {list-style-type: square;}/* 相邻兄弟选择器 */h1 + p {margin-top: 0; /* 没有额外的顶部边距 */}/* 一般兄弟选择器 */h2 ~ p {color: green; /* 设置h2后所有p的颜色 */}/* 组合选择器 */div p, .highlight {font-weight: bold; /* 加粗所有特定的元素 */}</style>
</head>
<body><div><h1>这是一个标题</h1><p>这是一个段落，应该为蓝色。</p></div><div><h2>这是二级标题</h2><p>这是另一个段落，会变为绿色，因为它在h2之后。</p><p class="highlight">这是一个高亮段落，会加粗。</p></div><ul><li>第一个列表项</li><li>第二个列表项</li></ul>
</body>
</html>

群组选择器

用逗号分隔多个选择器，适用于多个选择器共同应用相同样式的情况。例如：

h1, h2, h3 {
color: blue;
}

简单而完整示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>群组选择器示例</title><style>/* 群组选择器 */h1, h2, h3 {color: blue;     /* 所有 h1、h2 和 h3 的文字颜色都变为蓝色 */font-family: Arial, sans-serif; /* 所有 h1、h2 和 h3 使用相同的字体 */}p {font-size: 16px; /* 所有段落字体大小为16px */line-height: 1.5; /* 段落行高为1.5倍字体大小 */}</style>
</head>
<body><h1>欢迎来到我的网站</h1><h2>这是一个小标题</h2><h3>这是更小的小标题</h3><p>这是一个段落，用于说明内容。</p><p>这是另一个段落。</p>
</body>
</html>

群组选择器和组合选择器的区别
群组选择器：
使用逗号分隔多个选择器。
适用于多个选择器共享相同样式。
组合选择器：
使用空格、>、+ 和 ~ 等符号组合选择器。
根据元素的结构或层级关系来选择元素。

☆伪类选择器

伪类选择器是 CSS 中用于选择并样式化元素的工具，特定于元素的状态或结构。可以分为两大类：状态伪类和结构伪类。

1)状态伪类：

状态伪类用于定义用户与元素交互时的样式。这些伪类通常以冒号（:）开头。常见的状态伪类包括：

:hover：当鼠标悬停在元素上时应用样式。

:focus：当元素获得焦点时应用样式（例如，输入框）。

:active：当元素被激活（如点击）时应用样式。

:visited：选取已访问过的链接。

:link：选取未访问过的链接。

示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>状态伪类示例</title><style>a {color: blue;text-decoration: none;}a:hover {text-decoration: underline; /* 鼠标悬停时下划线 */}input:focus {border-color: green; /* 输入框获得焦点时边框变绿 */}button:active {background-color: orange; /* 按钮被点击时背景变橙色 */}</style>
</head>
<body><a href="#">这是一个链接</a><br/>
<input type="text" placeholder="点击我..."><br/>
<button>点击我</button></body>
</html>

2)结构伪类：

结构伪类用于根据文档树（DOM 结构）中的位置或结构来选择元素。这些也以冒号（:）开头。常见的结构伪类包括：

:first-child：选取作为其父元素第一个子元素的元素。

:last-child：选取作为其父元素最后一个子元素的元素。

:nth-child(n)：选取作为其父元素第n个子元素的元素，可以使用数字、关键字或公式。

示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>结构伪类示例</title><style>li:first-child {font-weight: bold; /* 第一个列表项加粗 */}li:last-child {color: red; /* 最后一个列表项变红 */}li:nth-child(2) {background-color: lightgray; /* 第二个列表项背景变灰 */}li:not(:last-child) {border-bottom: 1px solid #ccc; /* 除最后一个外其他列表项添加底部边框 */}</style>
</head>
<body><ul><li>第一项</li><li>第二项</li><li>第三项</li><li>第四项</li>
</ul></body>
</html>

☆伪元素选择器

伪元素选择器

伪元素选择器则是用来选择元素的特定部分或创建虚拟元素，而不直接改动 DOM 结构。伪元素通常是用来对元素内部的某些内容进行样式设置。

常见的伪元素选择器包括：

::before：在元素内容之前插入内容。

::after：在元素内容之后插入内容。

::first-line：选择元素文本的第一行。

::first-letter：选择元素文本的首字母。

示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>伪元素选择器示例</title><style>/* 使用 ::before 在段落前添加内容 */p::before {content: "注意: "; /* 插入文本 */font-weight: bold;  /* 加粗 */color: red;         /* 红色 */}/* 使用 ::after 在段落后添加内容 */p::after {content: " (结束)"; /* 插入文本 */font-style: italic;  /* 斜体 */color: gray;         /* 灰色 */}/* 使用 ::first-line 改变第一行样式 */p::first-line {font-weight: bold;   /* 第一行加粗 */color: blue;         /* 蓝色 */}/* 使用 ::first-letter 改变第一个字母样式 */p::first-letter {font-size: 2em;      /* 增大字体大小 */color: green;        /* 绿色 */float: left;         /* 左浮动，使其独立于文本流 */margin-right: 5px;   /* 添加右边距以分隔文字和字母 */}</style>
</head>
<body><p>这是一个包含多个样式效果的段落。它展示了如何使用伪元素来增强文本表现。</p></body>
</html>

2.2 常见CSS属性

文本相关属性

这些属性用于控制文本的外观。

例如：

body {
color: #333; /* 设置文本颜色 */
font-size: 16px; /* 设置字体大小 */
font-family: Arial, sans-serif; /* 设置字体系列 */
text-align: center; /* 文本对齐方式 */
line-height: 1.5; /* 行高 */
font-weight: bold; /* 字体粗细 */
text-decoration: underline; /* 文本装饰 */
text-transform: uppercase; /* 文本转换 */
}

盒子模型及相关属性

CSS 盒子模型是一个重要的概念，它描述了网页中每个元素的布局方式。

盒子模型，所有的 HTML 元素都被视为一个盒子，这个盒子由多个部分组成：

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

内容区域（Content Box）: 盒子的实际内容区域，比如文本、图像等。通过属性 width 和 height 来设置其宽度和高度。

内边距（Padding）: 内容区域与边框之间的空间，使用 padding 设置。内边距是透明的，背景色会填充内边距的区域。

边框（Border）: 包围在内边距和内容周围的边框，可以通过 border 属性来设置其样式、宽度和颜色。

外边距（Margin）: 盒子外部的空间，使用 margin 设置。外边距也是透明的，可以用来控制元素之间的距离。

例如：

div {
width: 300px; /* 宽度 */
height: 200px; /* 高度 */
padding: 20px; /* 内边距 */
margin: 10px auto; /* 外边距 */
border: 2px solid #000; /* 边框 */
box-sizing: border-box; /* 盒模型计算方式：使宽高包含内边距和边框 */
}

布局（Layout）及相关属性

这些属性控制元素在页面中的定位和排列方式。

CSS 布局（Layout）模型：

块级布局（Block）：最基本的布局，适用于常规文档流。

行内布局（Inline）：主要用于文本和小型内联元素的排列。

表格布局（Table）：适用于展示表格式数据，但在现代web开发中较少使用。

浮动布局（Float）：虽然最初用于文字环绕，但也常用于创建多列布局。

定位布局（Positioned）：允许精确控制元素位置，适用于特定的布局需求。

弹性盒子布局（Flexbox）：非常适合一维布局，如导航栏或均匀分布的内容。

网格布局（Grid）：强大的二维布局工具，适合复杂的页面结构。

在实际开发中，我们通常会综合使用这些布局模型。例如，你可能会在一个使用Grid布局的页面中，对某些容器使用Flexbox，而对一些特定元素使用绝对定位。

例如：

.layout {
display: flex; /* 弹性布局 */
position: relative; /* 相对定位 */
float: left; /* 浮动 */
}

.grid-container {
display: grid; /* 网格布局 */
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽布局 */
gap: 10px; /* 网格间隙 */
}

背景属性

背景属性用于设置元素的背景样式。

例如：
.background {
background-color: #f0f0f0; /* 背景颜色 */
background-image: url('image.jpg'); /* 背景图片 */
background-repeat: no-repeat; /* 背景不重复 */
background-position: center; /* 背景位置 */
background-size: cover; /* 背景尺寸 */
}

变形（转换）与动画属性

这些属性用于创建动态效果和动画。

transform 用于对元素进行旋转、缩放、倾斜等变形。

transition 创建平滑的状态变化效果。

@keyframes 和 animation 用于创建更复杂的动画序列。

示例 1：变形（转换，Transform）

这个示例展示如何使用 transform 属性来旋转和缩放一个方块。源码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Transform Example</title><style>.box {width: 100px;height: 100px;background-color: blue;transition: transform 0.5s; /* 过渡效果 */}.box:hover {transform: rotate(45deg) scale(1.5); /* 旋转45度并放大1.5倍 */}</style>
</head>
<body><div class="box"></div>
</body>
</html>

示例 2：动画（Animation）

这个示例展示如何使用 animation 属性来创建一个简单的动画，使方块在页面上移动。源码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Animation Example</title><style>.box {width: 100px;height: 100px;background-color: red;position: relative; /* 需要设置为相对定位以便于动画 */animation: move 2s infinite alternate; /* 设置动画 */}@keyframes move {0% {left: 0; /* 起始位置 */}100% {left: 300px; /* 结束位置 */}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

3. CSS的层叠性和优先级

CSS的层叠性

层叠性是CSS（层叠样式表）名称的由来。它指的是多个样式规则可以同时应用于一个HTML元素，最终的样式是这些规则的组合结果。

层叠的主要特点：

多个来源的样式可以合并

继承允许子元素获得父元素的某些属性

当发生冲突时，通过特定的规则决定哪个样式生效

CSS优先级和特异性(Specificity)计算

当多个规则应用于同一元素时，CSS优先级决定了哪个规则会被采用。优先级从高到低排序如下：

类型选择器（如 div、p）：每个计 1 分。

类选择器（如 .class-name）和伪类（如 :hover）：每个计 10 分。

ID选择器（如 #id-name）：每个计 100 分。

内联样式：计 1000 分（通过 HTML 元素的 style 属性设置的样式）。

!important：强制应用样式，忽略通常的优先级计算，但应尽量少用。

注意

如果优先级相同，则后面的规则会覆盖前面的规则。

继承的样式没有优先级。

通用选择器 (*) 和组合器（如 >、+、~）对优先级没有影响。

示例、假设有以下 CSS 规则：

/* 元素选择器 */
p { color: black; } /* 优先级: 1 */

/* 类选择器 */
.text { color: blue; } /* 优先级: 10 */

/* ID选择器 */
#unique { color: green; } /* 优先级: 100 */

/* 内联样式 */
<p style="color: red;">这是红色文本</p> /* 优先级: 1000 */

/* 使用!important */
p { color: purple !important; } /* 覆盖所有其他声明 */

/* 复杂选择器 */
body .content p.highlight { color: orange; } /* 优先级: 1 + 10 + 1 + 10 = 22 */

在这个例子中，如果所有这些规则应用于同一个元素：

若没有 !important 时，内联样式会胜出。

因为有 !important 时，紫色 (purple) 会被应用，无论其他规则如何。

4. 响应式设计

CSS 响应式设计是一种 web 设计方法，旨在使网页在不同屏幕尺寸和设备上都能良好展示和操作。它的核心理念是根据用户的设备和屏幕尺寸动态调整页面布局和样式，这意味着同一个网页可以在桌面电脑、平板电脑和智能手机等各种设备上都能良好地展示和使用。

响应式设计的挑战，某些复杂的桌面布局可能难以在小屏幕上优雅地展示。布局一般采用Flexbox和Grid，这些CSS布局模型天生就具有响应式特性。

响应式设计的关键概念和技术：

☆视口（Viewport）
使用meta标签来控制页面在移动设备上的显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width 设置视口宽度为设备的实际宽度。initial-scale=1.0 设置初始缩放比例为1，即不缩放。
☆流动网格布局（Fluid Grid）
使用相对单位（如百分比）而不是固定单位（如像素）来定义元素大小，以便根据屏幕尺寸自适应调整布局。除了百分比，还可以使用其他相对单位如em、rem、vw、vh等。例如：width: 50%; 或 width: 50vw;
☆灵活的图片（Flexible Images）
图片可以缩放、裁剪或隐藏，以适应不同的屏幕尺寸。如：
img {
max-width: 100%;
height: auto;
}
对于背景图片，可以使用 background-size: cover; 或 background-size: contain;
还可以使用 picture 元素和 srcset 属性来为不同屏幕尺寸提供不同分辨率的图片。
☆媒体查询（Media Queries）
允许针对不同的设备特性（主要是屏幕宽度）应用不同的样式。如：
@media (max-width: 768px) {
.col {
width: 50%;
}
}
@media (max-width: 480px) {
.col {
width: 100%;
}
}
除了 max-width，还可以使用 min-width，或者两者结合使用。

下面给出一个简单完整示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式设计示例</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 流动网格布局 */.container {display: flex;flex-wrap: wrap; /* 允许换行 */justify-content: space-between; /* 均匀分布 */padding: 10px;}.col {background-color: #f2f2f2;border: 1px solid #ccc;box-sizing: border-box; /* 包含内边距和边框 */padding: 20px;margin-bottom: 10px; /* 下边距 */}/* 默认宽度为33.33%（三列布局） */.col {width: calc(33.33% - 20px); /* 减去内外边距以保持间隔 */}/* 灵活的图片 */img {max-width: 100%; /* 图片最大宽度为其父元素宽度 */height: auto; /* 高度自动调整以保持比例 */}/* 媒体查询：当屏幕宽度小于768px时，每列占50%宽度（两列布局）*/@media (max-width: 768px) {.col {width: calc(50% - 20px);}}/* 媒体查询：当屏幕宽度小于480px时，每列占100%宽度（单列布局）*/@media (max-width: 480px) {.col {width: calc(100% - 20px);}}</style>
</head>
<body><div class="container"><div class="col"><h2>标题一</h2><img src="https:// t7.baidu.com/it/u=3698594414,3115881545&fm=193&f=GIF" alt="示例图片1"><p>这是第一列内容。</p></div><div class="col"><h2>标题二</h2><img src="https://t7.baidu.com/it/u=1113080330,2134066741&fm=193&f=GIF" alt="示例图片2"><p>这是第二列内容。</p></div><div class="col"><h2>标题三</h2><img src="https://t7.baidu.com/it/u=977361633,847178935&fm=193&f=GIF" alt="示例图片3"><p>这是第三列内容。</p></div>
</div></body>
</html>

说明（解释）：

示例中使用了几个网页图片（地址链接）。

视口：

使用 <meta name="viewport"> 标签来设置视口，使得页面在移动设备上能够正确显示。

流动网格布局：

使用 Flexbox 创建 .container 类，并通过 flex-wrap 属性允许子元素换行。

每个 .col 元素默认设置为 calc(33.33% - 20px)，这样可以实现三列布局，同时考虑到间隔。

灵活的图片：

图片使用 max-width: 100%; 和 height: auto; 确保其在不同屏幕尺寸下能够自适应缩放。

媒体查询：

当屏幕宽度小于768像素时，.col 的宽度变为 calc(50% - 20px)，实现两列布局。

当屏幕宽度小于480像素时，.col 的宽度变为 calc(100% - 20px)，实现单列布局。

断点（Breakpoints）是指在哪些屏幕宽度下改变网页的布局。这些宽度通常对应于常见设备的屏幕尺寸。常见的断点通常包括：

320px（小型手机）
480px（大型手机）
768px（平板）
1024px（桌面）
1200px（大屏桌面）
这些值可以根据你的具体设计需求进行调整。
/* 小型手机 */
@media (max-width: 320px) {
/* 样式定义 */
}

/* 大型手机 */
@media (max-width: 480px) {
/* 样式定义 */
}

/* 平板 */
@media (max-width: 768px) {
/* 样式定义 */
}

/* 桌面 */
@media (max-width: 1024px) {
/* 样式定义 */
}

/* 大屏桌面 */
@media (max-width: 1200px) {
/* 样式定义 */
}

设计师和开发者可以在不同断点下为网页的各个组件定义不同的样式，以确保它们在各种设备上都能有良好的用户体验。

5.尺寸单位

HTML 和 CSS 中的尺寸单位有些相似，但它们各自的应用场景和具体语义略有不同。以下是一些常用的尺寸单位：

1)绝对长度单位

这些单位在所有设备上的大小都是固定的。

☆ 像素 (px)

最常用的单位之一，一个屏幕上的像素点。例如：

width: 100px;

☆ 英寸 (in)

1in = 96px = 2.54cm。例如：

margin: 2in;

☆ 厘米 (cm)

1cm = 37.8px = 25.2/64in。例如：

padding: 2cm;

☆ 毫米 (mm)

1mm = 1/10 厘米。例如：

border-width: 3mm;

☆ 磅 (pt)

1pt = 1/72英寸。例如：

font-size: 12pt;

☆ 派卡 (pc)

1pc = 12pt。例如：

margin: 1.5pc;

2)相对长度单位

这些单位相对于其他一些长度来定义。

☆ em

相对于元素的字体大小。例如：

padding: 2em;

☆ rem（根em）

相对于根元素的字体大小。例如：

font-size: 1.5rem;

☆ ex

相对于字符"x"的高度。但不常用，因为不同字体的 "x" 高度差异较大。。例如：

line-height: 2ex;

☆ ch

相对于数字"0"的宽度。例如：

width: 40ch;

☆ 视窗宽度单位 (vw)

1vw = 视窗宽度的1%。例如：

width: 50vw;

☆ 视窗高度单位 (vh)

1vh = 视窗高度的1%。例如：

height: 100vh;

☆ 视窗最小尺寸 (vmin)，vw和vh中的较小值。例如：

font-size: 5vmin;

☆ 视窗最大尺寸 (vmax)，vw和vh中的较大值。例如：

width: 50vmax;

☆百分比%单位，相对于父元素的百分比。例如：

width: 50%;

☆ 根据视窗的百分比 (vi, vb)

CSS3的新特性，相对于初始包含块的大小，在水平写作模式下vi=vw，vb=vh。例如：

width: 50vi;

☆ 大写字母高度 (cap)，相对于当前字体的大写字母高度。例如：

line-height: 1.5cap;

☆ 小写字母高度 (lh)，相对于行高。例如：

margin-top: 1lh;

☆ 根元素字体大小 (rlh)，相对于根元素的行高。例如：

margin-bottom: 2rlh;

3)HTML特有的无单位数值

☆<table>的border属性，设置表格边框的宽度，值为0时不显示边框，大于0时显示边框。例如：

☆<input> 的 maxlength 属性，设置输入字段允许的最大字符数。例如：

☆<textarea> 的 cols 和 rows 属性，设置文本区域的列数和行数。例如：

☆<ol> 的 start 属性，设置有序列表的起始编号。例如：

使用建议

对于响应式设计，优先使用相对单位（如em、rem、%、vw、vh）。

对于需要精确控制的元素，可以使用像素（px）。

对于打印样式，可以考虑使用英寸（in）、厘米（cm）或毫米（mm）。

对于文本大小，推荐使用em或rem以便于缩放。

不同的单位适用于不同的场景，选择合适的单位可以让你的设计更加灵活和适应性强。

<length>长度 https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

CSS 的值与单位 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units

附录、权威资料网站

层叠样式表（Cascading Style Sheets，缩写为 CSS）MDN Web Docs 社区https://developer.mozilla.org/zh-CN/docs/Web/CSS

w3schools 教程

中文https://www.w3ccoo.com/Css/ 或https://www.w3schools.cn/Css/

英文https://www.w3schools.com/Css/