CSS基础（总结）
一、CSS简介
1.CSS概念
CSS（层叠样式表）是网页设计的核心语言之一，负责控制网页的外观和布局。
2.CSS引入方式
（1）内部样式表
在 <head> 中使用 <style> 标签，推荐在练习中使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* css样式 */</style>
</head><body></body></html>（2）外部样式表
通过 <link> 引入独立的 .css 文件，最推荐的写法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head><body></body></html>（3）内联样式表
直接将 CSS 样式写在 HTML 元素的 style 属性中的方法，内联样式仅用于特殊情况或快速测试，是一种较不推荐的写法
<p style="color: blue; font-size: 18px; font-weight: bold;">这是一段使用内联样式的文本。
</p>Tips：内联样式表的优先级一般高于外部样式表和内部样式表，但是在外部样式表和内部样式表使用了 !important (这篇文章后面会介绍)时优先级会高于内联样式表。但通常不推荐大量使用内联样式表，因为它不利于代码的维护和复用。
3.CSS优点
（1）提高工作效率：一套CSS可以控制多个页面的样式
（2）便于维护：修改样式无需改动HTML结构
（3）增强表现力：实现丰富的视觉效果
（4）加快页面加载：减少代码冗余
二、CSS选择器
（一）选择器
选择器是一个选择谁（标签）的过程
1.基本结构
选择器{
属性：值
}
2.基本属性
| 类别 | 属性 | 描述 |
|---|---|---|
| 文字 | font-family | 设置字体 |
font-size | 设置字体大小 | |
font-weight | 设置字体粗细 | |
color | 设置文字颜色 | |
text-align | 设置文本对齐方式 | |
text-decoration | 设置文本装饰（如下划线） | |
| 背景 | background-color | 设置背景颜色 |
background-image | 设置背景图片 | |
background-repeat | 设置背景图片是否重复 | |
| 盒模型 | width | 设置元素宽度 |
height | 设置元素高度 | |
margin | 设置外边距（元素外部的间距） | |
padding | 设置内边距（元素内部的间距） | |
border | 设置边框（宽度、样式、颜色） | |
border-radius | 设置边框圆角 | |
| 布局 | display | 设置元素的显示方式 |
position | 设置元素的定位方式 | |
float | 设置元素浮动 | |
| 其他 | opacity | 设置元素透明度（0-1） |
cursor | 设置鼠标悬停时的光标样式 | |
box-shadow | 设置元素阴影 | |
z-index | 设置元素的堆叠顺序（用于定位元素 |
CSS基本属性以及详解将在本篇文章后部分以及之后的 CSS 基础文章中不断讲解补充
（二）基本选择器
1.标签选择器
直接使用HTML标签作为选择器，页面中所有该标签都会应用此样式。
h1 {color: red;
}
<h1>这是标题</h1>2.类选择器
.text {color: red;font-size: 20px
}
<p class="text">段落标签</p>使用点号(.)前缀定义类选择器
谁调用类选择器，谁生效类选择器中的效果
多个标签可以调用一个类选择器
一个标签可以使用多个类选择器，使用时要在中间使用空格进行分开
一个标签中不能同时使用两个class=“ ”
<!-- 正确写法 -->
<p class="text1 text2">段落标签</p><!-- 错误写法 -->
<p class="text1" class="text2">段落标签</p>3.ID选择器
#texts {color: blue;font-size: 50px;
}
<p id="texts">段落标签</p>使用井号(#)前缀定义ID选择器
ID选择器具有唯一性，通常配合JavaScript使用
一个标签不能有多个ID
4.选择器命名规范
（1）可以使用下滑线 横线开始 但是不能使用特殊符号
（2）可以使用汉字来进行命名 但是不推荐使用
（3）不可以使用数字开头 数字可以在命名中间使用
（4）不推荐使用css定义过的关键字进行命名
（三）复合选择器
1.交集选择器
同时满足 p 标签和 .text 类的元素才会生效
<p class="text">这是标签1</p> <!-- 生效 -->
<div class="text">这是标签2</div> <!-- 不生效 -->
p.text {font-size: 50px;
}2.后代选择器
p 标签内所有 .text 类的子元素都会生效（包括嵌套后代）
<div><span class="text">123</span><div class="text">456</div>
</div>
div .text {font-size: 50px;
}后代选择器和交集选择器是不一样的哦！后代选择器的标签后面有一个空格，而交集选择器的标签后面没有空格，书写的时候要注意书写规范。
3.子代选择器
仅对div直接子元素i标签生效
<div><i>1</i> <!-- 生效 --><p><i>2</i> <!-- 不生效 --></p>
</div>
div>i {color: rgb(25, 0, 255);
}4.并集选择器
同时为多个选择器设置相同样式，在实际应用中经常使用，可以减少代码的复杂度
<div class="text">111</div>
<span>222</span>
<ul><li>333</li>
</ul>
.text, li, span {color: red;
}5.属性选择器
/* 只要p中包含class就会执行 */
p[class] {color: red;
}
/* 只要li标签 class命名中包含aa这个字母就会生效 */
li[class*=aa] {color: red;
}
/* 只要li标签 class命名以aa开头就会生效 */
li[class^=aa] {color: red;
}
/* 只要li标签 class命名以aa开头就会生效 */
li[class$=cc] {color: pink;
}
/* 使用<input type="text">这个标签的就会生效 */
input[type=text] {color: red;
}6.伪类选择器
a:link{属性:值;} a{属性:值}效果是一样的。
a:link{属性:值;} 链接默认状态
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放到链接上显示的状态
a:active{属性:值;} 链接激活的状态
a:focus{属性:值; } 获取焦点
a:hover 是鼠标放到链接上的状态样式，任意标签可以使用，非常重要
三、基础属性
1.width
定义元素的宽度
常用单位：
px（像素，如 width: 300px;）
%（相对于父元素的百分比，如 width: 50%;）
vw（视窗宽度的百分比，如 width: 100vw;）
auto（浏览器自动计算，默认值）
2.height
定义元素的高度
若父元素未明确高度，子元素的百分比高度可能无效
常用单位：
px（像素，如 height: 300px;）
%（相对于父元素的百分比，如 height: 50%;）
vh（视窗高度的百分比，如 height: 100vw;）
auto（浏览器自动计算，默认值）
3.background-color
设置元素的背景颜色
CSS 提供了多种表示颜色的方式，每种方法都有其特点和适用场景
以下是 CSS 中常用的颜色表示方法：1. 颜色关键字
CSS 预定义了140+种颜色名称（不区分大小写）：
常用基础颜色：black, white, red, green, blue, yellow, purple, gray 等2. 十六进制表示法
格式：#RRGGBB
红色: #ff0000;3. RGB/RGBA 表示法
红色 : rgb(255, 0, 0);
半透明绿色: rgba(0, 255, 0, 0.5);
rgb(红, 绿, 蓝)：每个参数 0-255
rgba(红, 绿, 蓝, 透明度)：透明度 0（完全透明）-1（完全不透明）
4.综合示例
创建一个宽 300px、高 150px、蓝色背景的矩形区域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;height: 150px;background-color: blue;}</style>
</head>
<body><div class="box"></div>
</body>
</html>四、文本属性
1.font-family
设置字体，详细内容可见 CSS font-family 各名称一览表，如"Arial"
2.font-size
设置字体大小，常用的单位为 px (像素)，浏览器默认字体为16px
首行缩进时，使用的单位是 em ，1em 等于一个字符的大小。
3.font-weight
设置字体粗细，bold最常用，使用后可直接进行加粗
normal 是默认值，浏览器对普通文本的默认值就是 normal
100-900中整百的数也可以设置字体粗细
4.color
设置字体颜色
CSS 提供了多种表示颜色的方式，每种方法都有其特点和适用场景
以下是 CSS 中常用的颜色表示方法：1. 颜色关键字
CSS 预定义了140+种颜色名称（不区分大小写）：
常用基础颜色：black, white, red, green, blue, yellow, purple, gray 等2. 十六进制表示法
格式：#RRGGBB
红色: #ff0000;3. RGB/RGBA 表示法
红色 : rgb(255, 0, 0);
半透明绿色: rgba(0, 255, 0, 0.5);
rgb(红, 绿, 蓝)：每个参数 0-255
rgba(红, 绿, 蓝, 透明度)：透明度 0（完全透明）-1（完全不透明）
5.text-align
文字位置，属性值: left right center
6.text-decoration
文本修饰，下划线 underline ，删除线 line-through ，没有 none
7.font-style
字体倾斜，倾斜 italic ，默认值 normal
8.line-height
字体的行高，可以设置文本元素在多少像素内进行垂直居中
如果想要将文本进行居中，那居中的高度就是他的值
9.text-indent
首行缩进，一般首行缩进使用的单位是em，1em等于一个字符的大小
text-indent: 2em;
10.综合示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font {width: 500px;height: 500px;background-color: pink;/* 字体 */font-family: 'Courier New', Courier, monospace;/* 字号 em px */font-size: 50px;/* 字体加粗 bold 100-900 normal*/font-weight: bold;/* 字体颜色 */color: red;/* 文字位置 left right center */text-align: center;/* 文本修饰 下划线underline 删除线line-through 没有none*/text-decoration: underline;/* 字体倾斜 倾斜italic 默认值normal */font-style: normal;/* 行高 */line-height: 500px;}</style>
</head>
<body><div class="font">这是文本</div>
</body>
</html>五、背景属性
1. background-color
设置元素的背景颜色
CSS 提供了多种表示颜色的方式，每种方法都有其特点和适用场景
以下是 CSS 中常用的颜色表示方法：1. 颜色关键字
CSS 预定义了140+种颜色名称（不区分大小写）：
常用基础颜色：black, white, red, green, blue, yellow, purple, gray 等2. 十六进制表示法
格式：#RRGGBB
红色: #ff0000;3. RGB/RGBA 表示法
红色 : rgb(255, 0, 0);
半透明绿色: rgba(0, 255, 0, 0.5);
rgb(红, 绿, 蓝)：每个参数 0-255
rgba(红, 绿, 蓝, 透明度)：透明度 0（完全透明）-1（完全不透明）
div {background-color: #f0f0f0; /* 灰色背景 */
}2. background-image
设置背景图片（可以是本地图片或网络链接图片）
div {background-image: url("bg.jpg");
}3. background-repeat
控制背景图片是否重复平铺。
repeat（默认，水平和垂直重复）
no-repeat（不重复）
repeat-x（仅水平重复）
repeat-y（仅垂直重复）
div {background-image: url("bg.png");background-repeat: no-repeat;
}一般情况下，为了方便 background-image 和 background-repeat 采用连写
div {background: url("bg.png") no-repeat;
}4. background-position
调整背景图片的位置，使用 left、right、center、top、bottom 或具体数值
一般情况下，背景定位属性有两个值。第一个值是水平方向，第二个值是垂直方向，如果只设置一个值，默认是水平方向，第二个值默认为居中
div {background-position: center top; /* 居中靠上 */
}六、CSS三大类标签元素及其转换
1.块级元素
代表元素标签：div p h li
特点：独占一行，可以设置宽高
2.行内元素
代表元素标签：span i s u b a
特点：不独占一行 不可以设置宽高
3.行内块级元素
代表元素标签：img input
特点：不独占一行 可以设置宽高
4.转换元素属性
隐藏元素 display: none;
将任意元素转换为块级元素 display: block;
将任意元素转换为行内块元素 display: inline-block;
将任意元素转换为行内元素 display: inline;
七、CSS 三大核心特性
CSS的核心特性包括层叠性、继承性、优先级，它们决定了浏览器如何解析和应用 CSS 规则。
1. 层叠性
（1）定义：当多个 CSS 规则作用于同一个元素时，浏览器会根据来源、优先级、顺序决定最
终生效的样式。
（2）层叠规则（优先级从高到低）
!important（强制优先级最高，在属性值后面直接加）
行内样式（style=""）
ID 选择器（#id）
类/伪类/属性选择器（.class, :hover, [type="text"]）
标签/伪元素选择器（div, ::before）
通配符/继承样式（*, 继承的样式）
2. 继承性
（1）定义：某些 CSS 属性会从父元素自动传递给子元素，但并非所有属性都继承。
（2）可继承的常见属性
文本相关：font-family, color, line-height, text-align
列表相关：list-style, list-style-type
（3）不可继承的常见属性
盒模型：width, height, margin, padding, border
定位：position, top, left, z-index
背景：background, background-color
（4）特殊：a不会继承父级标签的文字颜色
h系列不会继承父级标签的文字大小
3. 优先级
定义：当多个选择器作用于同一个元素时，浏览器通过权重计算决定哪个样式生效。
权重计算规则（从高到低）
| 选择器类型 | 权重值 |
|---|---|
!important | ∞（无限大） |
行内样式（style=""） | 1000 |
ID 选择器（#id） | 100 |
类/伪类/属性选择器（.class, :hover） | 10 |
标签/伪元素选择器（div, ::before） | 1 |
通配符/继承样式（*） | 0 |
八、盒模型
1.定义
在CSS中，每个元素都被表示为一个矩形盒子，这个盒子由内容区域(content)、内边距(padding)、边框(border)和外边距(margin)组成。
2.组成
（1）内容（content）：这是盒子中的文本和图像等实际内容，可以通过设置 width 和 height 属性来控制其大小。
（2）内边距（padding）：围绕内容的空间，可以通过 padding 属性来设置。内边距的背景色会延伸到该区域。
（3）边框（border）：紧随内边距之外的线框，可以通过 border 属性来定义其样式和厚度。
（4）外边距（margin）：盒子外部的空间，用于与其他元素之间的间隔，可以通过 margin 属性来设置。
3.分类
（1）标准盒模型（W3C盒模型）：在这个模型中，元素的 width 和 height 只包括内容的尺寸，而padding 和 border 被加到这个尺寸之外。
（2）怪异盒模型（IE盒模型）：在这个模型中，元素的 width 和 height 包括内容、 padding 和border 的尺寸。
CSS3 引入了 box-sizing 属性，允许开发者在标准盒模型和怪异盒模型之间切换。使用 box-sizing: content-box 会应用标准盒模型，而 box-sizing: border-box 会应用怪异盒模型。
（一）边框（border）
1.边框的相关定义
边框可由三个属性进行定义
.element {border-style: solid; /* 边框样式：实线 */border-width: 2px; /* 边框宽度 */border-color: #333; /* 边框颜色 */
}为方便书写，边框也可使用简写形式
.element {border: 2px solid #333; /* 宽度 样式 颜色 */
}注意：在简写形式中，样式是必须的，颜色和宽度可以省略（将使用默认值）。
如果边框不设置大小，默认是1px；
如果边框不设置颜色，默认是黑色；
2.常见的边框样式
实线：solid
虚线：dashed
点线：dotted
3.单边框的书写
在边框中，可以单独设置某一方向的边框
.element {border-top: 1px solid red;border-right: 2px dashed blue;border-bottom: 1px dotted green;border-left: 2px dotted black;
}4.示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.element {width: 200px;height: 200px;border-top: 10px solid red;border-right: 20px dashed blue;border-bottom: 10px dotted green;border-left: 20px dotted black;}</style>
</head><body><div class="element"></div>
</body></html>
（二）内边距（padding）
1.内边距的相关定义
内边距（padding）包括四个值，分别是上内边距，下内边距，左内边距，右内边距。
2.单边内边距的书写
.element {padding-top: 10px;padding-right: 15px;padding-bottom: 10px;padding-left: 15px;
}3.多边内边距的书写
为使用方便，内边距可在一行进行书写，值分别与四条边进行对应
/* 四个值：上 右 下 左 */
.element {padding: 20px 30px 40px 50px;
}/* 两个值：上和下 左和右 */
.element {padding: 20px 40px;
}/* 三个值：上 左和右 下 */
.element {padding: 20px 30px 40px;
}/* 一个值：所有方向相同 */
.element {padding: 20px;
}（三）外边距（margin）
外边距的设置方式与内边距类似
1.外边距的相关定义
外边距（margin）包括四个值，分别是上外边距，下外边距，左外边距，右外边距。
2.单边外边距的书写
.element {margin-top: 10px;margin-right: 15px;margin-bottom: 10px;margin-left: 15px;
}3.多边外边距的书写
为使用方便，外边距可在一行进行书写，值分别与四条边进行对应
/* 四个值：上 右 下 左 */
.element {margin: 20px 30px 40px 50px;
}/* 两个值：上和下 左和右 */
.element {margin: 20px 40px;
}/* 三个值：上 左和右 下 */
.element {margin: 20px 30px 40px;
}/* 一个值：所有方向相同 */
.element {margin: 20px;
}（四）内容（content）
1.默认文字大小
浏览器中文字的默认大小为16px，但可以通过CSS修改
body {font-size: 16px; /* 默认值，通常不需要显式设置 */
}2.行高
行高是控制文本行之间的垂直间距
行高 = 文字高度 + 上下边距
除了px，行高都是与文字大小的乘积
p {line-height: 1.5; /* 无单位值，是字体大小的1.5倍 */
}p {line-height: 24px; /* 固定值 */
}（五）盒模型的大小计算
1.标准盒模型（W3C盒模型）
总宽度 = width（包含内容） + 左右padding + 左右border + 左右margin
总高度 = height（包含内容）+ 上下padding + 上下border + 上下margin
2.怪异盒模型（IE盒模型）
总宽度 = width（包含内容、内边距 padding 和边框 border ）+ 左右margin
总高度 = height（包含内容、内边距 padding 和边框 border ）+ 上下margin
九、盒模型示例
综合以上的知识点进行实际应用，给出如下示例
进行页面初始化，设置页面中所有盒模型的内外边距全为0：
* {margin: 0;padding: 0;box-sizing: border-box;
}设置页面中的css样式：
.container {width: 300px;margin: 20px auto;padding: 20px;border: 2px dashed #ccc;
}.box {background-color: #f5f5f5;padding: 15px;border: 1px solid #333;margin-bottom: 15px;
}h2 {font-size: 20px;margin-bottom: 10px;
}p {line-height: 1.6;
}最终HTML页面代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型示例</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 300px;margin: 20px auto;padding: 20px;border: 2px dashed #ccc;}.box {background-color: #f5f5f5;padding: 15px;border: 1px solid #333;margin-bottom: 15px;}h2 {font-size: 20px;margin-bottom: 10px;}p {line-height: 1.6;}</style>
</head>
<body><div class="container"><div class="box"><h2>标题一</h2><p>这是一个使用盒模型的示例段落。注意内边距、边框和外边距的效果。</p></div><div class="box"><h2>标题二</h2><p>另一个使用相同样式的盒子，展示了CSS的一致性和可重用性。</p></div></div>
</body>
</html>页面效果图如下：
十、页面布局技术
页面布局技术经历了从传统方法到现代强大模型的演进。以下是目前所有主流的页面布局技术，我将它们分为三类：传统布局、现代布局和响应式布局技术。
（一）传统布局技术
传统布局技术基于文档流、浮动流和定位流，这些是CSS2.1时代的主要布局手段，现在多用于特定场景或维护老项目。
1.文档流
（1）描述：浏览器默认的、未经任何控制的布局方式。
（2）如何实现：块级元素垂直排列，内联元素水平排列。
（3）适用场景：简单文本页面、文章内容区域等基础结构。
2.浮动流
（1）描述：最初用于文字环绕图片，后被广泛用于实现多栏布局。
（2）如何实现：使用 float: left/right; 让元素并排。
（3）缺点：布局脆弱，需要大量计算和清除浮动，代码维护困难。
（4）现状：不推荐用于主要布局，但其“文字环绕”的本职工作依然无可替代。
3.定位流
（1）描述：通过 position 属性精确控制元素位置。
（2）如何实现：
——relative: 相对自身原位置偏移，原空间保留。
——absolute: 相对于最近的非 static 定位祖先元素定位，脱离文档流。
——fixed: 相对于浏览器视口定位，脱离文档流（常用于固定导航栏、弹窗）。
——sticky: 在滚动时在 relative 和 fixed 之间切换（常用于粘性表头）。
（3）适用场景：叠加元素（如弹窗、下拉菜单）、固定元素、微调元素位置。不适合多栏主体结构布局。
（二）现代布局技术
现代布局技术(CSS3)是目前构建页面布局的首选和标准，功能强大、灵活且易于维护。
1.Flex 布局
（1）描述：专门为一维布局（行或列）设计，提供了一种更有效的方式来分配容器内项目之间的空间和对齐项目。
（2）核心思想：通过父容器来控制子项目的排列、顺序、对齐、大小和分布。
（3）适用场景：导航栏，垂直居中，不均匀分布的内容区域，移动端页面结构等
2.Grid 布局
（1）描述：这是最强大的布局系统，专为二维布局（同时处理行和列）设计。将页面划分为网格，可以任意将项目放入这些网格单元格中。
（2）核心思想：先定义网格结构（几行几列），再往网格里放东西。
（3）适用场景：整个页面的总体规划，复杂的杂志式、图片墙布局，任何需要同时精确控制行和列的布局等
3.Flex 和 Grid 如何选择
（1）用 Flex：当你需要针对一个维度（一行或一列）进行布局时。例如：导航栏、一组按钮、垂直居中的卡片。
（2）用 Grid：当你需要针对两个维度（整个页面的行和列）进行布局时。例如：整个页面的框架、照片墙、仪表盘。
（三） 响应式布局技术
响应式布局技术不是独立的布局模型，而是与Flex、Grid等技术结合，使页面能适应不同屏幕尺寸的理念和方法。
/* 基础样式（移动端优先） */
.container {width: 100%;
}/* 平板设备（≥768px） */
@media (min-width: 768px) {.container {display: flex;width: 90%;margin: 0 auto;}
}/* 桌面设备（≥1200px） */
@media (min-width: 1200px) {.container {width: 1200px;}
}本文主要介绍页面的传统布局技术（浮动布局和定位布局），其他内容将在CSS3模块详细讲解！
十一、页面布局——浮动流
1.定义
浮动最初的设计目的是为了实现文字环绕图片的排版效果（类似于杂志中的版式）。它通过 float 属性来实现，会使元素脱离正常的文档流，并尽可能地向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘为止。
2.属性值
| 属性值 | 描述 |
|---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动，处于标准文档流中。 |
那么利用浮动进行一个简单的布局：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动示例</title><style>.fl {width: 200px;height: 200px;background-color: red;float: left;}.fr {width: 200px;height: 200px;background-color: blue;float: right;}</style>
</head><body><div class="fl"></div><div class="fr"></div>
</body></html>效果如下：
3.浮动的特性与影响
（1）脱离文档流
——浮动元素会从正常的文档布局中移除，不再占据原来的空间。
——它后面的非浮动块级元素会当它不存在一样，向上移动占据其原本的位置。
——但是，它后面的内联元素（通常是文字） 会感知到它的存在，并环绕在浮动元素的周围。这正是“文字环绕”效果的实现原理。
示例1：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动示例</title><style>.fl {width: 200px;height: 200px;background-color: red;float: left;}.fr {width: 200px;height: 200px;background-color: blue;float: right;}.normal {width: 100%;height: 300px;background-color: rgb(200, 0, 255);}</style>
</head><body><div class="fl"></div><div class="fr"></div><div class="normal"></div>
</body></html>示例1效果如下：
如上图所示，浮动元素（红色方块和蓝色方块）会从正常的文档布局中被移除，脱离文档流，从而不再占据原来的空间。那么它后面的非浮动块级元素（紫色方块）就会当它不存在一样，向上移动占据其原本的位置。
示例2：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字环绕示例</title><style>.container {width: 80%;max-width: 800px;margin: 50px auto;padding: 20px;border: 1px solid #e0e0e0;}.fl {/* 核心：设置浮动方向 */float: left;/* 图片 */width: 200px;height: 200px;background-color: red;/* 与文字的间距 */margin-right: 20px;margin-bottom: 15px;}</style>
</head>
<body><div class="container"><h2>文字环绕示例</h2><div class="fl"></div><p>这是一个文字环绕图片的示例。当图片设置了 float: left 之后，文字会自动环绕在图片的右侧和下方。这种布局在文章、新闻和博客中非常常见，能够让图文排版更加紧凑和美观。</p><p>浮动元素会脱离正常的文档流，但不会脱离文本流，所以文字会自动避开浮动元素的区域，形成环绕效果。通过设置 margin 可以调整图片与文字之间的距离，让布局更加舒适。</p><p>这段文字会继续环绕在图片周围，直到图片下方的空间足够容纳完整的行，之后文字会恢复正常的排列方式。这种布局方式能够有效利用空间，同时增强内容的可读性。</p></div>
</body>
</html>
示例2效果如下：
（2）收缩与包裹
一个块级元素一旦被浮动，它的宽度会从默认的 100% 变为 auto，即由内容宽度来决定（除非手动设置一个宽度）；高度默认为0。
（3）破坏性
由于浮动元素脱离了文档流，其父容器的高度无法被撑开，如果父容器内没有其他非浮动内容，就会出现“高度塌陷”的问题，布局会变得混乱。
4. 清除浮动（重点）
清除浮动是为了解决父元素高度塌陷的问题，是使用浮动时必须掌握的核心技巧。
清除浮动不是不使用浮动，而是移除浮动带来的不利影响
清除浮动的核心属性：clear
clear 属性规定元素的哪一侧不允许出现其他浮动元素。
浏览器会为设置了
clear属性的元素添加足够的上外边距（top margin），使其垂直下降到所有指定侧的浮动元素下方。
| 属性值 | 描述 |
|---|---|
clear: left; | 元素的左侧不允许有浮动元素。 |
clear: right; | 元素的右侧不允许有浮动元素。 |
clear: both; | 元素的左右两侧都不允许有浮动元素。 |
clear: none; | 默认值。允许浮动元素出现在两侧。 |
清除浮动一共有三个方法。
（1）方法一及其示例
方法一：使用 clear 属性
在浮动元素的父容器末尾添加一个空的块级元素（如 <div>），并为其设置 clear 属性。（只有块级元素能清除浮动）
缺点：在HTML中添加了毫无语义的冗余标签，难以维护，不推荐使用。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.container {border: 3px solid #3498db;}.box {float: left;width: 100px;height: 100px;background-color: red;}/* 清除浮动 */.clear-box {clear: both;}</style>
</head><body><div class="container"><div class="box"></div><div class="box"></div><div class="clear-box"></div> <!-- 空清理元素 --></div><p>后续的正常内容</p>
</body></html>
如果不清除浮动，则会发生下图所示的结果，所以清除浮动是非常重要的。
（2）方法二及其示例
方法二：对父元素使用 overflow 属性
为浮动元素的父容器设置 overflow: auto; 或 overflow: hidden;这会触发 BFC (块级格式化上下文)，而 BFC 可以包含浮动元素。
优点：代码简洁。
缺点：可能会隐藏内容或触发滚动条。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.container {border: 3px solid #3498db;overflow: hidden;}.box {float: left;width: 100px;height: 100px;background-color: red;}</style>
</head><body><div class="container"><div class="box"></div><div class="box"></div></div><p>后续的正常内容</p>
</body></html>（3）方法三及其示例
方法三：使用伪元素 ::after
这是最推荐使用的方法。通过 CSS 为父容器添加一个看不见的块级伪元素，并让它清除浮动。-创建伪元素：使用 ::after 在父容器内容的最后面创建一个伪元素。
-将其设为块级元素：display: block; 才能正确应用 clear 属性。
-清除浮动：clear: both; 确保这个伪元素落在所有浮动元素的下方。
-隐藏伪元素：content: ""; 内容为空（height: 0; 和 visibility: hidden; 确保它不可见。）优点：保证HTML结构干净，没有多余的标签；定义一个 .clear 类，可以在整个项目中使用，可复用性高；最重要的是浏览器兼容性好。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.container {border: 3px solid #3498db;overflow: hidden;}.box {float: left;width: 100px;height: 100px;background-color: red;}.clear ::after{display: block;clear: both;content: "";/* 以下为可选，确保兼容性和隐藏 */height: 0;visibility: hidden;}</style>
</head><body><div class="container clear"><div class="box"></div><div class="box"></div></div><p>后续的正常内容</p>
</body></html>随着 Flex 布局和 Grid 布局的普及，浮动已经不再是页面布局的首选工具。Flex 布局和 Grid 布局的容器天生不会出现高度塌陷问题。它们有自己的排列规则，根本不需要 clear 属性。
浮动的本职工作是实现文字环绕图片的效果。这依然是浮动最合适、最简单的应用场景。在这种场景下，你通常不需要清除浮动，因为文本的环绕正是你想要的效果。
当然许多老项目的代码仍然使用浮动进行布局，因此理解清除浮动对于维护和修改这些项目至关重要。
5.overflow
| 属性值 | 作用说明 |
|---|---|
overflow:visible | 默认值，内容直接溢出容器，不裁剪、不出现滚动条（表格常用默认值，易导致布局错乱） |
overflow:hidden | 裁剪溢出内容，不显示滚动条，溢出部分完全隐藏（需确保隐藏内容非关键信息） |
overflow:scroll | 无论内容是否溢出，均显示水平 / 垂直滚动条（避免滚动条 “忽显忽隐” 导致布局跳动） |
overflow:auto | 仅当内容溢出时显示对应方向的滚动条（按需显示，更简洁，推荐优先使用） |
overflow-x: | 单独控制水平方向溢出（表格宽度过载时核心属性） |
overflow-y: | 单独控制垂直方向溢出（表格行过多时核心属性） |
十二、页面布局——定位流
定位布局提供了最精确的元素位置控制能力，优先级最高。
文档流 < 浮动流 < 定位流
设置定位必须指定位置属性
定位方向：left | right | top | bottom
（一）静态定位
静态定位就是文档流，属于默认值。
position: static;（二）绝对定位
绝对定位是最常用的定位方式之一
1.绝对定位的核心特性
（1）脱离文档流：元素使用绝对定位后不再占据原来的位置
（2）默认定位基准：元素位置默认从浏览器的视口出发
（3）父级定位影响：
如果父元素没有设置定位，子元素绝对定位以浏览器为基准
如果父元素设置了定位(通常是relative)，子元素绝对定位以父元素为基准
（4）元素类型转换：行内元素使用绝对定位后会转换为行内块元素
2.绝对定位的注意点
（1）绝对定位通常与相对定位配合使用
实践中常用"子绝父相"模式：子元素绝对定位，父元素相对定位（2）使用绝对定位后，若父元素没有使用相对定位，则会逐级向上一级寻找，直到找到 body （浏览器视口）
.box {position: absolute;right: 100px;bottom: 200px;
}3.脱离文档流、默认定位基准
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: blue;}.box3{width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body></html>
刚开始我不进行任何定位，div作为块级元素，独占一行。根据如上代码生成如上图所示的效果。
修改 box2 的 CSS 属性后，效果如下图所示：
.box2{width: 200px;height: 200px;background-color: blue;position: absolute;top: 50px;left: 100px;
}
修改属性后，box2 从浏览器视口左上角出发进行偏移，并且不占据原来的位置了，影响了其他元素的布局（ box3 占据了原来 box2 的位置）。
（三）相对定位
1.相对定位的核心特性
（1）位置基准：从元素自身原始位置出发进行偏移（脱标）
（2）保留原空间：仍然占据原来的位置，不影响其他元素布局
（3）元素类型：行内元素使用相对定位不会转换为行内块元素
（4）常见用途：通常作为绝对定位子元素的容器(子绝父相)
.box {position: relative;left: 100px;top: 50px;
}2.位置基准、保留原空间
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: blue;}.box3{width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body></html>
刚开始我不进行任何定位，div作为块级元素，独占一行。根据如上代码生成如上图所示的效果。
修改 box2 的 CSS 属性后，效果如下图所示：
.box2{width: 200px;height: 200px;background-color: blue;position: relative;top: 50px;left: 100px;
}
修改属性后，box2从自身原始位置出发进行偏移，并且原来的位置仍然被占据，不影响其他元素的布局，其他的元素并不会因为box2的移动而改变自身的位置。
3.子绝父相
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box1{width: 300px;height: 300px;background-color: red;position: relative;}.box2{width: 200px;height: 200px;background-color: blue;position: absolute;top: 50px;left: 100px;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>
子元素 box2 相对于父元素 box1 的位置改变而改变。
（四）固定定位
固定定位是让元素相对于浏览器窗口固定位置
1.固定定位的核心特性
（1）视口基准：相对于浏览器视口进行定位
（2）滚动不变：即使页面滚动，元素位置保持不变
（3）常见应用：悬浮按钮、固定导航栏、回到顶部按钮等（4）元素类型转换：行内元素使用固定定位后会转换为行内块元素
.box {position: fixed;right: 0;bottom: 0;
}（五）粘性定位
粘性定位是相对定位和固定定位的结合
1.粘性定位的核心特性
（1）混合特性：默认表现为相对定位，到达阈值后变为固定定位
（2）必须设置阈值：必须搭配 top / left / right / bottom 中的至少一个属性使用
（3）作用范围：在父元素范围内有效，滚动出父元素后恢复原状
.nav {position: sticky;top: 0;
}2.粘性定位的注意点
（1）父容器的高度或宽度必须大于粘滞元素的高度或宽度，否则没有滚动空间，粘滞效果无法触发。
（2）粘滞元素只能在其父容器内固定。当父容器完全滚出视口时，元素会跟随父容器离开。
（六）定位实现的经典布局
这种布局方式实现了经典的"头部+侧边栏+主内容区"布局，适合后台管理系统等场景。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box1 {position: absolute;left: 0;right: 0;height: 100px;background-color: red;}.box2 {position: absolute;top: 100px;left: 0;width: 200px;bottom: 0;background-color: blue;}.box3 {position: absolute;left: 200px;top: 100px;bottom: 0;right: 0;background-color: pink;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body></html>
（七）定位流总结
1.定位方式选择
需要元素相对于父元素定位：使用绝对定位+相对定位(子绝父相)
需要元素相对于视口固定：使用固定定位
需要滚动时固定某元素：使用粘性定位
2.性能考虑
过多使用绝对定位会影响页面性能
固定定位和粘性定位在滚动时可能引发重绘问题
3.响应式适配
使用百分比而非固定值提高布局灵活性
结合媒体查询适应不同屏幕尺寸
4.z-index使用
定位元素可使用z-index控制堆叠顺序（注意z-index只在定位元素上生效）
（1）在 CSS 中，z-index 是一个用于控制元素在 z 轴（垂直于屏幕的轴线）上堆叠顺序的属性。它决定了元素在视觉上哪个会显示在更上层，哪个会被其他元素覆盖。
（2）z-index 数值越大越靠上，值较高的元素会显示在值较低的元素上方。
（3）支持负值：负值会使元素显示在普通元素下方（可能被父元素背景覆盖）
合理使用 z-index 可以避免元素意外遮挡，保持界面的视觉层次清晰。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS z-index 示例</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {max-width: 1000px;margin: 0 auto;background-color: rgba(255, 255, 255, 0.9);border-radius: 15px;padding: 25px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}h2 {color: #3498db;margin: 25px 0 15px;padding-bottom: 10px;border-bottom: 2px solid #eaeaea;}p {margin-bottom: 20px;font-size: 1.1rem;}.example {border: 2px dashed #bdc3c7;padding: 20px;margin: 25px 0;border-radius: 10px;position: relative;height: 300px;background: #f9f9f9;overflow: hidden;}.box {width: 150px;height: 150px;display: flex;justify-content: center;align-items: center;color: white;font-weight: bold;font-size: 1.2rem;position: absolute;border-radius: 8px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);transition: all 0.3s ease;}/* 基本z-index示例 */.z-index-1 {background: linear-gradient(135deg, #e74c3c, #c0392b);top: 50px;left: 50px;z-index: 1;}.z-index-2 {background: linear-gradient(135deg, #2ecc71, #27ae60);top: 80px;left: 80px;z-index: 2;}.z-index-3 {background: linear-gradient(135deg, #3498db, #2980b9);top: 110px;left: 110px;z-index: 3;}</style>
</head>
<body><div class="container"><h2>基本 z-index 示例</h2><p>z-index值越高，元素在堆叠顺序中的位置越高。</p> <div class="example"><div class="box z-index-1">z-index: 1</div><div class="box z-index-2">z-index: 2</div><div class="box z-index-3">z-index: 3</div></div>
</body>
</html>十三、页面初始化
不同浏览器对 HTML 元素有不同的默认样式，这可能导致相同代码在不同浏览器中显示效果不一致。为解决这个问题，开发者通常会使用 CSS 初始化代码来统一浏览器默认样式。
以下是主流浏览器初始化方案的总结和实现：
/* 1. 基础重置 */
* {margin: 0;padding: 0;box-sizing: border-box; /* 统一盒模型为border-box */
}/* 2. 列表元素 */
ul, ol {list-style: none; /* 移除默认列表样式 */
}/* 3. 文本元素 */
h1, h2, h3, h4, h5, h6 {font-size: inherit;font-weight: inherit; /* 继承父元素字体样式 */
}/* 4. 链接元素 */
a {color: inherit;text-decoration: none; /* 移除默认链接样式 */background-color: transparent; /* 解决IE链接背景问题 */
}/* 5. 表格元素 */
table {border-collapse: collapse; /* 合并表格边框 */border-spacing: 0;
}/* 6. 表单元素 */
input, button, select, textarea {font-family: inherit; /* 继承字体样式 */font-size: inherit;line-height: inherit;color: inherit;background: transparent;border: none;outline: none; /* 移除默认焦点样式 */
}textarea {resize: vertical; /* 仅允许垂直 resize */overflow: auto; /* 确保滚动条一致性 */
}button,
input[type="button"],
input[type="reset"],
input[type="submit"] {cursor: pointer; /* 鼠标悬停显示手型 */
}/* 7. 图片和媒体元素 */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {display: block; /* 移除 inline 元素默认间距 */max-width: 100%; /* 确保媒体元素不超出容器 */height: auto; /* 保持宽高比 */
}/* 8. 引用元素 */
blockquote, q {quotes: none;
}blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}/* 9. 其他元素 */
hr {box-sizing: content-box;height: 0;overflow: visible; /* 解决Firefox下的问题 */
}pre {font-family: monospace, monospace; /* 确保等宽字体一致性 */font-size: inherit;
}/* 10. 辅助性样式 */
[hidden] {display: none !important; /* 确保hidden属性生效 */
}/* 11. 基础字体设置 */
html {font-size: 16px; /* 设置基础字体大小 */line-height: 1.5; /* 设置基础行高 */
}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;/* 使用系统默认字体栈，提升跨平台一致性 */
}