黑马程序员前端h5+css3

银烛木2026-02-12 23:39

HTML5语义标签

超文本标记语言

html 复制代码 
HyperText Markup Language

是一种用来告知浏览器如何组织页面的标记语言。

知识点：

  1. 标记也称为标签（元素）。
  2. 大小写都可以，建议小写。
  3. HTML 由一系列的标签组成。
    简单说，学习HTML 就是学习标签

标签语法：

（标签组成）：

符号：标签用 < > 尖括号表示

组成：开始标签、结束标签和内容

别称：标签也称为元素

（标签分类）：

大部分都是 双标签

少数单标签

（开发技巧）：

Trae编辑器中直接写标签，然后按Tab或者回车即可

HTML文档

文档类型

HTML5 的文档类型声明，它告诉浏览器当前页面是使用 HTML5 规范编写的

html元素
元素。这个元素包裹了页面中所有的内容,有时被称为根元素 在HTML中，lang 用于声明网页的主要语言，帮助浏览器、搜索引擎 等正确处理页面内容。 en代表英语，这意味着该页面的主要语言是英语 zh-CN代表是中文。

html 复制代码 
<head> 元素

头部元素。包含了文档的元（meta）数据。

主要保存供机器处理的信息，而非人类可读信息

字符集

该文档的字符集设置为 UTF-8

UTF-8 包括绝大多数人类书面语言的大多数字符。

有了这个设置，页面现在可以处理它可能包含的任何文本内容，如果

不加这句话可能会引起乱码。

移动端页面适配

开发者能确保网页在移动设备上以最佳状态呈现，提升用户浏览体验。

title元素

这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容

body元素

包含了页面所有显示在页面上的内容，包含文本、图片、视频、游戏、可

播放音频轨道等等

标签关系

并列关系：

也称为兄弟关系

html 复制代码 
<head></head>
<body></body>

嵌套关系：

也称为父子关系

html 复制代码 
<head>
	<title></title>
</head>

HTML的标题和段落

1.标题标签 h

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

显示特点

标题文字会加粗显示，并且每行只显示一个

h1 唯一性

最好只对每个页面使用一次

html 复制代码 
 <h1>

这是顶级标题

如：新闻的标题、网页的logo部分

层次性

在现有的六个标题层次中，除非觉得有必要否则应该

争取每页使用不超过三个

1.段落标签 p

HTML 元素表示文本的一个段落。

强调与重要性标签

HTML 也提供了相应的标签，使其具有加粗、倾斜、下划线等效果，来着重强调某些文字。

注释标签

在 HTML 中，注释标签用于添加不会在浏览器中显示的注释或说明。

html 复制代码 
<!-- 这里是注释内容 -->

快捷键： ctrl + /

特点：

1.注释内容不会显示在网页上

2.可以跨越多行

3.常用于代码说明、临时禁用代码或给其他开发者留

块级元素和内联元素

（块级元素）：

  • 块级元素独占一行
  • 它可以嵌套其他元素
  • 常见的比如p、h、div等

（内联元素）：

  • 可以一行放多个，通常与文本一起使用
  • 不能嵌套块级元素，可以嵌套其他内联元素。
  • 常见比如 strong、em、a等

HTML标签分类：

在 HTML 中有两种元素类别:

  • 块级元素和内联元素。
  • 分类不同决定着展示形式不一样。

注意事项：

  • 段落p标签里面不要放其他块级元素。
  • 段落里面主要放文字相关，比如内联元素。
  • 但是元素分类不是一直不可更改的，后面的css可以通过display改变他们显示模式。

HTML中的图片



路径

在HTML中，路径用于指定文件（如图像、样式表或其他网页）的位置。

1.相对路径

相对于当前文件位置的路径

2.绝对路径

从根目录开始的完整路径

视频和音频

1.视频





2.音频

创建超链接

超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分。

语法：

html 复制代码 
<a href=""></a>
<a href="https://www/deepseek.com/">DeepSeek官网</a>

href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。

链接可以包含除了自身之外的其他元素，比如 文字、标题、图片、视频等。

其他属性：

(title 属性):

鼠标悬停的提示文字

(target 属性):

打开页面的方式：

_self 当前窗口打开(默认)

_blank 新窗口打开

1.空连接

在HTML中，空连接通常指的

是没有实际指向目标的超链

接，符号是 #

html 复制代码 
<a href="#">商品列表</a>

2.下载链接

如果是exe或者压缩包点击

是下载

html 复制代码 
<a href="download.exe">下载window版本</a>

3.邮件链接

某些简单场景或个人使用情

况下使用。

公司或者流量大的网站慎用，

有垃圾邮件等风险，其他方

案替代。

html 复制代码 
<a href="mailto:pig@mozilla.org">给我发邮件</a>



布局标签

1.网站结构标签

网页的外观多种多样，但是

大概都包含：

页眉、导航栏、主内容、侧

边栏、页脚等

2.无语义标签

没有合适语义标签时，在进

行一些布局时候可以选择：

div 和 span 标签

3.列表标签

HTML 列表是网页内容组织

的重要元素。可以让我们显

示内容更加整齐有序


列表标签

1.无序列表ul

顺序无关紧要的列表

2.有序列表ol

顺序有关紧要的列表

3.描述列表dl

标记一组项目及相关描述

表格

表格作用： 以结构化方式展示行列数据，使信息清晰、易读且便于对比。

网页场景： 主要用于数据展示或者后台管理系统的信息展示。


表单


表单容器

表单控件

1.表单控件-input



2.表单控件-textarea

html 复制代码 
<textarea>

HTML 元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景，例如评论或反馈表单。

textarea 多行文本框也称为文本域

3.表单控件-select

3.表单控件-button

标签定义一个按钮。元素内部可以放置内容，比如文本或图像

辅助标签-label

表示用户界面中某个元素的说明。提升可访问性（点击标签可聚焦输入框）

字符实体

字符实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。

常用于显示保留字符和不可见的字符（如"不换行空格"）

综合案例

CSS3基础知识

CSS简介：

CSS (Cascading Style Sheets，层叠样式表）。是用来控制网页在浏览器中的显示外观的语言。

CSS分类：

（位置分类）：

1.内联样式表（行内样式表）

样式写到标签内部，可以控制当前标签的样式，特殊情况使用。

html 复制代码 
<p style="color:red; font-size:14px;">文字内容</p>

2.内部样式表

写到 标签中，脱离结构，可以控制当前页面的所有标签，较为常用

3.外部样式表

单独新建一个CSS文件，完全脱离结构，可以控制整个网站的所有标签，最常用

html 复制代码 
<link rel="stylesheet" href="./css/index.css">

CSS3选择器

CSS 选择器是 CSS 规则的第一部分。它是选择 HTML 元素的方式。

CSS属性：

采取键值对形式。 属性名: 属性值；

根据使用场景不同，选择器也分不同类型。

  • 基础选择器
  • 关系选择器
  • 分组选择器
  • 伪类和伪元素
  • 属性选择器...

基础选择器

基础选择器指的是有单个选择器组成，常见的有：

1.类型选择器

类型选择器选择某个类型的元素，也称为标签选择器

html 复制代码 
p {
	color:gold;
}
div {
	color:gold;
}
span {
	color:green;
}

CSS 层叠性：

CSS 规则可以同时作用于一个元素，浏览器通过特定规则决定最终生效的样式。层叠性解决了样式冲突问题。

原则： 后定义的样式覆盖先前的样式。（就近原则）

CSS书写规范

  1. 选择器和大括号中间保留1个空格距离。
  2. 属性名和属性值中间也要保留1个空格。
  3. 每个CSS属性单独占一行。后期会打包压缩无需担心体积问题。

trea的css注释快捷键是ctrl+/，注意注释内容和左右两侧保持一个空格距离的习惯。

html 复制代码 
span {
 /*这里添加注释*/
color: green;
}
AI工具注释：
1. 单个属性注释可以在CSS属性后面打一个空格即可自动添加注释。
2. 如果想要给多个属性添加注释，选中CSS添加到右侧对话区，输入提示词即可。

2.类选择器

类选择器选择某一个元素或者多个元素。

html 复制代码 
.box {
	color: glod;
}

.类名{样式声明;...}

<标签 class="类名">

注意：

  1. 类名自定义，不能是中文、纯数字
  2. 多个英文单词组成尽量使用 - 链接
  3. 命名有要意义，尽量见名知义
  4. class属性可以有多类名中间用空格隔开

3.id选择器

选择 HTML 中具有特定 id 属性的唯一元素

html 复制代码 
#box {
	color: gold;
}

#id名{样式声明;...}

<标签 id="id名">

id和类的区别：

（类选择器）：

语法：以 . 开头，后跟类名（如 .nav）

作用：选择 class 属性的一个或多个元素

特点：可以使用多次

类似： 身份证的名字，可以使用多次

场景：后期修改样式基本都是类选择器

（id选择器）：

语法：以 # 开头，后跟id名（如 #header）

作用：选择 特定 id 属性的唯一元素

特点：同一页面中，id 值必须唯一（不能重复）

类似： 身份证的编号，唯一，只能用一次

场景：后期主要是配合JavaScript 添加交互效果

4.通配符选择器

通配符选择器可以选择 HTML 中所有的标签，进行样式修改。

html 复制代码 
* {
	margin: 0;
	padding: 0;
}

基础选择器总结

关系选择器

关系选择器是通过位置关系来选择目标元素(标签），可以更精准选择某些元素。常见的有：

1.后代选择器

选择某个元素的后代元素（不限层级，包括子元素、孙元素等）

html 复制代码 
.box p {
	color: pink;
}
html 复制代码 
<div>
<p>我是文字</p>
</div>
<p>我是文字</p>

说明：

选择div标签里面的p元素，中间空格隔开。

父级div作用是限定，子元素p修改样式 。

父级和子集都可以是任意选择器。

2.子代选择器

选择某个元素的直接子元素 （仅限一层）

html 复制代码 
.box>p {
	color: pink;
}
html 复制代码 
<div>
	<span>我是儿子</span>
	<p>
	<span>我是孙子</span>
	</p>
</div>

选择div标签里面的第一层span元素，中间 > 隔开， 理解为亲儿子

2.兄弟选择器

(邻接兄弟选择器):

html 复制代码 
h2+p{
	color: pink;
}

选中紧跟在 h2 后面的第一个 p 元素

(通用兄弟选择器):

html 复制代码 
h2~p {
	color: pink;
}

选中紧跟在 h2 后面的所有 p 元素

\

关系选择器总结

后代选择器是我们最常用的。

CSS文本样式

盒子模型

所有的元素都被一个个的"盒子"包围着，学会盒子模型可以实现准确布局，处理元素排列的关键。

在css中，一般分为区块盒子和行内盒子。

（1）区块盒子（block）

  • 盒子会产生换行
  • width 和height属性可以发挥作用
  • 不设置宽度则默认和是父元素空间的100%
  • 内边距，外边距和边框会撑大元素
  • 常见的比如：div，p，h，ul，table等

（2）行内盒子（inline）

  • 盒子不会会产生换行
  • width 和height属性将不起作用
  • 垂直方向的内边距，外边距不起效果
  • 水平方向的内边距，外边距会有效果
  • 常见的比如：span，em，a，strong等

css盒模型整体上适用于区块盒子，包含 盒子内容，内边距，外边距，边框四部分。

  • 盒子内容。显示内容的区域，由内容或者指定宽度高度来决定内容大小。
  • 内边距 padding。内容距离边框之间的距离。
  • 边框 border。边框盒子包住内容和内边距。
  • 外边距 margin。该盒子与其他元素之间的距离。

盒子模型组成-边框

border属性用于设置盒子边框

使用场景：

1.设置盒子四条或者单独边框。

属性值：

border：边框粗细 边框样式 边框颜色；

  • 边框有三部分属性值组成，中间必须空格隔开。
  • 三部分属性值没有先后顺序
html 复制代码 
border: 1px solid #f1f1f1;
边框样式 描述 视觉效果
dotted 点状边框 圆点组成的虚线
dashed 虚线边框 短横线组成的虚线
solid 实线边框 单一线条

使用场景：

1.四个边框不同

2.底部一条线做分割线

属性：

根据方位名词。top bottom left right

  • border-top：1px solid pink;
  • border-bottom：1px solid pink;
  • border-left：1px solid pink;
  • border-right：1px solid pink;

盒子模型组成-圆角边框

border-radius 允许你设置元素的外边框圆角。

使用场景：

1.盒子设置圆角更好看。

2.盒子或者图片设置为圆形。

属性：

border-radius：属性值；

数字/百分比

css 复制代码 
.button {
	border-radius:10px;
}

特殊场景：

1.胶囊圆角。

2.盒子或者图片设置为圆形。

实现：

  • 胶囊圆角：长方形设置圆角为宽度的一半。
  • 圆形：正方形设置圆角为高度一半或者50%。

特殊场景：

1.淘宝侧边栏左上角和右下角有圆角其余没有。

圆角写法 作用
border-radius：10px；
border-radius：10px 20px； 左上 右下是10px，右上 左下 20px
border-radius：10px 20px 30px； 左上是10px，右上 左下是20px，右下30px
border-radius：10px 20px 30px 40px； 左上10px，右上20px，右下30px，左下40px

border-radius:左上角 右上角 右下角 左下角;

  • 顺时针记忆
  • 中间空格隔开
  • 不需要圆角的设置为0即可(border-radius:12px 0 0 12px;)

圆角原理:

radius半径,所以border-radius:50% 可以画圆

过渡

过渡效果（Transition）用于在元素的属性值发生变化时，平滑地过渡（而不是瞬间切换）。

场景：

1.鼠标经过图片放大。

2.表单获得焦点，输入框变宽。

语法：

transition：过渡属性 过渡时间；

  • 属性值中间空格隔开
  • 过渡属性如果都要变化可以写all
  • 过渡时间单位是秒s，比如0.2s等
html 复制代码 
input:hover {
	transition: all 0.3s;
}

盒子模型组成-内边距

内边距（padding）位于边框和内容区域之间。

使用场景：

1.让盒子内容和边框保留一定距离，更美观

内边距（padding）多个值用空格隔开。顺时针记忆

内边距写法 作用
padding: 10px; 上下左右4个内边距都是10px
padding: 10px 20px; 上下内边距是10px，左右内边距是20px
padding: 10px 20px 30px; 上是10px，左右是20px，下是30px
padding： 10px 20px 30px 40px; 上10px，右20px，下30px，左40px（顺时针）

单边设置：根据方位名词。

  • padding-left: 10px;
  • padding-right: 10px;
  • padding-top: 10px;
  • padding-bottom: 10px;

盒子模型组成-外边距

外边距（margin）外边距是盒子周围一圈看不到的空间。它会把其他元素推离盒子。

使用场景：

1.让元素与元素保留一定距离，更美观

外边距（padding）多个值用空格隔开。

外边距写法 作用
margin: 10px; 上下左右4个外边距都是10px
margin: 10px 20px; 上下外边距是10px，左右外边距是20px
margin: 10px 20px 30px; 上是10px，左右是20px，下是30px
margin： 10px 20px 30px 40px; 上10px，右20px，下30px，左40px（上右下左）

单边设置：根据方位名词。

  • margin-left: 10px;
  • margin-right: 10px;
  • margin-top: 10px;
  • margin-bottom: 10px;

注意：

1.行内元素左右外边距生效，上下外边距无效。

  1. 行内元素设置宽度和高度也无效。

技巧：

区块元素可以利用marign实现水平居中。

1.块级盒子必须有宽度

2.只需要设置左右外边距为auto就可以

盒子模型组成-外边距折叠

区块元素上下外边距会出现折叠（合并）情况。

  • 并列关系(兄弟）的区块元素。
  • 两个上下外边距将合并为一个外边距。其大小等于最大的单个外边距

盒子模型组成-外边距塌陷

区块元素上下外边距会出现塌陷情况。

  • 嵌套关系(父子）的区块元素。
  • 给子盒子设置上下外边距会让父盒子塌陷移动。

解决方案：

  1. 给父盒子添加上边框。（父盒子本身有边框则不会出现问题）
  2. 给父盒子添加上内边距。（同理）
  3. 给父盒子添加： overflow: hidden; 属性

盒子模型-尺寸计算

在 CSS 盒子模型的默认定义里，除了宽度和高度增加盒子大小之外，padding 和 border 都会让盒子变大。

这样我们在计算盒子大小的时候都会带来困扰。

box-sizing 用于定义元素的 盒模型计算方式，控制元素的 width 和 height 是否包含 padding 和 border

语法：

box-sizing:属性值;

box-sizing:border-box;

属性值 描述
content-box 默认值。元素的 width 和 height 仅包含内容区域，不包含 padding 和 border。 理解： width = 内容的宽度
border-box 元素的 width 和 height 包含内容、padding和 border。 理解： width = border + padding + 内容的宽度

实际开发中，我们也更提倡使用border-box，可以直接让所有标签修改

盒子背景

background 用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等

使用场景：

1.给盒子添加背景图片，更加精美

2.给列表添加相同的小图标，装饰效果

  1. 给页面添加大的背景图片展示更震撼

  2. 纯CSS实现背景渐变效果

属性 作用 常用值 示例代码
background-color 设置元素背景颜色 颜色名称、十六进制、RGB、透明度
background-image 设置背景图片 background-image:
url(bg.png); background-color: #f0f0f0;
background-repeat 控制背景图片是否重复 repeat（默认）、no-repeat、repeat-x、repeat-y background-repeat:no-repeat;
background-position 定位背景图片位置 xy（如centertop，或者px、%单位） background-position:center;
background-size 调整背景图片尺寸 默认auto、cover（覆盖）、contain（包含）或者跟px、% background-size:cover;
background-attachment 背景是否随页面滚动 scroll（默认滚动的）、fixed(固定） background-attachment:fixed;

注意：背景固定是相对于当前页面视口来说的，并不是某个盒子。

背景复合写法：

background：颜色 图片 重复 固定 位置/尺寸； （顺序无关）

综合案例-视差滚动效果

背景渐变

在 CSS 中，可以通过 linear-gradient（线性渐变）和 radial-gradient（径向渐变）为元素添加渐变背景

场景：

1.文字底色渐变甚至动画，更吸引用户

2.盒子添加更美观

eg ：

https://www.vivo.com.cn/vivo/iqooz10turbopro/

https://www.apple.com.cn/macbook-pro/

样式初始化

浏览器对 HTML 元素有默认样式（如 margin、padding、font-size），不同浏览器的默认样式可能不一致，导致跨浏览器兼容性问题。

初始化的核心目的：

  • 统一浏览器默认样式，消除差异。
  • 减少后续开发中的冗余代码。
  • 提高代码可维护性。

实践：

（小型项目）：

html 复制代码 
* {
	margin:0;/*清除所有元素的 margin */
	padding:0;/*清除所有元素的padding*/
	box-sizing:border-box;/*推荐同时设置盒模型*/
}
html 复制代码 
/*重置列表样式*/
ul,
ol{
list-style:none;/*去除列表样式*/
}
html 复制代码 
/*重置链接样式*/
a{
	test-decoration:none;/*去除下划线*/
}

（中大型项目）：

推荐Normalize.css

引入Normalize.css文件。

html 复制代码 
<link rel="stylesheet" href="./css/Normalize.css">

官网下载地址： https://necolas.github.io/normalize.css/

比如Vue 官网就引入这个css文件。

盒子案例实战

字体图标（iconfont）

字体图标（Icon Fonts）是一种将图标以字体形式嵌入网页的技术，允许开发者像使用文字一样通过 CSS 控制图标的样式（如颜色、大小、

阴影等）

使用场景：

  1. 导航菜单图标。
  2. 按钮操作图标。
  3. 结合动画效果。

优势：

  1. 矢量缩放：无损放大缩小

  2. 样式灵活：通过 CSS 直接修改颜色、大小、阴影等属性。

  3. 减少 HTTP 请求：一个字体文件可包含多个图标，比多张图片更高效。

  4. 兼容性好：支持所有现代浏览器，甚至部分旧版浏览器。

表格相关样式

精灵图

现代网页布局

CSS布局

CSS布局时网页设计的核心技术之一，用于控制元素在页面中的排列方式。

CSS正常布局流

正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。也称为标准流。

正常布局流是CSS布局的基石，页面大的布局基本就是利用区块元素上下罗列而成。

1.区块元素（block）

独占一行，宽度默认撑满父容器

垂直方向排列，可设置宽高。

示例:div、p、h1等。

2.行内元素(inline)

水平方向依次排列，直到容器宽度不足则换行，

宽度和高度由内容决定，无法直接设置。

示例:span、img、strong 等

3.文档流方向

默认从上到下、从左到右排列。

display显示属性



浮动

浮动（float）最早是做"文字环绕"效果的。

浮动（float）可以让元素脱离文档流，向左或向右浮动，直到碰到父容器边缘或其他浮动元素。

属性值 作用值 示例
left 左侧浮动 float:left;
right 右侧浮动 float:right;
none 默认值，不浮动 float:none;

弹性盒子

Flexbox是CSS弹性盒子布局模块（Flexible Box Layout Module）的缩写，可以快速实现元素的对齐，分布和空间分配。

弹性盒子核心：

1.父控子（亲父子）

  • 父盒子控制子盒子如何排列布局
  • 父盒子称为容器，子盒子称为项目

2.主轴和交叉轴（侧轴）

  • 主轴默认水平方向，交叉轴默认垂直方向，可以更改。

容器（父盒子）属性：

属性 作用 示例
display 定义元素为Flex容器 .container{display:flex}
flex-direction 定义主轴方向（项目排列方向） .container{flex:row;}
flex-wrap 控制是否换行 .container{flex-wrap:wrap;}
justify-content 定义主轴上的对齐方式（整体分布） .container{justify-content:center;}
align-items 定义交叉轴上的对齐方式（单行时整体对齐） .container{align-items:center;}
align-content 定义多行时交叉轴上的对齐方式（仅当flex-wrap:wrap且内容换行时生效） .container{align-content:space-between;}

项目（子盒子）属性

属性 作用 示例
order 定义项目的排列顺序（默认0，数值越小越靠前） .item{order:-1;}
flex-grow 定义项目的放大比例（默认0，即不放大） .item{flex-grow:1;}
flex-shrink 定义项目的缩小比例（默认1，空间不足时等比缩小） .item{flex-shrink:0;}
flex-basis 定义项目在主轴方向上的初始大小（优先级高于width/height） .item{flex-basis:200px;}
flex flex-grow,flex-shrink,flex-basis的简写 .item{flex:1;}
align-self 覆盖容器的align--items,单独定义某个项目的交叉轴对齐方式 .item{align-self:center;}

容器（父盒子）设置display:flex;可以让子盒子按照主轴方式排列。

  • 如果子元素有大小，则按照给定大小来显示。
  • 如果子元素没有大小，则拉伸充满父容器。
  • 若子元素总宽度超过容器宽度，默认会压缩子元素。

开发中大部分情况下，父容器设置display:felx,子元素设定大小。

justify-content定义主轴上的对齐方式

属性值 效果 示例
flex-start 左对齐（默认） 子元素靠左排列
flex-end 右对齐 子元素靠右排列
center 居中对齐 子元素居中
space-between 两端对齐 首个子元素放置于起点 末尾元素放置于终点
space-around 项目两侧间隔相等 每个子元素周围分配相同的空间
space-evenly 项目间隔均匀分布 每个子元素之间的间隔相等

align-items定义交叉轴上的对齐方式（单行时整体对齐）

属性值 作用描述
flex-start 项目在交叉轴起点对齐（默认值）
flex-end 项目在交叉轴终点对齐
center 项目在交叉轴居中对齐
stretch 项目拉伸填充整个容器高度（需子项目无固定高度）

flex-direction定义主轴方向（改变主轴方向）

属性值 描述 示例效果 代码示例
row 默认值。子元素沿水平主轴(从左到右)排列。 ABC(横向排列) .container {flex-direction: row;}
row-reverse 子元素沿水平主轴反向排列(从右到左) CBA(反向横向排列) .container {flex-direction: row-reverse; }
column 子元素沿垂直主轴(从上到下)排列。 (纵向排列) .container{flex-direction: column;}
column-reverse 子元素沿垂直主轴反向排列(从下到上) (反向纵向排列) .container{flex-direction:column-reverse:}

flex-direction定义主轴方向

1.改变主轴方向

2.主轴居中对齐

3.交叉轴居中对齐

flex-wrap控制是否换行

属性值 排列效果
nowrap 不换行 (全部横向排列，可能被压缩)
wrap （第一行上方，第二行下方）换行
wrap-reverse （第一行下方，第二行上方） 翻转（了解即可）

align-content定义多行时交叉轴上的对齐方式（仅当flex-wrap：wrap且内容换行时生效）

开发中大部分情况下，该属性使用较少，大部分子元素顺序排列即可。

项目（子盒子）属性

子元素的属性用于控制自身的尺寸，顺序或对齐方式

语法：

flex:1;剩余空间占1份，并且可以伸缩盒子大小

数字表示剩余空间所占份数。正整数

gap间距

gap简写属性用于设置行与列之间的间隙（间距）

使用场景：

1.让子元素之间保留间隙

语法：

gap:20px; 行和列之间保持20像素间隙。

gap:20px 30px; 行间距是20像素，列间距是30像素。

注意：gap是写到父元素上（容器身上）

垂直对齐---解决图片底部空白缝隙问题

基线：浏览器行内元素（行内块元素）排版中存在用于对齐的基线（baseline）

让文字和图片垂直居中

定位布局

CSS定位布局（position）是控制元素在页面中位置的核心技术之一。通过定位，可以实现与元素脱离文档流，层叠，固定在特定位置布局效果（定位跟位置有关）

相对定位

CSS相对定位（position：relative）是布局中常用的定位方式，其核心在于元素对于自身正常位置进行偏移。

绝对定位

CSS绝对定位（position:absolute）核心是脱离正常流并基于定位基准进行偏移。

定位-子绝父相

固定定位

CSS固定定位（position:fixed）是一种将元素脱离文档流并始终相对于浏览器视口定位的布局技术。

粘性定位

CSS粘性定位（position:sticky）是一种混合定位模式，结合了相对定位（relative）和固定定位（fixed）的特性。

定位布局-层叠顺序

定位总结

网格布局



1.网格布局基本概念

2.网格容器

3.网格轨道




4.网格归档-对齐方式




5.网格间距

gap简写属性用于设置行与列之间的间隙（网格间距）

6.网格线



7.网格填充方式

object-fit

object-fit是CSS中用于控制替换元素

html 复制代码 
(如 <img>、<video>、<iframe>等加载外部资源的元素)内容如何适应其容器尺寸的属性。

8.项目对齐方式

多列布局







交互动效设计

变换

CSS transform是元素进行2D/3D变换的核心属性，支持平移，旋转，缩放，倾斜等效果，且不破坏原有文档流布局。

场景：

应用非常广泛，通过简洁的语法实现复杂的视觉动态效果。

坐标系

变换的时候很多情况需要按照坐标轴来变化，介绍2D坐标系和3D坐标系。

基本变换函数-2D

transform 是用于对元素进行 2D/3D 变换 的核心属性，支持平移、旋转、缩放、倾斜等效果，且不破坏原有文档流布局。

变换类型 函数语法 核心描述 应用场景
平移 translate(x, y) translateX(x) translateY(y) 沿 X/Y 轴移动元素，参数可为像素或百分比
（百分比相对于元素自身尺寸 ） 微调元素位置、悬停偏移效果
旋转 rotate(angle)
缩放 scale(sx, sy) scaleX(sx) scaleY(sy) X/Y 轴按比例缩放，单参数时等比例缩放（>1 放大，<1 缩小，支持百分比） 悬停放大、焦点突出
倾斜 skew(x-angle, y-angle) skewX(angle) skewY(angle) 沿 X/Y 轴扭曲元素形状，参数为倾斜角度（支持负值） 斜切导航栏、动态图表

体验网站：https://css-transform.moro.es/

1.变换函数-2D平移

平移（translate）沿 X/Y 轴移动元素位置，不改变元素的实际布局（原位置仍保留空白）

场景：

  1. 悬停元素微调。 鼠标放入元素上下或者左右移动（添加过渡更优雅~）
  2. 元素居中。 元素实现水平垂直居中。

语法：

  • 平移不影响页面布局，仅是视觉上的移动。
  • 添加鼠标经过元素移动，优先transform而不是通过left、top等，性能更佳。
  • 如果单位是百分比，相对于元素自身尺寸，而非父容器

结合 top: 50%; left: 50% 与 translate(-50%, -50%) 实现元素居中

案例：

要求：

1.鼠标经过显示绿色边框。

2.底部找相似绿色盒子升上来。

思路：

1.原先盒子有2像素透明边框，鼠标经过边框改绿色。

2.底部找相似绿色盒子定位到盒子最下面看不见，鼠标经过transform升上来。

3.注意，鼠标经过的是li，但是做移动的是绿色盒子。

1.变换函数-2D旋转

旋转(rotate)通过改变元素在平面或空间中的角度实现视觉效果。

场景：

1.悬停动画（如按钮旋转）

2.加载动画（无限循环旋转）

语法：

html 复制代码 
transform：rotate(360deg);/*旋转*/

参考单位：deg（度），正值是顺时针，负值是逆时针。

html 复制代码 
transform-origin：left top;/*旋转的基点*/

transform-origin设置旋转中心点。

属性值支持left,top等，也可以支持数字比如像素和百分比等。

注意：

行内元素的布局特性（无法设置宽高、盒模型限制、transform基准异常）会破坏旋转效果的稳定性和精确性，所以文字类要转换行内块或者块级元素。比如字体图标需要转换）

1.变换函数-2D缩放

缩放（scale）用于调整元素尺寸，且不改变元素在文档流中的原始占位。

场景：

1.悬停放大等

语法：

  • 单参数：同时作用于 X 和 Y 轴（如 scale(2) 表示整体放大 2 倍）。
  • 第一个控制 X 轴，第二个控制 Y 轴（如 scale(0.5, 1.5) 横向缩小50%、纵向放大 50%）
1.变换函数-2D倾斜

倾斜（skew） 用于对元素进行 二维倾斜变换，通过沿 X 轴或 Y 轴扭曲元素的几何形状。

场景：

1.鼠标经过元素倾斜效果。

语法：

  • 如果只有一个参数则Y轴默认为0
  • transform-origin设置倾斜中心点
过渡进阶

transition 完整写法：

transition: 过渡属性 持续时间 速度曲线 延迟时间;

所有属性添加过渡效果， 过渡持续1秒， 匀速， 延迟1秒执行

1.cubic-bezier.com：可视化编辑贝塞尔曲线。

2.easings.net：获取常用缓动函数的预设值

3.谷歌浏览器调试

变换函数-复合写法

在 CSS 中，transform 属性的复合写法（多个变换函数组合使用）

语法:

transform: A() B() C() ；

顺序:

核心规则：从右到左的执行顺序

实际的执行顺序是：先执行最右侧的 C()，然后是 B()，最后是左侧的 A()。

变换函数-汽车案例

3D变换与透视

三维坐标系

3D旋转

旋转 (rotate) 通过改变元素在3D空间中的角度实现视觉效果。

语法：

  • 参数单位：deg（度），正值是顺时针旋转，负值时逆时针旋转。
  • rotateZ和二维里面的rotate（）一样的。

透视

"透视"（perspective）一词源于拉丁文"perspclre"（看透），指在平面上描绘物体的空间关系的方法或技术。

在 CSS 中，透视效果（Perspective）用于模拟人眼观察 3D 空间时的近大远小效果。

3D旋转-两面翻转的盒子

动画

CSS3 的 animation 是一种通过定义关键帧和动画属性来实现元素动态效果的技术。

优势：

  • 性能高效：通过浏览器原生支持，利用GPU加速渲染，避免频繁的JavaScript 计算开销。
  • 代码简洁：解决了传统 CSS 过渡（transition）只能定义两帧状态的局限性。可以利用关键帧实现更复杂动画。
  • 交互增强：支持与用户操作（如悬停、点击）结合，提升网页的动态表现力和用户体验。

关键帧：

关键帧（Keyframe）是动画和视频制作中用于定义动作或状态变化的核心节点，它决定了动画的起始、转折和结束状态。中

间帧（插帧）通过算法自动生成，形成连贯的动画效果。

动画使用： 先定义动画，后使用动画。



steps逐帧动画：

速度曲线除了常见的linear、ease、cubic-bezier等，还包含steps()函数，steps()是CSS动画中用于控制动画分段执行的计时函数，它通过将动画分割为离散的步骤，实现类似传统帧动画（逐帧动画）的跳跃效果。


动效案例

前沿技术扩展

SVG动画

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形标准，由 W3C 制定，支持无损缩放、交互性和动态效果。其核心特点包括：

矢量特性

无论放大或缩小均保持清晰。文件体积小，适合网络传输，尤其适用于高分辨率设备.

可编辑性

直接通过文本编辑器修改SVG 代码，支持颜色、形状、动画参数的实时调整.

交互性

支持Javascript和CSS控制，可实现点击，悬停等动态响应。

兼容性

主流浏览器（Chrome、Firefox、Safari）均原生支持 SVG，移动端适配性强


https://www.iconfont.cn/

svg组成

  • SVG 根元素。SVG 图标必须包裹在 svg 标签内。
  • path 路径。通过 d属性定义路径指令。M：移动画笔到坐标点，Z：闭合路径。

svg图标常见CSS属性：

svg是行内块元素类似，可以设置大小、移动位置、动画等。但是有自己特殊的样式属性。

stroke-dasharray: 100; 默认px 实线和间隔都是 100

stroke-dasharray: 100 50; 第一个值是实线， 第二个是间隔。

案例：

html 复制代码 
<style>
    svg {
      /* color: red; */
      /* 填充颜色 */
      /* fill: red; */
      fill: none;
      /* 描边颜色 */
      stroke: blue;
      /* 描边宽度 */
      stroke-width: 3;
      /* 虚线模式 */
      /* stroke-dasharray: 100 100; */

    }

    /* 鼠标经过svg， 执行动画效果 */
    svg:hover {
      animation: move .5s;
    }

    /* 动画效果 */
    @keyframes move {
      0% {
        stroke-dasharray: 0 300;
      }

      100% {
        stroke-dasharray: 300 0;
      }

    }
  </style>
html 复制代码 
<body>
  <svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M512 928A416 416 0 1 1 928 512 416 416 0 0 1 512 928z m0-768A352 352 0 1 0 864 512 352 352 0 0 0 512 160z m192 448H512a32 32 0 0 1-32-32V320a32 32 0 0 1 64 0v224H704a32 32 0 0 1 0 64z" />
  </svg>


  <svg t="1754637101704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="15279" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
    <path
      d="M920.100099 840.52688814L878.90460593 840.52688814 878.90460593 329.72164338C878.90460593 315.9911645 871.61479627 303.29426866 859.76276196 296.38022521L650.65350918 174.38069555C638.72886871 167.42001512 623.99320425 167.37337898 612.02196638 174.2570565 600.05506177 181.14181673 592.67314328 193.90595549 592.67314328 207.72211372L592.67314328 840.52688814 548.81833725 840.52688814 548.81833725 107.38333571C548.81833725 94.41096208 542.29901471 82.30297985 531.4753757 75.16009474 520.65173916 68.02154704 506.96614383 66.80142192 495.05450815 71.91944133L168.27016528 212.2544734C154.10234045 218.33883128 144.91611945 232.28947536 144.91611945 247.71945213L144.91611945 840.52688814 103.86800495 840.52688814C96.32136733 840.52688814 90.20408343 846.64812217 90.20408343 854.19771537L90.20408343 898.67752428C90.20408343 906.22711748 96.32136733 912.34835152 103.86800495 912.34835152L920.100099 912.34835152C927.6434852 912.34835152 933.76076828 906.22711748 933.76076828 898.67752428L933.76076828 854.19771537C933.76076828 846.64812217 927.6434852 840.52688814 920.100099 840.52688814L920.100099 840.52688814ZM699.19407672 312.56396736C699.19407672 305.01003676 705.31027793 298.88771837 712.85799905 298.88771837L756.25983081 298.88771837C763.80755277 298.88771837 769.92375314 305.01003676 769.92375314 312.56396736L769.92375314 356.00477312C769.92375314 363.55436631 763.80755277 369.67668471 756.25983081 369.67668471L712.85799905 369.67668471C705.31027793 369.67668471 699.19407672 363.55436631 699.19407672 356.00477312L699.19407672 312.56396736 699.19407672 312.56396736ZM699.19407672 421.94685878C699.19407672 414.39292653 705.31027793 408.27169249 712.85799905 408.27169249L756.25983081 408.27169249C763.80755277 408.27169249 769.92375314 414.39292653 769.92375314 421.94685878L769.92375314 465.38874724C769.92375314 472.93834045 763.80755277 479.05957448 756.25983081 479.05957448L712.85799905 479.05957448C705.31027793 479.05957448 699.19407672 472.93834045 699.19407672 465.38874724L699.19407672 421.94685878 699.19407672 421.94685878ZM699.19407672 531.32649467C699.19407672 523.77690065 705.31027793 517.65458308 712.85799905 517.65458308L756.25983081 517.65458308C763.80755277 517.65458308 769.92375314 523.77690065 769.92375314 531.32649467L769.92375314 574.76729796C769.92375314 582.32123021 763.80755277 588.4435486 756.25983081 588.4435486L712.85799905 588.4435486C705.31027793 588.4435486 699.19407672 582.32123021 699.19407672 574.76729796L699.19407672 531.32649467 699.19407672 531.32649467ZM699.19407672 640.70938444C699.19407672 633.15545219 705.31027793 627.03421815 712.85799905 627.03421815L756.25983081 627.03421815C763.80755277 627.03421815 769.92375314 633.15545219 769.92375314 640.70938444L769.92375314 684.15127208C769.92375314 691.70086775 763.80755277 697.82643837 756.25983081 697.82643837L712.85799905 697.82643837C705.31027793 697.82643837 699.19407672 691.70086775 699.19407672 684.15127208L699.19407672 640.70938444 699.19407672 640.70938444ZM699.19407672 750.09335857C699.19407672 742.53942797 705.31027793 736.41710793 712.85799905 736.41710793L756.25983081 736.41710793C763.80755277 736.41710793 769.92375314 742.53942797 769.92375314 750.09335857L769.92375314 793.53416267C769.92375314 801.08375752 763.80755277 807.20607592 756.25983081 807.20607592L712.85799905 807.20607592C705.31027793 807.20607592 699.19407672 801.08375752 699.19407672 793.53416267L699.19407672 750.09335857 699.19407672 750.09335857ZM376.74872564 203.17999324C376.74872564 195.63040004 382.86492602 189.5048286 390.41264634 189.5048286L433.81881467 189.5048286C441.36653498 189.5048286 447.48273535 195.63040004 447.48273535 203.17999324L447.48273535 246.62188169C447.48273535 254.17581394 441.36653498 260.29704799 433.81881467 260.29704799L390.41264634 260.29704799C382.86492602 260.29704799 376.74872564 254.17581394 376.74872564 246.62188169L376.74872564 203.17999324 376.74872564 203.17999324ZM376.74872564 312.56396736C376.74872564 305.01003676 382.86492602 298.88771837 390.41264634 298.88771837L433.81881467 298.88771837C441.36653498 298.88771837 447.48273535 305.01003676 447.48273535 312.56396736L447.48273535 356.00477312C447.48273535 363.55436631 441.36653498 369.67668471 433.81881467 369.67668471L390.41264634 369.67668471C382.86492602 369.67668471 376.74872564 363.55436631 376.74872564 356.00477312L376.74872564 312.56396736 376.74872564 312.56396736ZM376.74872564 421.94685878C376.74872564 414.39292653 382.86492602 408.27169249 390.41264634 408.27169249L433.81881467 408.27169249C441.36653498 408.27169249 447.48273535 414.39292653 447.48273535 421.94685878L447.48273535 465.38874724C447.48273535 472.93834045 441.36653498 479.05957448 433.81881467 479.05957448L390.41264634 479.05957448C382.86492602 479.05957448 376.74872564 472.93834045 376.74872564 465.38874724L376.74872564 421.94685878 376.74872564 421.94685878ZM376.74872564 531.32649467C376.74872564 523.77690065 382.86492602 517.65458308 390.41264634 517.65458308L433.81881467 517.65458308C441.36653498 517.65458308 447.48273535 523.77690065 447.48273535 531.32649467L447.48273535 574.76729796C447.48273535 582.32123021 441.36653498 588.4435486 433.81881467 588.4435486L390.41264634 588.4435486C382.86492602 588.4435486 376.74872564 582.32123021 376.74872564 574.76729796L376.74872564 531.32649467 376.74872564 531.32649467ZM376.74872564 640.70938444C376.74872564 633.15545219 382.86492602 627.03421815 390.41264634 627.03421815L433.81881467 627.03421815C441.36653498 627.03421815 447.48273535 633.15545219 447.48273535 640.70938444L447.48273535 684.15127208C447.48273535 691.70086775 441.36653498 697.82643837 433.81881467 697.82643837L390.41264634 697.82643837C382.86492602 697.82643837 376.74872564 691.70086775 376.74872564 684.15127208L376.74872564 640.70938444 376.74872564 640.70938444ZM376.74872564 750.09335857C376.74872564 742.53942797 382.86492602 736.41710793 390.41264634 736.41710793L433.81881467 736.41710793C441.36653498 736.41710793 447.48273535 742.53942797 447.48273535 750.09335857L447.48273535 793.53416267C447.48273535 801.08375752 441.36653498 807.20607592 433.81881467 807.20607592L390.41264634 807.20607592C382.86492602 807.20607592 376.74872564 801.08375752 376.74872564 793.53416267L376.74872564 750.09335857 376.74872564 750.09335857ZM245.16805631 312.56396736C245.16805631 305.01003676 251.28534103 298.88771837 258.83197864 298.88771837L302.23814532 298.88771837C309.78153152 298.88771837 315.90206601 305.01003676 315.90206601 312.56396736L315.90206601 356.00477312C315.90206601 363.55436631 309.78153152 369.67668471 302.23814532 369.67668471L258.83197864 369.67668471C251.28534103 369.67668471 245.16805631 363.55436631 245.16805631 356.00477312L245.16805631 312.56396736 245.16805631 312.56396736ZM245.16805631 421.94685878C245.16805631 414.39292653 251.28534103 408.27169249 258.83197864 408.27169249L302.23814532 408.27169249C309.78153152 408.27169249 315.90206601 414.39292653 315.90206601 421.94685878L315.90206601 465.38874724C315.90206601 472.93834045 309.78153152 479.05957448 302.23814532 479.05957448L258.83197864 479.05957448C251.28534103 479.05957448 245.16805631 472.93834045 245.16805631 465.38874724L245.16805631 421.94685878 245.16805631 421.94685878ZM245.16805631 531.32649467C245.16805631 523.77690065 251.28534103 517.65458308 258.83197864 517.65458308L302.23814532 517.65458308C309.78153152 517.65458308 315.90206601 523.77690065 315.90206601 531.32649467L315.90206601 574.76729796C315.90206601 582.32123021 309.78153152 588.4435486 302.23814532 588.4435486L258.83197864 588.4435486C251.28534103 588.4435486 245.16805631 582.32123021 245.16805631 574.76729796L245.16805631 531.32649467 245.16805631 531.32649467ZM245.16805631 640.70938444C245.16805631 633.15545219 251.28534103 627.03421815 258.83197864 627.03421815L302.23814532 627.03421815C309.78153152 627.03421815 315.90206601 633.15545219 315.90206601 640.70938444L315.90206601 684.15127208C315.90206601 691.70086775 309.78153152 697.82643837 302.23814532 697.82643837L258.83197864 697.82643837C251.28534103 697.82643837 245.16805631 691.70086775 245.16805631 684.15127208L245.16805631 640.70938444 245.16805631 640.70938444ZM245.16805631 750.09335857C245.16805631 742.53942797 251.28534103 736.41710793 258.83197864 736.41710793L302.23814532 736.41710793C309.78153152 736.41710793 315.90206601 742.53942797 315.90206601 750.09335857L315.90206601 793.53416267C315.90206601 801.08375752 309.78153152 807.20607592 302.23814532 807.20607592L258.83197864 807.20607592C251.28534103 807.20607592 245.16805631 801.08375752 245.16805631 793.53416267L245.16805631 750.09335857 245.16805631 750.09335857Z"
      p-id="15280"></path>
  </svg>
</body>

dashoffset 用于调整虚线模式的起始偏移量。

增大 stroke-dashoffset，让虚线模式向路径起点移动，视觉上像线条被"擦除"。

绘制动画（"画笔"效果）总结：

最经典的应用：

通过动画逐渐减小 stroke-dashoffset，让虚线模式"逆向移动"，视觉上像画笔沿着路径绘制线条。

实现步骤：

  1. 计算路径总长度 L（通过 getTotalLength()）。
  2. 设置 stroke-dasharray: X；
  3. 初始 stroke-dashoffset: X；（实线段完全隐藏）。
  4. 动画中逐渐将 offset减小到 0，实线段逐渐覆盖整个路径。


案例：

https://www.oppo.com/cn/discover/technology/oppo-ai/

案例：

https://undraw.co/

案例：

https://element-plus.org/zh-CN/#/zh-CN

补充：

clip-path裁剪

clip-path 创建复杂的裁剪形状，使元素仅显示被裁剪区域内的部分。

语法：

clip-path:内置几何形。

（内置几何形：状如circle()，polygon()。）

html 复制代码 
.circle{
	clip-path:circle(40% at 50% 50%);
}


可视化工具：

https://tools.jb51.net/static/api/css3path/index.html

案例：

案例：

旋转turn

案例：

滤镜filter

CSS滤镜通过filter 属性实现，可对元素及其子元素进行实时图像处理，无需修改原始素材。


背景滤镜

backdrop-filter是 CSS 中的一个图形滤镜属性，主要用于对元素背后的区域（即"背景"）应用滤镜效果。

它通常与半透明背景配合使用，能实现类似"毛玻璃"的视觉效果

动画时间线

animation-timeline 是 CSS 中用于控制动画时间线的核心属性，它允许开发者将动画进度与特定事件（如滚动、视口可见性）绑定，从而实现更复杂的交互效果。

https://www.porsche.cn/china/zh/models/cayenne/cayenne-models/cayenne-passion/

https://stripe.com/zh-us/enterprise

滚动时间线：动画进度与页面或容器的滚动位置关联

视图时间线：动画进度与元素进入/离开视口的可见性关联

变量和函数

CSS增强了逻辑性和动态计算能力，比如CSS变量和一些动态函数(calc()、clamp()等）

使用场景：

  • 主题切换。
  • 响应式设计。
  • 交互动画等

变量

CSS 变量(也称为自定义属性)是一种动态存储和复用值的机制。它让样式管理更灵活、可维护。

变量可以理解为一个容器，里面可以存放数据。

CSS3 计算能力

https://www.iqiyi.com/

综合案例

vw/vh

移动网页开发

移动端知识

电脑（PC）

移动端（手机，折叠屏，平板等）

全球整体：移动端流量占比约63%，PC端37%，其中电商与社交娱乐等行业移动端主导流量（占比70-90%）

常见的移动端开发：

1.原生APP开发

针对安卓、iOS、鸿蒙移动

操作系统开发的 APP

2.小程序端

微信小程序、支付宝小程

序等。uniapp、taro等

3.web端（H5)

H5、CSS3、JavaScript

等技术

PC页面会设置版心，移动端页面宽度根据设备宽度来定。

视口标签：

html 复制代码 
<meta name="viewport" content="width=device-width,initial-scale=1.0">
属性名 作用 取值 默认值 示例 注意事项
width 设置视口宽度 device- width 或具体数值（如375） 980px（移动端默认） <meta name="viewport" content="width=device-width"> 移动端默认的980px称为布局视口 device-width以匹配设备宽度称为理想视口
initial-scale 页面初始缩放比例 数值（如1.0） 1.0 <meta name="viewport" content="initial-scale=1.0"> 与 width 和 device-width 配合使用，避免缩放混乱
minimum-scale 允许用户缩放的最小比例 数值（如0.5） 0.1 <meta name="viewport" content="minimum- scale=0.5"> 若设为 1.0，则用户无法放大页面
maximum-scale 允许用户缩放的最大比例 数值（如2.0） 10.0 <meta name="viewport" content="maximum- scale=3.0"> 限制缩放范围，但可能影响无障碍访问
user-scalable 是否允许用户手动缩放 yes 或 no yes <meta name="viewport" content="user-scalable=no"> 禁用缩放可提升体验，但需谨慎使用（无障碍场景需权衡）

调试工具移动端：

总结：

1.移动端开发不需要设置版心，让我们的页面宽度和移动杜纳屏幕一样宽就行。

2.利用视口标签，保证我们页面宽度和移动端屏幕一样宽。最核心的宽度设置为移动端设备宽度。

html 复制代码 
<meta name="viewport" content="width=device-width,initial-scale=1.0">

3.调试工具中有移动端模拟器。

物理像素和CSS像素：
物理像素（也称设备像素）:

是设备屏幕的实际物理像素数量，即硬件层面的像素点总数，出厂默认。

例如：

一台设备的屏幕分辨率为 2532×1170，表示横向有2532个物理像素，纵向

有1170个物理像素.

硬件相关：

由屏幕硬件决定，不同设备的物理分辨率可能不同。

将更多的物理像素点压缩至一块屏幕里，从而达到更多的分辨率，提高了屏幕显示的细腻程度

CSS像素（也称设备独立像素或者逻辑像素）:

是CSS中使用的虚拟像素单位，用于布局和样式计算。

它是一个抽象概念，不直接对应物理像素，而是通过 设备像素比（DPR）

与物理像素关联。

比如： PC端，1个CSS像素就是1个物理像素，但是手机端要看DPR

屏幕尺寸标准：

html 复制代码 
https://remeins.com/index/app/sizegf

设计稿：

vw/vmin适配方案

实现移动端适配方案：

vw/vh单位适配：

vw（Viewport Width）是一种基于视窗宽度的相对单位，非常适合用于移动端适配。

vw 单位定义：

  • 1vw = 视窗宽度的 1%
  • 如果视窗宽度是 375px，则 1vw = 3.75px
  • 同理 100vw = 视窗完整宽度。
  • vh：视窗高度的 1%
  • 注意vw和%不一样，%相对于父容器

设计稿转换公式：

vw值 = (元素在设计稿中的px值 / 设计稿宽度) × 100vw

（106 / 375) * 100vw = 28.26vw

注意：

网页是主要对屏幕宽度适配，所以通常用vw即可，vh很少用

html 复制代码 
.box{
	width:28.26vw;
	height:28.26vw;
}


vw适配方案：

方式1：使用calc()函数

html 复制代码 
.nav{
	width:calc(106/375*100vw);
	height:calc(106/375*100vw);
}

书写繁琐

方式2：使用CSS预处理器（推荐）

less或陪着sass实现，后续工程化讲

但是实际开发里面直接写px不需要计算

方式3：结合PostCSS插件（最佳实践）

  • less/sass代码直接写px
  • 使用postcss-px-viewport插件，打包发布的时候会统一自动转换为vw。
  • 但是需要脚手架知识，后续Vue阶段讲。

方式4：使用trae插件转换（当前阶段）

插件配置：

综合案例：（优医问诊项目）

rem适配方案

通过动态修改根元素（html）的 font-size，使得页面元素基于 rem 的布局能够自适应不同屏幕尺寸。

比如京东、淘宝、小米移动端使用rem适配。

动态修改html文字大小（基准值）方案：

方式1：媒体查询方案

方式2：js方式引入（推荐）

阿里巴巴手淘团队开发的 移动端适配方案Flexible.js

通过动态调整根元素（）的 font-size，结合

rem 单位实现页面自适应。

总结：

1.html 根元素 文字大小有关。 跟父元素等其他元素无关

2.媒体查询或者 利用 Flexible.js（提倡）动态修改文字大小

动态修改html文字大小（基准值）方案：

设计稿转换公式：

rem值 = 设计稿元素尺寸 / html的font-size（基准值）

（106 / 37.5) = 2.826 rem

方式3：使用PostCSS插件（最佳实践）

  • less/sass代码直接写px
  • 使用postcss-pxtorem插件，打包发布的时候会统一自动转换为rem。
  • 但是需要脚手架知识，后续Vue阶段讲。

方式4：转换插件（目前阶段）

  • Flexible.js 实现动态修改 html 根字号大小
  • 利用插件实现 px 转换为 rem单位

响应网页开发

响应式布局是一种网页设计方法，使网页能够根据用户设备的屏幕尺寸、分辨率、方向（横屏/竖屏）等特性

自动调整布局和内容，提供一致且优化的用户体验。其核心目标是"一次设计，多端适配"。

响应式布局核心技术：

布局方式：

  • 弹性盒子（Flexbox）
  • 网格布局（CSS Grid）
  • 百分比布局(流式布局)
  • 单位可以借助于vw实现
    断点（Breakpoints）设置：
  • 根据常见设备宽度设置断点
  • 手机 < 768px
  • 平板 768px~1024px
  • PC>1024px
  • 根据不同设备宽度显示不同布局样式

    响应式布局实现方案：
  1. 媒体查询：
    媒体查询是 CSS3 的功能，允许根据设备的特
    性（如屏幕宽度、高度、分辨率、设备类型等）
    应用不同的样式规则。它是实现响应式设计的
    核心技术。
  2. 第三方框架 Bootstrap：
    预置样式和组件减少重复编码，缩短项目周期，适配 PC、
    移动端及主流浏览器。
    后期还会有不同框架学习。

媒体查询

媒体查询是CSS3中的一个强大功能，它允许开发者根据设备的特定特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的CSS样式。

媒体查询是实现响应式网页设计（Responsive Web Design）的核心技术。

语法：

html 复制代码 
@media 媒体类型 and (媒体特征){
/*样式*/
}
  • @media : 媒体查询的起始声明
  • 设备类型: 媒体类型（可选），如 screen, print等，省略默认 all
  • 设备特性: 如 min-width, max-width 等

    综合案例：
    https://designcode.io/courses
    核心代码： grid-template-columns：repeat(auto-fill,minmax(210px,1fr))

svg 裁剪波浪效果

BootStrap响应式

Bootstrap 是由 Twitter 团队开发的开源前端框架，用于快速构建响应式、移动优先的网站和 Web 应用程序。

它提供了一套完整的 HTML、CSS 和 JavaScript 组件，使开发者可以轻松实现现代化的 UI 设计。

学习框架：

  1. 官方文档。查看官网文档，学习核心概念、使用规范，然后做demo实现基础功能。
  2. 实战项目。复刻经典项目，逐步添加自定义功能。
  3. 原理剖析。阅读源码，理解原理与最佳实践。



使用方法：

  1. 需要引入Bootstrap的 css文件 和 js文件。
  2. 找到文档对应内容，选择样例。
  3. 复制文档提供的样例代码，根据需求调整。





前端网页托管

相关推荐
mCell4 小时前
如何零成本搭建个人站点
前端·程序员·github
mCell4 小时前
为什么 Memo Code 先做 CLI：以及终端输入框到底有多难搞
前端·设计模式·agent
恋猫de小郭5 小时前
AI 在提高你工作效率的同时，也一直在增加你的疲惫和焦虑
前端·人工智能·ai编程
少云清5 小时前
【安全测试】2_客户端脚本安全测试 _XSS和CSRF
前端·xss·csrf
m0_607076605 小时前
CSS3 转换，快手前端面试经验，隔壁都馋哭了
前端·面试·css3
听海边涛声5 小时前
CSS3 图片模糊处理
前端·css·css3
IT、木易5 小时前
css3 backdrop-filter 在移动端 Safari 上导致渲染性能急剧下降的优化方案有哪些？
前端·css3·safari
0思必得05 小时前
[Web自动化] Selenium无头模式
前端·爬虫·selenium·自动化·web自动化
anOnion5 小时前
构建无障碍组件之Dialog Pattern
前端·html·交互设计
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05Linux下V2Ray安装配置指南06openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决07AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南08Vue-skills的中文文档09OpenClaw Chrome扩展使用教程 - 浏览器中继控制10在Trae中使用Pencil MCP