选择器

类型选择器

div {
    属性 : 值
}

类选择器

.class {
    属性 : 值
}

ID选择器

#id {
    属性 : 值
}

通配符选择器

通常都是用来把所有元素的默认样式清空用的

* {
    属性 : 值
}

后代选择器

当a包含b，b包含c，而我们希望通过关系深入到c来修改它的样式时，使用【空格】来表示后代

注意：后代选择器会跨代生效，即子，孙等元素都会生效，要只使用下一层选择器的，使用子代选择器

a b c {
    属性： 值
}

子代选择器

当只希望对子代的元素进行控制，不希望后代所有的元素都生效时，使用 > 号，只对它的下一层元素生效

.div > p {
    属性 : 值
}

父亲选择器（通过子元素反向选择父元素的选择器）:has

有一种情况，如果我们通过子元素，来修改其父元素的样式。如子元素悬停时，却是修改父元素样式，我们需要通过子元式来反查父元素的选择器

/* 通过 :has 来定义子元素触发时，修改其父元素的样式 */
/* 含义是，parent 中是否有 sub 被悬停了，如果有，刚该父类进行样式更改 */
parent:has(sub:hover) {
    /* 这里的样式是修改父元素的样式 */
}

排除选择器（排除存在某一特性的选择器）:not

有一种情况，就是当一个父元素中有多个相同的子元素，但是当选中某一子元素后，除了这个选中的子元素不生效，其余的相同子元素都生效

div item:not(:hover) {
    /* 当 div 中的 item 中，如果被 hover 的话，这里不生效，但是没有 hover 的话都生效 */
}

兄弟、邻接选择器

邻接 +

指的是元素下面的一个元素

如果 <p> 下面有一个 <a> 我只希望控制这个 <a> 标签的元素

<p></p>
<a></a> 生效
<a></a> 不生效

css:

p + a {
    属性 : 值
}

兄弟 ~

指的是元素下面的所有元素

如果 <p> 下面并排有多个 <a> 我希望把下面所有并排的 <a> 都控制

<p></p>
<a></a> 生效
<a></a> 生效
<a></a> 生效
<a></a> 生效

css:

p ~ a {
    属性 ： 值
}

分组(并集)选择器

将不同的选择器组合一起，使用逗号分割，用于同时定义多个使用了不同选择器但用了相同样式的元素

div, a, p, .class {
    属性： 值;
}

伪类选择器

伪类指的是，元素的特定状态或结构位置

使用 : 来定义

链接伪类

链接伪类用于根据链接的不同状态（如未访问，已访问，悬停，点击等）添加样式。

未访问状态

a:link {
    ...
}

已访问状态

a:visited {
    ...
}

悬停状态

a:hover {
    ...
}

点击瞬间状态

a:active {
    ...
}

获得焦点

a:focus {
    ...
}

结构伪类

根据元素的位置选择目标元素

第一个元素

ul li:first-child {
    /* ul 里的第一个 li 生效 */
}

最后一个元素

ul li:last-child {
    /* ul 里的最后一个 li 生效 */
}

第n个元素

ul li:nth-child(3) {
    /* ul 里的第三个 li 生效 */
}

ul li:nth-child(odd) {
    /* 奇数位元素生效 */
}

ul li:nth-child(even) {
    /* 偶数位元素生效 */
}

ul li:nth-child(3n) {
    /* 3的倍数位元素生效 */
}

ul li:nth-child(n+2) {
    /* 第二个位元素开始生效 */
}

ul li:nth-child(-n+3) {
    /* 前三 位元素生效 */
}

表单伪类

针对表单元素的状态

当表单禁用时

当希望在表单禁用时的样式

input:disabled {
    ...
}

当表单选中时

input:checked {
    ...
}

伪元素选择器

伪元素：指的是元素自身的概念性元素的选择器，伪元素本身并不存在，是由元素抽象出来的概念，如元素自身的某一部分，元素的【前】【后】位置，placeholder的颜色等。

元素首行 ::first-line

/* 使一个段落的第一行产生样式 */
p::first-line {
    ...
}

元素首字母 ::first-letter

/* 使段落的第一个字产生样式 */
p::first-letter {
    ...
}

修改 placeholder 样式

/* 使得 textarea 中的 placeholder 产生样式 */
textarea::placeholder {
    ...
}

元素前内容 ::before

/* 使得元素的前面添加样式（可以增加内容）,content必需要加入，为空内容也可以，否则 ::before 不会生效*/
div::before {
    content: ""; 
}

元素后内容 ::after

div::after {
    content: "";
}

属性选择器

根据元素的属性值或特性来定位元素,使用 [ ] 来包含

包含指定属性

div[属性] {
    ...
}

包含指定属性和值

div[属性=值] {
    ...
}

包含指定属性和指定值在开头

div[属性^=值] {
    ...
}

包含指定属性和指定值在结尾

div[属性$=值] {
    ...
}

包含指定属性和指定值在任意位置

div[属性*=值] {
    ...
}

选择器优先级

原则：

1.优先级相等的时候，CSS中最后的那个声明的样式将会被应用到元素上。

2.其余判断那个选择器权重高，优先执行那个样式

3.权重是4位一组，是分开的层级，不能进位

选择器类型       权重值
!important     无限大
内联样式       (1,0,0,0)
ID选择器       (0,1,0,0)
类、属性、伪类   (0,0,1,0)
标签、伪元素     (0,0,0,1)
通配符、继承     (0,0,0,0)

文本样式

字体样式

颜色 color

颜色有数值和关键字，还有rgb格式，可以使用关键字也可以使用数值，或使用rgb函数计算

text {
    /* 红色 */
    color: red; 
    /* 白色 */
    color: #fff; 
    /* 白色 */
    color: rgb(255, 255, 255);
    /* 白色半透明 */
    color: rgba(255, 255, 255, .5)
}

字体族 font-family

可以提供多个字体，字体先后顺序使用。如果都没有，则默认使用系统字体

body {
    font-family: 字体A, 字体B, 字体C;
}

字体大小 font-size

body {
    font-size: 20px;
}

字体倾斜 font-style

font-style 用来打开和关闭文本 italic(斜体)

一般是为了使<em> 倾斜标签设置取消倾斜

text {
    /* 使字体斜体 */
    font-style: italic;
    /* 使字体不斜体 */
    font-style: normal;
}

字体粗细 font-weight

很多标题 <h1> 会默认加粗，可以使用这个取消加粗，可以使用关键字和数值设置，数值在 100~900之间

text {
    /* 不加粗 */
    font-weight: normal;
    /* 加粗 */
    font-weight: bold;
    /* 不加粗 */
    font-weight: 400;
    /* 加粗 */
    font-weight: 700;
}

字体划线装饰 text-decoration

一般是用来设置字体是否有下划线的作用

text {
    /* 取消下划线 */
    text-decoration: none;
    /* 有下划线 */
    text-decoration: underline;
    /* 有上划线 */
    text-decoration: overline;
    /* 有删除线，也可以使用 <del></del> 包裹实现删除线 */
    text-decoration: line-through;
}

文本布局

文本对齐 text-align

控制文本在它所有的块级盒子内的水平对齐

text {
    /* 居中对齐 */
    text-align: center;
    /* 居左对齐 */
    text-align: left;
    /* 居右对齐 */
    text-align: right;
    /* 两端对齐，即拉大两字间的距离以达到头尾对齐 */
    text-align: justify;
}

首行缩进 text-indent

一般使用在段落首行缩进，与logo隐藏文字效果

text {
    /* 单位 em , 缩进 2 个字*/
    text-indent 2em;
    /* 单位px, 缩进 2 个字，假如一个字体大小是16px */
    text-indent 32px;
}

【em 单位是一种相对单位，按照本元素的文字大小作为一个单位，即如果一个文字大小是16px，那么1em = 16px，如果当前元素没有大小，则往父元素找文字大小】

字间距 letter-spacing

调整字与字之间的距离

text {
    letter-spacing: 2px;
}

文字转大写 text-transform

a {
    /* 使所有文字转为大写 */
    text-transform: uppercase;
}

文字行高 line-height

设置行与行之间的高

p {
    /* 行高 2px 单位 px */
    line-height: 2px;
    /* 行高 1.5 单位 倍数,即以文字的大小的倍数 */
    line-height: 1.5;
}

css没有提供垂直居中的功能，所以通常我们可以使用行高和盒子高度相等来实现垂直居中。

font 合并简写

语法：

       字体倾斜       粗细        大小       行高        字体族
font: font-style font-weight font-size/line-height font-family

其中 font-size 和 font-family 是必须写的，其它的可以省略，会使用默认

text {
    /* 字体大小 14px，行高 1.5 倍，字体族  */
    font: 14px / 1.5 "宋体", "微软雅黑"
}

内容换行 white-space

div{
    /* 会把空格和回车合并成一个，并换行 */
    white-space: normal;
    /* 会把空格和回车合并成一个，但不换行 */
    white-space: nowrap;
    /* 不合并空格和回车，当遇到<br>时才换行 */
    white-space: pre;
    /* 不合并空格和回车，当遇到<br>时才换行，或者根据盒子大小来换行 */
    white-space: pre-wrap;
    /* 会合并空格和回车成一个，当遇到<br>时才换行，或者根据盒子大小来换行 */
    white-space: pre-line;
    /* 不合并空格和回车，会换行 */
    white-space: break-spaces;
}

溢出处理 overflow

div{
    /* 内容溢出时，直接溢出不处理 */
    overflow: visible;
    /* 内容溢出时，会被盒子隐藏，用户不能拖拽滚动内容，但编程可以 */
    overflow: hidden;
    /* 内容溢出时，会被盒子隐藏，用户不能拖拽滚动内容，编程也不可以 */
    overflow: clip;
    /* 会预设滚动条 */
    overflow: scroll;
    /* 会按照内容的溢出来自动增加滚动条 */
    overflow: auto;
}

小技巧：如果我们既要希望可以实现滚动，但又不想显示滚动条，我们可以设置滚动条宽度为无

div{
    /* 溢出将使用滚动，但是会出现滚动条 */
    overflow: scroll;
    /* 设置滚动条宽度为无 */
    scrollbar-width: none;
    
}
/* 对隐藏滚动条的兼容性样式 */
div::-webkit-scrollbar {
    display: none;
}

文本溢出处理 text-overflow

text-overflow 不会处理溢出事件的处理，所以如果要text-overflow效果生效，需要配合 overflow:hidden 和 white-space:nowrap 才行。

div{
    /* 溢出的内容按照 overflow 和 white-space 处理，不添加任何省略 */
    text-overflow: clip;
    /* 对溢出的内容后面增加 ... 省略 */
    text-overflow: ellipsis;
    /* 使用 fade() 函数来控制淡出距离 */
    text-overflow: fade();
    /* 使用一个字符串来替代溢出内容的省略号 */
    text-overflow: "~~";
}

多行溢出省略号

div{
    dicplay: -webkit-box; /* 旧版弹性盒子布局 */
    -webkit-box-orient: vertical;  /* 文本垂直排列 */
    -webkit-line-clamp: 3;  /* 限制显示行数 */
    overflow: hidden; /* 溢出内容时隐藏溢出内容 */
    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}

经验：文本布局时对齐经验

1.比如网页底部菜单时，我们可以使用 <p> 作为包裹文本的标签，而不是使用 <div>,如果有两行文本，我们可以考虑使用行高而不是设置标签之间的间距

<p>关于本站 | 联系方式 | 就业帮助 | 售后服务 | ...</p>
<p>Copyright xxx公司</p>

/* 设置两个 p 的行高就可以让文字分开一点，不需要设置 margin */
P{
	line-height: 16px;
}

2.使用 <small> 标签实现次标题

可以使用传统的span标签来实现主标题文字大小和次标题文字大小
<h1>
    新鲜好物 <span>新鲜出炉 品质靠谱</span>
</h1>

也可以使用新型的标签 <small> 更语义化
<h1>
    新鲜好物 <small>新鲜出炉 品质靠谱</small>
</h1>

3.在我们布局图片与文字时，通常我们会使用 flex 布局使两个或多个元素进行排列

<div>
    <ul>
    	<li>
        	<img>图片位置1</img>
    		<p>图片说明1</p>
        </li>
		<li>
        	<img>图片位置2</img>
    		<p>图片说明2</p>
        </li>
    </ul>
</div>

在这时，如果使用 flex 的对齐，并不能使<p>中的图片说明对齐到图片居中，我们对齐文本和图片，应使用文本对齐，而不是使用 flex 对齐

/* ul 使用 flex 布局 */
div ul {
    display: flex;
    justify-content: space-bewteen;
}
/* 要使 li 中的图片和文字居中，应该让文本使用text-align居中，文本会以 li 盒子大小作为居中对象 */
div ul li p{
    text-align: center;
}

4.单行文本溢出时显示省略号

text{
    /* 内容溢出进行隐藏 */
    overflow: hidden;
    /* 文本溢出效果 */
    text-overflow: ellipsis;
    /* 文本不进行换行 */
    white-space: nowrap;
}

多行溢出加省略号请看上一节

字体图标

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

我们可以通过使用 iconfonts 阿里妈妈选取图标

引入iconfonts 文件

<link rel="stylesheet" href="/iconfont.css" />

使用 iconfonts 字符

<span class="iconfont 图标名称类名"></span>
也可以使用 <i> 标签
<i class="iconfont 图标名称类名"></i>

盒子模型

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

边框 border

边框有三部分属性组成

border: 边框粗细值 边框样式 边框颜色

边框样式

指边框的线条，有三种

实线 solid
虚线 dashed
点状 dotted

单独边框线控制

border-top: 边框的上边线
border-bottom: 边框的下边线
border-left: 边框的左边线
border-right: 边框的右边线

圆角边框 border-radius

允许设置元素外边框圆角，还能直接变成圆形

div {
    /* 当值是宽高的一半时，元素变为圆 */
    border-radius: 值px;
    /* 设置为圆 */
    border-radius: 50%;
}

圆角边框还可以设置1~4个值，来单独控制每个角的圆角值

/* 为四个角都设置圆角 */
border-radius: 10px;

/* 左上，右下 10px, 右上，左下 20px */ 技巧：左上角起点 X 路径
border-radius: [左上右下] [右上左下]
border-radius: 10px 20px;

/* 左上10px, 右上左下20px, 右下30px */  技巧：左上角起点 Z 路径
border-radius: [左上] [右上左下] [右下]
border-radius: 10px 20px 30px;

/* 左上10px，右上20px, 右下30px, 左下40px */ 技巧：左上角起点顺时针
border-radius: [左上] [右上] [右下] [左下]
border-radius: 10px 20px 30px 40px;

边框圆角每一个角单独控制

css中提供了一种可以单独控制四个角的圆角控制

div{
    border-top-left-radius: 左上角;
    border-top-right-radius: 右上角;
    border-bottom-left-radius: 左下角;
    border-bottom-right-radius: 右下角;
}

它们可接收一个参数，或接收两个参数

div{
    /* 设置一个参数时,就和普通设置一样 */
    border-top-left-radius: 10px;
    
    /* 设置两个参数时，代表的是 水平半径，和 垂直半径 */
    /* 我们知道圆角只是在元素的四角创建一个指定大小半径的圆，裁剪出来的效果，所以这个圆也可以是一个椭圆，椭圆需要提供长半径和短半径，就是这两个值，它能产生一个椭圆裁剪后的效果 */
    border-top-left-radius: 10px 20px;
}

border-radius 同时设置水平角度和垂直角度(传入两组值)

通过上一节我们可以知道，圆角是可以分别设置x轴半径和y轴半径的长度形成椭圆结构，那么使用border-radius也可以同时设置这样的参数

div{
    /* 值的规则 */
    border-radius: x轴左上 x轴右上 x轴右下 x轴左下 / y轴左上 y轴右上 y轴右下 y轴左下;
    
    /* 示例:每个角的x轴半径都为10px，每个角的y轴半径都为20px */
    border-radius: 100px 100px 100px 100px / 200px 200px 200px 200px;
}

内边距 padding

内边距也可以单独设置四条边的值

/* 使四条边都产生 10px 的边距 */ 
padding: 10px;
/* 上下10px , 左右 20px */ 技巧：上下左右
padding: 10px 20px;
/* 上10px, 左右20px, 下30px */ 技巧：上 左右 下
padding: 10px 20px 30px;
/* 上10px, 右20px, 下30px, 左40px */ 技巧：顶边起点顺时针
padding: 10px 20px 30px 40px;

如果使用数值定义不明确语义，还可以使用有语义的属性值来定义

padding-top: 上边距
padding-right: 右边距
padding-bottom: 下边距
padding-left: 左边距

外边距 margin

外边距也可以单独设置四条边的值

/* 使四条边都产生 10px 的边距 */ 
margin: 10px;
/* 上下10px , 左右 20px */ 技巧：上下左右
margin: 10px 20px;
/* 上10px, 左右20px, 下30px */ 技巧：上 左右 下
margin: 10px 20px 30px;
/* 上10px, 右20px, 下30px, 左40px */ 技巧：顶边起点顺时针
margin: 10px 20px 30px 40px;

/* 使内容水平居中于盒子中，0是上下，auto 是左右，则会把左右空间都占为边距，因此形成居中效果 */
margin: 0 auto;

如果使用数值定义不明确语义，还可以使用有语义的属性值来定义

margin-top: 上边距
margin-right: 右边距
margin-bottom: 下边距
margin-left: 左边

注意：行内元素对上下边距无效，行内元素设置宽高也无效

外边距折叠

外边距有一个特性，当两个盒子为兄弟元素时，上下的边距会被合并，最终距离会以最大的边距为准

/* 上边盒子的下边距设置为100px */
.div1 {
    margin-bottom: 100px;
}
/* 下边盒子的上边距设置为50px */
.div2 {
    margin-top: 50px
}
因为上盒子下边距和下盒子上边距合并，使得最终的边距取最大，即100px.

外边距塌陷

当父盒子嵌套子盒子时，给子盒子设置上下外边距时，并不会让子盒在父盒里产生边距，而是影响到变为父盒产生边距，即原本设置的子盒的边距变成了父盒的边距了

解决方法：

1.给父盒子添加上边框（当父盒子有上边框时就不会出现问题）

2.给父盒子添加上内边距（子盒的外边距可以用父盒的内边距代替）

3.给父盒子添加：overflow: hidden; 属性

盒子大小的计算 box-sizing

一个盒子的大小，由【边框】，【内边距】，【内容】四个地方组成，对于一个盒子的总大小，有多种计算方式

content-box: 默认值，设置的大小只包含【内容】区域大小，当设置内边距及边框时，大小另算
border-box: 设置的大小包含【内容】，【内边距】，及【边框】，当设置内边距和边框时，总大小不变，内容区域减少以保持整体大小不变

div{
    box-sizing: border-box;
}

背景 background

用于设置元素背景相关属性，包括颜色,图片，位置，铺贴方式等

div{
    background: color image repeat attachment position/size
    background: 颜色 图片 重复 固定 位置/尺寸;
}

属性值顺序不限。

因为 position 由两个值组成，为了分割开，所以必须使用 / 来分割

背景颜色 background-color

/* 可以使用 rgb，rgba，16进制，颜色别名 */
div {
    background-color: #fff;
}

背景图片 background-image

/*  */
div {
    background-image: url(image.jpg);
}

背景铺贴方式 background-repeat

/*  */
div {
    background-repeat: 值;
}

repeat: 默认值，表示图标重复铺贴

no-repeat: 不进行重复铺贴

repeat-x: 只进行横向重复铺贴

repeat-y: 只进行众向重复铺贴

背景图片定位 background-position

div{
    background-position: 值，px，%单位
}

使用值时，两个单词组合，如【center top】【right top】【left top】【bottom right】等

使用px时，两个值组合，如【10px 20px】表示横10px，众20px

使用%时，两个值组合，如【10% 20%】表示横10%, 众20%

背景图片尺寸 background-size

div{
    /* 因为 position 和 size 都有 px 单位，所以设置这个值之前需要设置 position 值，否则无法识别 */
    background-size: x值 y值 或 值；
}

auto: 默认值，按原图片大小放置

cover: 覆盖，把图片完全填满整个盒子

contain: 包含，会使图片等比例拉大，直到填满盒子某一条边（当图片比例和盒子比例不一样时盒子有可能留空）

px值：设置图片的宽高值，忽略图片等比例

%值：设置图片的宽高值，忽略图片等比例

背景是否随页面滚动 background-attachment

div{
    background-attachment: scroll | fixed;
}

scroll: 当页面向下滚动时，图片会跟着盒子一起滚动

fixed：当页面向下滚动时，只有盒子在滚动，图片不会随着盒子一起滚动，注意，当使用这个值时，图片的position不再以盒子作为参考，而是把视口作为参考，因为此时它已经成为视口下的元素了。

背景裁剪 background-clip

div{
    background-color: red;
    /* 对div的背景进行裁剪（蒙板），以div中的文字作为蒙板对象 */
    background-clip: text; 
}

背景线性渐变 linear-gradient

div {
    background: linear-gradient(方向，颜色1 位置1%, 颜色2 位置2%, ...);
    background-image: linear-gradient(角度 deg，颜色1 位置1%, 颜色2 位置2%, ...);
}

可控的方向线性渐变

方向：

to left：即渐变从右到左演变颜色

to right: 即渐变从左到右演变颜色

to top: 从下到上演变

to bottom: 从上到下演变

颜色：可以设置多个颜色，则颜色会顺序演变渐变

角度：以盒子中心为圆心，设置渐变开始的方向，比如 90deg则表示，开始颜色在 -90 deg，渐变颜色在 90deg上

位置：指色标开始的位置，如果 pink 色到 red 色, pink 从 50% 开始，则 盒子的渐变开始到25%位置都没有演变，而是从25%开始，pink才开始演变。这是因为，假如pink到red渐变，pink色块占盒子50%，red色块占盒子50%，所以pink位置的50%,相当于盒子的25%区域。

背景径向渐变 radial-gradient

div{
    background-image: radial-gradient(圆心位置,颜色1, 颜色2 ...);
}

以中心向外设置两种颜色渐变

div{
    /* 以中心为准心，从红变蓝向外渐变 */
    background-image: radial-gradient(red, blue);
}

指定颜色开始位置

div{
    /* 从红色位置0% 演变到 蓝色 100% 渐变*/
    background-image: radial-gradient(red 0%, blue 100%);
    /* 指定渐变大小, 这样的效果是一个很多一点点圆网格效果 */
    background-image: radial-gradient(transparent 1px, #fff 1px);
    background-size: 4px 4px;
}

指定准心位置

div{
    /* 准心在左上角 */
    background: radial-gradient(at top left, red, blue);
    /* 准心20px 30px 处 */
    background: radial-gradient(at 20px 30px, red, blue);
    /* 准心20% 30% 处 */
    background: radial-gradient(at 20% 30%, red, blue);
    /* 渐变形状为圆，半径 80px，圆心在 30% 70% 位置处 */
    background: radial-gradient(circle 80px at 30% 70%, red, blue);
}

设置其它形状渐变

circle{
    /* 圆形渐变 */
    background: radial-gradient(circle, red, blue);
    /* 定义尺寸的圆形渐变 50px 半径*/
    background: radial-gradient(circle 50px, red, blue);
}

ellipse{
    /* 椭圆形渐变 */
    background: radial-gradient(ellipse, red, blue);
    /* 定义尺寸的椭圆形渐变 长径100px 短径50px */
    background: radial-gradient(ellipse 100px 50px, red, blue);
}

图片遮罩 mask-image

图片遮罩的核心作用是通过定义一张图片或一个渐变来充当遮罩，从而控制一个元素的可视区域。

div{
    /* mask-image: url(..jpg) 或者 mask-image: 线性渐变 / 径向渐变 */
    mask-image: linear-gradient(rgb(0,0,0) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(rgb(0,0,0) 80%, rgba(0,0,0,0) 100%);
}

在一个要遮的盒子上增加一个遮罩属性，就可以了，这样就不需要我们另外加一个盒子另外做遮罩了

div{
    /* 从80%的白色，到100% 的透明色渐变 */
    mask-image: linear-gradient(rgb(255,255,255) 80%, rgba(255,255,255,0) 100%);
    /* 效果如下 */
}

阴影 box-shadow

div{
    /* x轴和y轴是必须要的 */
    box-shadow: x轴偏移 y轴偏移 模糊半径 扩散半径 颜色;
}

模糊半径：半径越大，羽化越大

扩散半径：扩散越大，阴影范围越大

过渡 Transition

div{
    transition: 过渡属性 过渡时间
    /* 如果需要同时修改多个过渡，不能创建多个过渡属性，而是通过逗号分隔，如下 */
    transition: move 1s , scale 2s , translate 1s;
}

过渡属性：可指定某些属性名，指定了，在某些属性名发生值变化时，会生效过渡，使用 all 会使所有属性都发生过渡效果

清除默认样式 normalize.css

https://necolas.github.io/normalize.css

现代布局

显示属性 display

块转换

div{
    /* 块元素，元素独占一行，它可以设置内边距外边距和大小 */
    display: block;
    /* 行内元素，元素不独占一行，它只能设置左右边距，不能设置上下边距，不能设置大小 */
    display: inline;
    /* 行内块元素，元素不独占一行，但是它具有块元素的特征 */
    display: inline-block;
}

行内块会使块与块之间产生空白缝隙，只需要让父元素字号改为0即可（这是因为代码中使用了回车）。

浮动 float

目前 float 已基本不使用了。

div{
    /* 让元素左浮动 */
    float:left;
    /* 让元素右浮动 */
    floct: right;
}

浮动会让元素脱离文档流，会影响其它元素的布局

因为元素脱离文档流了，所以使得它的父元素可能没有高度，影响下面其它盒子的排版

清除浮动

清除浮动是指，当父盒子中的元素浮动后，父盒子就没有实际的空间撑开高度，影响布局，为了让父盒子适当的把浮动该占的空间用特别的方法占回来。

方法一：在父盒子中创建一个空div,用于占位

<div class="clear"></div>
.clear {
    clear: both;
}

方法二：伪元素清除法，就是让父元素增加一个after的内容，在伪元素中占位

.clearfix::after{
    content:"";
    display: block;
    clear: both;
}

方法三：溢出隐藏法（但是如果需要做溢出布局就有影响）

div{
    overflow: hidden;
}

弹性布局 Flex

FlexBox 可以快速实现元素对齐、分布和空间分配，对于单行或单列布局的话，Flex是非常好用的，但是如果要布局多行，建议使用 Grid

div{
    /* 开启 flex 布局 */
    display: flex;
}

主轴 flex-direction

主轴是决定盒子以什么方向排列，它可以选横向排，也可以选竖着排

主轴：当主轴是横向排，则“交叉轴”就是竖方向，当主轴是竖着排，则“交双轴”就是横方向

div {
    display: flex;
    /* 设置主轴为横向排列 */
    flex-direction: row;
    /* 设置主轴为竖向排列 */
    flex-direction: column;
    /* 横向反向排列 */
    flex-direction: row-reverse;
    /* 竖向反向排列 */
    flex-direction: column-reverse;
}

注意:当使用了flex布局后，行内元素也可以设置宽高值

主轴对齐方式 justify-content

div{
    /* 从左向右排 ABC-- 
    ************
    *ABC--------
    ************
    */
    justify-content: flex-start;
    
     /* 从右向左排 --ABC 
    ************
    *--------ABC
    ************
    */
    justify-content: flex-end;
    
     /* 居中排列 -ABC- 
    ************
    *----ABC----
    ************
    */
    justify-content: center;
    
     /* 前后无空间，把空间留给元素之间 A-B-C 
    ************
    *A----B----C
    ************
    */
    justify-content: space-between;
    
     /* 每个元素前后都应有平均空间 -A--B--C- 
    ************
    *-A---B---C-
    ************
    */
    justify-content: space-around; 
    
    /* 每一个空间平均分隔 -A-B-C- 
    ************
    *--A--B--C--
    ************
    */
    justify-content: space-evenly;
}

交叉轴对齐 align-items

div{
    /*
    从上到下排列
    **********
    *ABC
    *DEF
    *
    **********
    
    */
    align-items: flex-start;
    
    /*
    从下到上排列
    **********
    *
    *DEF
    *ABC
    **********
    */
    align-items: flex-end;
    
    /*
    居中排列
    **********
    *
    *ABC
    *
    **********
    */
    align-items: center;
    
    /*
    拉伸填充
    **********
    *ABC
    *ABC
    *ABC
    **********
    */
    align-items: stretch;
}

换行 flex-wrap

div {
    /* 不换行 */
    flex-wrap: nowrap;
    /* 换行 */
    flex-wrap: wrap;
    /* 反转换行 */
    flex-wrap: wrap-reverses;
}

多行交叉轴对齐 align-content

如果元素已经达到了需要换行的时候，两行，及以上行，该如何进行对齐。通过这个属性可以设置多行元素的对齐

div{
    /* 主轴row时：从上到下（主轴column时：从左到右） 
    **********
    *ABC
    *DEF
    *
    **********
    */
    align-content: flex-start;
    
    /* 
    主轴row时：从下到上（主轴column时：从右到左） 
    **********
    *
    *DEF
    *ABC
    **********
    */
    align-content: flex-end;
    
    /* 
    主轴row时：横向居中（主轴column时：竖向居中） 
    **********
    *
    *ABC
    *DEF
    *
    **********
    */
    align-content: center;
    
    /* 
    主轴row时：上下元素靠顶和靠底（主轴column时：左右元素靠左和靠右）
    中间空间平均分
    **********
    *ABC
    *
    *
    *DEF
    **********
    */
    align-content: space-between;
    
    /* 
    主轴row时：每个行元素上下都有一份空间（主轴column时：每列元素左右都有一份空间）
    中间空间平均分
    **********
    *
    *ABC
    *
    *
    *DEF
    *
    **********
    */
    align-content: space-around;
    
    /* 主轴row时：每行元素间隔都有平均空间（主轴column时：每列元素间隔都有平均空间）
    中间空间平均分
    **********
    *
    *ABC
    *
    *DEF
    *
    ********** */
    align-content: space-evenly;
}

Flex 1 子盒子伸缩

flex: 1; 的具体含义是，代表 flex: 1 1 auto;

其意思是：子元素占有一份额增长，占有一份额收缩，且一开始不考虑宽高直接填满父盒子

简单理解：flex: 1; 可以看作这个子盒在父盒子里占用一个份额 即可（假如有4个元素，都设置flex 1.就是4个人每人平分一份）。

sub {
    /* 这个子元素在父盒子中占1份 flex: 1 1 0%*/
    flex: 1;
    /* 这个子元素在父盒子中占2份 flex: 2 1 0% */
    flex: 2;
}

注意：因为这个是用于设置占有份额的，所以必须要在子元素中设置

子元素分隔 gap

为了应对元素与元素之间的间隔，通常我们会想着在子元素中设置margin值，但是会使得前后元素多出margin间隔，不能使用 space-between 来消除前后的margin(因为这是margin不是空闲空间)

sub {
    /* 行与列都有10px的间隔 */
    gap: 10px;
    /* 行之间有 10px 间隔，列之间有 20px 间隔 */
    gap: 10px 20px;
}

注意：gap 应用在父元素上

网格布局 Grid

网格布局是一种二维布局模型，允许开发者能过定义行（rows）和列(columns)来精确控制网页元素的位置和尺寸。

在实际开发中，大部分是两者混用的。

对于实现一维布局，动态内容对齐，单行布局，我们通常会建议使用 Flex 布局

对于二维布局，多行布局时，我们通常会建议使用 Grid 布局

div{
    /* 父盒子设置块级网格，即一个网格占一行 */
    display: grid;
    /* 行内网格，即可以多个网格放在同一行 */
    display: inline-grid;
}

声明 display: grid 时，它只创建了一个只有一列的网格，所以需要后续设置网格轨道

网格轨道 grid-template

网格轨道分为 行轨道 和 列轨道，通过 grid-template 来定义

div{
    display: grid;
    /* 设置行，可以设置无限个属性，多少个属性代表划分了多少行 */
    grid-template-rows: 100px 100px 100px ... ;
    /* 设置列，可以设置无限个属性，多少个属性代表划分了多少列 */
    grid-template-columns: 100px 100px 100px ...;
    /* 使用  repeat 批量创建列 repeat(列数， 每列占用的份额) */
    grid-template-columns: repeat(3, 1fr);
}

网格轨道容器默认会从左到到右，从上到下进行内容填充。

如果不确定我们的内容有多少行，我们可以只设置列数，不进行行数设置，高度由内容撑开

div{
    display: grid;
    /* 设置3列，不设置行 */
    grid-template-columns: 100px 100px 100px;
    justify-content: space-between;
}

sub{
    /* 设置宽高，可以撑开 grid 盒子 */
    height: 100px;
    width: 100px;
}

网格轨道单位

1.网格支持使用固定长度 px 或 em

div{
    /* 设置三列 100px 的列 */
    grid-template-columns: 100px 100px 100px;
    /* 设置三列 20em 的列 ,em 是以一个字体大小为基准，如字体为16px则 1em = 16px */
    grid-template-columns: 20em 30em 40em;
}

2.百分比

div{
    /* 设置三列共全宽度的网格 */
    grid-template-columns: 20% 60% 20%;
}

3.fr 单位

div{
    /* 设置三列各占一份的列 */
    grid-template-columns: 1fr 1fr 1fr;
}

fr 在 grid 中是指一等份的意思，如果一个网格总宽 300px，刚好分了三列，每列 1px，则每一列都来分一份，即 100px，类似于 flex:1; . 在网格中比较常用。

4.auto 自动大小

/* 设置两列，第一列占100px 第二列随容器内容大小撑大 */
div{
    grid-template-columns: 100px auto;
}

网格每一个元素对齐

这是表示让网格里的元素在网格中的对齐

grid{
    /* 对齐与flex一样 */
    justify-content: space-between;
    align-items: space-between;
    
    /* 其中的顶部对齐和底部对齐 */
    align-items: strat;
    align-items: end;
}

网格元素里面的内容对齐

这是表示让网格里面的元素里的内容在元素中对齐

grid {
    /*在元素中左右对齐，不是元素在网格中对齐*/
    justify-items: center;  // 居中对齐
    justify-items: start;   // 开头对齐（如果方向正常的话是左对齐）
    justify-items: end;  // 尾部对齐（如果方向正常的话是右对齐）
    
    /* 元素中的内容上下对齐 */
    align-content: center; // 居中对齐
    align-content: start; // 开头对齐（如果方向正常的话是顶部对齐）
    align-content: end; // 开头对齐（如果方向正常的话是底部对齐）
}

网格间隔 gap

gap 可以设置行间隔，或列间隔，或行列同时间隔

div{
    /* 设置行与列 10px 间隔 */
    gap: 10px;
    /* 设置行 10px 间隔 */
    row-gap: 10px;
    /* 设置列 10px 间隔 */
    column-gap: 10px;
}

网格自动填充 auto-fill 和 auto-fit，网格响应式自动换行 minmax

如果我们想希望当浏览器的页面大小发生改变，如变大或变小时，网格的列数会随着页面大小自动调整变多或变少，可以使用联合函数动态计算

div{
    /* 设置为网格布局 */
    display: grid;
    /* 使用批量自动创建列 */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* 设置盒子最大为 1440px , 使得页面变大到一定程度后不再变大 */
    max-width: 1440px;
    /* 设置盒子随着页面变化而变化 */
    width: 80%
}

repeat(auto-fill, minmax(100px, 1fr)) 的解释

repeat 方法是批量创建网格方法，通过 repeat(列数，占有份额或大小) 来批量创建列

auto-fill 是自适应的创建合适的列，它的列数来自 minmax 方法

minmax(最小大小，最大大小)，minmax(100px, 1fr) 即定义一个列的大小时，希望这个列最小为100px，最大则为 1fr.

解释：而 auto-fill 它是判断 minmax 中的最小大小，来初始化一开始应该有多少列，比如，盒子的大小为 300px，minmax（100px, 1fr） 时，auto-fill 会根据 最小大小100px来分列，刚此时会分出 3列，当页面使盒子大小大于 400px 时，刚会自动变为 4 列。而当盒子少于 300px 时，因为minmax 要求确保最少100px，在少于300px时，就只能变为 2 列了

关于 auto-fill 和 auto-fit 的区别

当空间被子元素填满时，它们没有区别，当元素不能填满列时，它们就有区别了。区别如下：

auto-fit 会总是使当前的子元素填满所有盒子空间

auto-fill 则总是占用minmax 中的最少大小值

网格线 ，自由占用多个网格

sub {
    /* 该子盒子设置从列线1跨到列线3, 列线从1开始 */
    grid-column: 1/3;
    /* 该子盒子设置从行线1跨到列线3, 行线从1开始 */
    grid-row: 1/3;
    
    /* 该子盒子设置从列线1开始跨线，跨列数为2列, 列线从1开始 */
    grid-column: 1/ span 2;
    /* 该子盒子设置从行线1开始跨线，跨行数为2行, 行线从1开始 */
    grid-row: 1/ span 2;
    
    /* 使用分开属性来定义也可以,相当于 grid-column: 1/3; */
    grid-column-start: 1;
    grid-column-end: 3;
}

跨网格线有两种方式：

第一种是直接定义线从那条线跨到那条线，如 1/3，从线1跨到线3,共两个单元格

第二种是定义初始网格线，想跨多少个单元格，如 1/span 2，从线1开始，跨两个单元格

网格填充顺序 grid-auto-flow

Grid 默从从左到右，从上到下排列，如果我们希望以从上到下，从左到右，或其它方向，我们可以通过设置grid-auto-flow来设置其元素排列的顺序

div{
    /* 默认，从左到右,从上到下排列 */
    grid-auto-flow: row;
    /* 顺序先从上到下，再从左到右 */
    grid-auto-flow: column;
}

缩放变形策略 object-fit

有时候我们做了一些网格布局，但是当页面进行缩小到一定的程度时，在完全挤压到变形时，网格中的内容应该如何展现，这时就需要使用 object-fit 来定义

object-fit 是 css 中用于控制替换元素内容如何适应其容器尺寸的属性

div{
    /* 默认值，如果网格挤压变形，网格内的元素会同步挤压变形，但保持内容完全显示 */
    object-fit: fill;
    /* 如果网格挤压变形，网格内的元素会以原来的比例缩放，这样可能会出现网格留白，但保持内容完全显示 */
    object-fit: contain;
    /* 如果网格挤压变形，网格内的元素不会同步挤压变形，但会以某个点坐标（默认中心点）为原点，边缘会被网格盖掉，不能保持元素的完全显示 */
    object-fit: cover;
}

设置缩放变形 cover 时的中心位置 object-position

通过上面可知，如果缩放挤压时，使用 object-fit: cover 会使网格内的元素边缘被网格剪掉，默认是以元素的中心为准，四周边缘开始剪。但是我们可以设置它剪裁的位置：

（虚线代表网格挤压后仅有的内容）

div{
    /* 设置边缘剪裁 */
    object-fit: cover;
    
    /* 默认，以中心为准 */
    object-position: center;  或 50% 50%
    
    /* 以左上角为准，此时挤压时会保证左上角优先显示，则挤压会剪掉右下角 */
    object-position: top left;
    
    /* 以右下角为准，此时挤压时会保证右下角优先显示，则会先剪掉左上角 */
    object-position: bottom right;
    /* 指定位置 */
    object-position: x y;
}

控制子元素对齐方式

在一般情况下，子元素会填满整个 grid 网格，但在某些情况下，子元素并不一定会完全填满整个网格，此时我们就有需要让子元素对齐网格内的某个位置

grid {
    justify-items: 水平对齐方式（横向的对齐）;
    align-items: 垂直方向对齐（竖向的对齐）;
    place-items: 水平 垂直（混合简写法）;
    
    **********
    *|_|
    *
    *
    **********
    /* 属性值start: 左边对齐或顶边对齐 */
    justify-items: start;
    align-items: start;
    
    **********
    *
    *
    *      |_|
    **********
    /* 属性值end: 右边对齐或低边对齐 */
    justify-items: end;
    align-items: end;
    
    **********
    *
    *   |_|
    *      
    **********
    /* 属性值center: 居中对齐 */
    justify-items: center;
    align-items: center;
    
    **********
    *________
    *|       |
    *|       |
    *|_______|      
    **********
    /* 属性值stretch: 默认值，对元素拉伸填满整个网格 */
    justify-items: stretch;
    align-items: stretch;
}

多列布局 column

多列布局用于将元素的内容自动分割为指定数量的垂直列，一般用于做瀑布流比较方便，布局类似“报纸那样”

与 flex 布局的区别:

1.flex 与 grid 布局都是先通过定义多少列，然后在列中定义一个盒子，让盒子占用一列，再往盒子中填充内容

2.而 column 布局则是自动帮你把内容以列的形式填充进去，只需要定义多少列就可以了。

div{
    max-width: 1200px;
    /* 设置多列布局为多少列 */
    column-count: 4;
    /* 设置间隔 */
    column-gap: 10px;
    /* 设置列与列中间的那条分隔线，不设置就没有 */
    column-rule: 1px solid red;
    /* 多列布局像是报纸那样的布局，在元素内容超出盒子时，会被切割一部分到第二列 */
}
sub子元素 {
    /* 使用 break-inside 值以避免把元素切割显示的问题 */
    break-inside: avoid-column;
    /* 兼容性样式 */
    -webkit-column-break-inside: avoid-column;
}

关于行内块基线问题 vertical-align

对由由行内元素转成块元素的元素，比如<a>它本身是一个行内元素，因此行内元素都存在内容顶中基底线的问题，如上面图片那样，行内元素即使转为块元素，依然存在顶中基底线的格式。

如果行内元素转为据元素后，存放一些行内元素排版（如图片<img>）时，可能会让图片基于【基线】为准来存放，在图片中就会表现为“图片下方显示不完全或白边”。

此时我们只需要让图片设置为块元素，或设置 <a> 标签的基线对齐不为【基线】即可。

img{
    /* 设置内容为顶线对齐 */
    vertical-align: top;
}

img {
    /* 或设置图片为块元素，因为块元素为盒子元素不存在基线问题 */
    display: block;
}

关于基线排版问题

因为css默认把文字设置基线对齐为【基线 baseline】，所以当我们设置图片和文字排版时，即使图片和文字放在同一个盒子中，也有可能会出现图片文字不对齐的问题，此时可以通过设置文字的基线对齐解决，如下图。

img {
	vertical-align: middle;
}

h1 {
    /* 让h1 铺满div的宽度和高度*/
    width: 100%;
    height: 100%;
}

h1 a{
    /* a 标签也要铺满div的宽度和高度，但是a本身是一个行内元素，所以要先转为块元素，再设置宽高 */
    display: block;
    width: 100%;
    height: 100%;
    /* 设置背景图片，而不是使用 <img> 标签 */
    background: url(../images/logo.png) no-repeat;
}

<!-- a 标签设置文字，但是这个文字要隐藏 -->
<h1><a class="logo" href="index.html">网站名和介绍</a></h1>

h1 .logo{
    /* 让a标签中的文字使用 text-indent 负缩进，使文字缩进到a标签范围外 */
    text-indent: -999px;
    /* 让缩进出范围的文字进行溢出隐藏，这样就看不见了 */
    overflow: hidden;
}

div{
    top: 以顶边为标准，按照Html的坐标规定，top的值越大，盒子越往下移;
    bottom: 以底边为标准，按照Html的坐标规定，bottom，盒子越往上移;
    left: 以左边为标准，按照Html的坐标规定，left，盒子越往右移;
    right: 以右边为标准，按照Html的坐标规定，right，盒子越往左移;
        
}

div{
    /* 设置了相对定位，虽然盒子可以设置位置移动了，但是它的“灵魂”依然还在原位 */
    position: relative;
}

特点：

1.相对定位是相对于自身原来的位置移动距离。

2.相对定位虽然移动了，但是它原来的位置不会脱离，原来的布局不会发生改变。

绝对定位 absolute

absolute 绝对定位核心是脱离正常文档流并基于定位基准进行偏移的。

脱离文档流。

sub{
    /* 设置了绝对定位，它基于设置了 position 属性的父元素作为基准坐标开始计算 */
    position: absolute;
}

特点：

1.绝对定位会脱离正常流，不会占据空问（类似于浮动起来了）

2.绝对定位需要依靠于离它最近的一个祖先元素，且祖先元素必须也设置了定位，如果父元素不设置定位，则它会向上寻找祖先元素，直到最后寻找到视口。

parent{
    /* 父元素设置了相对定位,除了 static 属性值都可以 */
    position: relative;
}
parent sub{
    /* 子元素就能基于父元素所在的位置为基准开始计算移动位置 */
    position: absolute;
}

3.对于行内元素来说正常来说是对宽高是无效的，但是只要加了绝对定位，那么设置宽高就能生效

固定定位 fixed

fixed 固定定位是一种装元素脱离文档流并始终相对于浏览器视口定位一布局

脱离文档流。

div{
    position: fixed;
    left: ?;
    top: ?;
}

粘性定位 sticky

sticky 粘性定位，是一种混合定位模式，结合了相对定位和固定定位的特性

不脱离文档流。

div{
    /* 设置了粘性定位 */
    position: sticky;
    /* 当元素示达到 top 为 0 时，则为一个相对定位，当达到 top 为 0 时就会固定在top 为 0 外，所以说它是结合了相对定位和固定定位的特性 */
    top: 0;
    /* 粘性定位必须让父元素溢出显示，否则粘性定位不生效 */
    overflow: visible;
}

位置属性（top bottom left right）必需要设置一个，否刚粘性定位也不会生效。

叠放次序 z-index

z-index 属性用于控制元素在三维空间中的层叠顺序，当多个元素在同一平面重叠时，z-index 决定哪个元素显示在上层

/* 这个会叠在 div2 上面 */
div1{
    z-index: 2;
}

div2:{
    z-index: 1;
}

z-index 取值范围可以为：正整数、负整数，0 或 auto. 数值越大，层级越高

auto 为默认值，等同于未设置，后出现的元素会覆盖前元素，对于没有设置 position 的元素，auto 都能压在前面

生效条件：仅对带有定位元素（设置了 position）有效

定位内嵌元素距离简写 inset

当我们使用定位后，对元素进行位置设定时，如果我们希望对子元素设置位置离父元素有一定的空间，我们有几种方法实现

方法一：当父元素中嵌套子元素时，希望子元素与父元素有一定的跟离，在父元素中加入padding内边距实现

parent {
    position: relative;
    /* 方法一：通过父元素设置内边距使子元素与父元素有一定的距离 */
    padding: 3px;
}

sub {
    position: absolute;
}

方法二：使用定位设置离父元素的位置

parent {
    position: relative;
}

sub {
    position: absolute;
    /* 通过设置上下左右与父元素的位置来撑开子元素大小并离父元素有一定的距离 */
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
}

方法三：使用 inset 来表示方法二

parent {
    position: relative;
}

sub {
    position: absolute;
    /* 等价于方法二中的 top left right bottom 设置 */
    inset: 3px;
}

交互与动效

变换 transform

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

2D 平移 translate

div{
    /* 向 x轴和 y轴进行平移 */
    transform: translate(x轴, y轴);
    /* 平移 X 轴 */
    transform: translateX(值);
    /* 平移 Y 轴 */
    transform: translateY(值);
    
    /* 使用百份比，其值是相对于元素自身的尺寸来计算，与父元素无关 */
    transform: translateY(-50%);
}

注意：translate 是基于元素当前的位置进行平移，而不是基于原来位置进行平移，日常移位建议使用translate

2D 旋转 rotate

通过改变元素在平面或空间中的角度实现视觉效果

div{
    transform: rotate(角度 deg);
    /* 顺时针转90度 */
    transform: rotate(90deg);
    /* 逆时针转90度 */
    transform: rotate(-90deg);
    /* 定义以什么位置作为旋转的中心 */
    transform-origin: top left;
    /* 也可以使用单位【turn】 来定义圈数 */
    transform: rotate(1turn);  /* 旋转1圈 */
}

注意：rotate 旋转对于行内元素因为不能设置宽高、盒模型限制等异常，rotate对行内元素不生效，如果想让行内元素生交，可以让它变成行内块元素

2D 缩放 scale

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

div{
    /* 整体放大1.5倍 */
    transform: scale(1.5);
    /* 对x轴放大1.5倍，y轴放大1.2倍 */
    transform: scale(1.5, 1.2);
}

缩放还有一个独立的属性，可以不使用 transform 也可以

div{
    /* 这个属性与 transform: scale(1.5); 等效 */
    scale: 1.5;
}

2D倾斜 skew

skew 用于对元素进行二维倾斜变换，通过沿x轴或y轴扭曲元素的几何形状

div{
    /* 沿x 和沿y 倾斜 角度 */
    transform: skew(xdeg, ydeg);
    /* 沿y 倾斜 */
    transform: skewX(xdeg);
    /* 沿x 倾斜 */
    transform: skewY(ydeg);
    /* 设置倾斜的中心点 */
    transform-origin: center;
}

如果为正值，座标在中心时，倾斜的效果是上左拉，下右拉，或左上拉，右下拉

过渡 transition

div{
    /* 过渡的完整写法 */
    transition: 要过渡的属性(all表示所有属性都过渡) 持续时间 速度曲线 延迟时间;
    /* 所有属性都过渡，持续时间 1 秒，曲线是线性，1秒之后再执行 */
    transition: all 1s liner 1s;
}

/* 过渡曲线 */
ease: 慢->加速->慢，适合大多数自然过渡，默认值
liner: 匀速
ease-in: 慢->加速到终点
ease-out: 快速->慢到终点
ease-in-out: 慢开始->中间加速->慢结束，与ease 有一定区别
cubic-bezier(x1,y1,x2,y2): 贝塞尔曲线，通过四个值（0~1范围内）自定义速度曲线，实现弹跳，骤停等创意效果

关于贝塞尔曲线的值，可以参考下面网站来调试取得值：

变换函数的复合写法

复合写法是指某个元素同时执行多个变换，如果设置两个 transform 是不会生效的，如果要让一个元素同时满足多个变换，需要使用复合写法

div{
    /* 执行时会先执行 C() 再执行 B() 最后执行 A() */
    transform: A() B() C();
    /* 前后执行的顺序需要严格规定，否则两个变换会互相影响产生其它效果 */
    transform: translateX(100px) rotate(360deg);
}

注意：执行顺序是从最后开始。

3D 变换

3D 旋转 rotateXYZ

对于Web网页的三维座标示例如下

div{
    /* 对X轴进行旋转 可以看作单扛 */
    transform: rotateX(deg);
    /* 对Y轴进行旋转 可以看作钢管舞 */
    transform: rotateY(deg);
    /* 对Z轴进行旋转 可以看作面向风扇叶转动 */
    transform: rotateZ(deg);
}

关于旋转方向：使用左手法则

X轴旋转我们可以看作使用左手的示例：四指握向就是正值时的旋转方向

Y轴旋转我们也可以看作使用左手的示例：四指握向就是正值时的旋转方向

Z轴旋转使用母指指向自己：四指握向就是正值时的旋转方向

注意：如果旋转没有质感，请添加透视属性。

关于旋转后背面是否可见

默认的设置中，元素的旋转到背面后，是可以看到元素的镜面效果的，但是如果我们不希望元素旋转后看到背面的效果，我们可以设置 backface-visibility 值

div{
    /* 逆向转180度，显示背面 */
    transform: rotateY(-180deg);
    /* 使元素转向背面时，隐藏不显示背面 */
    backface-visibility: hidden;
}

3D位移 translate3d

在3D空间中同时沿X, Y, Z轴平移元素，支持更复杂的空间定位

我们对元素做位移时，建议使用 3D 变换来实现，因为它可以强制启用GPU渲染，能有效提高流畅度

div{
    /* 对元素进行3D位移 */
    transform: translate3d(x轴，y轴，Z轴);
    /* 利用3D位移来做2D变换，可以启用GPU加速提高流畅度 */
    transform: translate3d(0, -2px, 0);
    /* 单独平移Z轴,需要设置透视才会有效 */
    transform: translateZ(100px);
}

开启Z轴的3D空间 transform-style: preserve-3d;

当我们为元素设置 translateZ 使元素往前凸时，我们需要css开启3D空间的支持，否则translateZ不会生效

父容器设置 transform-style: preserve-3d; 使子元素保留3D位置（即保留3D位移效果）

parent_div{
    /* 父元素开启3D空间，默认值 flat 会使所有Z轴位移都左到一个平面里 */
    transform-style: preserve-3d;
}

sub{
    /*子元素中设置了向Z轴位移60px 元素内容会向屏幕方向凸出 */
    /* 但要使它能生效，需要父元素开启3D空间 */
    transform: translateZ(60px);
}

3D 透视设置

透视是指在平面上描绘物体的空间关系的方法或技术。css通过模拟近大远小的程度

视距越小，物体越大 perspective

parent {
    /* 设置视距大小。视距越小，物体越大，透视效果越强 */
    perspective: 1000px;
}

1.数值越小，透视效果越强

2.给父元素添加（属性类，如上面），里面所有子元素都会添加透视效果

3.给子元素添加（方法类，如下面），当前元素添加透视效果，perspective()必须为第一个值。

sub {
    /* 设置当前元素旋转时设置透视，注意：perspective() 必须是第一个属性 */
    transform: perspective(1000px) rotateX(45deg);
}

动画

css3 中的动画（animation）是一种通过定义关键帧和动画属性来实现元素动态效果的技术，利用GPU加速渲染，避免频繁的js计算开销，而且解决了过渡只能定义两帧状态的局限性，可以利用关键帧实现更复杂的动画。

它还支持用户操作（如悬停、点击）结合，提开网页表现力。

动画与过渡的区别在于，过渡需要用户主动触发，比如鼠标悬停时，而动画则可以全自动播放，不局限于用户触发。

定义动画 @keyframes

/* 第一步：定义动画 */
@keyframes 动画名 {
    /* 定义关键帧的变化 */
    0% {}
    20% {}
    50% {}
    100% {} /* 如果最后帧和开始帧一样的话，最后帧可以省略 */
}
/* 通过 from 和 to 来定义前与后 */
@keyframes 动画名 {
    /* from 相当于 0%， to 相当于 100% */
    from {}
    to {}
}

/* 第二步：需要使用动画的元素中定义使用动画 */
div{
    animation: 动画名 动画时长;
}

使用动画 animation

div{
    /* 必须要的属性 */
    animation: 动画名 持续时间;
    /* 完整的参数值 */
    animation: 动画名 持续时间 速度曲线 延迟时间 播放次数 播放方向 执行完毕状态;
    /* 播放 move 动画，持续时间为1秒，曲线为慢快慢，不延迟直接开始播放，播放次数1次 播放方向为交替 执行完毕后回到第一帧 */
    animation: move 1s ease 0s 1 alternate backwards;
}

速度曲线：这与 transfrom 中的速度典线一致，也可以使用 贝塞尔曲线定义运动行为

延迟时间：指动画在多少时间后再开始播放动画

播放次数：可选数字，和 infinite。数字指固定循环播放多少次，而 infinite 表示无限循环

播放方向：指是否倒放等。normal 为正播放，reverse 为倒播放，alternate为正播放完后倒播放，即交替播放

执行完毕状态：默认为none.即播放完后不做任何处理。forwards 即保留最后一帧，backwards 即回到第一帧。

使用动画分开写属性

animation 可以拆分出多个属性单独设置，其属性如下：

div {
    /* 动画速席曲线，支持 linear，cubic-bezier() */
    animation-timing-function: ease;
    /* 动画延迟时间，可设为负值（会跳过部分动画） */
    animation-delay: 0s;
    /* 播放次数，可选数字和 infinite */
    animation-iteration-count: 1 或 infinite 无限;
    /* 播放方向，可选 reverse(反向播放)，alternate(来回交替) */
    animation-direction: alternate;
    /* 执行完毕后的状态，动画结束后是否保留样式（如 forwards 保留在最后一帧） */
    animation-fill-mode: backwards;
    /* 暂停或者继续动画，需要单独设置 paused 暂停动画 */
    animation-play-state: running;
}

逐帧动画 steps()

逐帧动画是指由一个帧一个帧的绘制一个动画，在css动画中用于控制动画分段执行的计时函数，它通过将动画分割为离散的步骤，实现类似传统帧动画的跳跃效果。

逐帧动画是应用在 速度曲线 属性上的一个值函数，指让动画定义为一个有多少帧画面的图片组成，在动播放时就按照一张一张帧播放就行，但是需要提供一张精灵图，用于精灵图切换

div {
    /* 设置一张精灵图作为背景 */
    background: url(精灵图url) no-repeat;
    /* 设置原始的背景图显示位置 */
    background-position: 0px 0px; 
}

/* 设置关键帧，定义精灵图按动画形式对精灵图的位置进行变换 */
@keyframes move {
    0% {
        background-position: 0px 0px;
    }
    
    100% {
        background-position: 精灵图结尾x坐标px 0px;
    }
}

/* 为这个元素设置逐帧动画 */
/* 精灵图中含有多少个帧画面，setps 中就传入多少 */
/* 其含义是，setps 会为我们把一个动画割开多少个瞬间，当精灵图刚好移动到合适的坐标帧画面时，显示这个瞬间 */
div {
    animation: move 1s steps(25) infinite;
}

新特性前沿技术

svg 图片

SVG 是一种基于XML的矢量图形标准，由W3C制定，支持无损缩放、交互性和动态效果。

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

要使用svg，则svg图标必须包裹在 <svg> 标签内

<path> 路径：通过d属性定义路径指令，M 移动画笔到坐标点，Z 闭合路径

<svg>
    <path d="M.... Z">  图标路径  </path>
</svg>

图标可以在 http://www.iconfont.cn 中获取

svg 常用属性

svg {
    /* 填充svg图片的颜色（支持渐变和图案），不需要的话改为 none */
    fill: 颜色值 或 none;
    
    /* 定义描边颜色（支持颜色值，渐变和图案） */
    stroke: 颜色值;
    
    /* 描边宽度 支持px，%，em 等单位 */
    stroke-width: 2px;
    
    /* 虚线模式（实线长度+间隔长度） */
    stroke-dasharray: 10;
    
    /* 调整虚线与间隔的起始位置 */
    stroke-dashoffset: 100;
}

fill 填充颜色

要改svg图片的颜色，不能设置 color 属性，而是使用 fill 属性

svg {
    /* 如果设为 none 则它会变成一个空心 */
    fill: red;
}

stroke 描边颜色

svg {
    stroke: blue;
}

stroke-width 描边线粗细

svg {
    stroke-width: 10;
}

stroke-dasharray 描边虚线

描边虚线 需要提供一个或两个估，如果提供一个值，则实线和虚线使用同样的距离，如果提供两个值，则第一个值表示实线的长度，第二个值是间隔

svg {
    /* 实线和虚线间隔都为 10 单位 */
    stroke-dasharray: 10;
    /* 实线长度10单位，间隔20单位 */
    stroke-dasharray: 10 20;
}

案例：以下是 stroke-dasharray: 100 100; 的效果（stroke: none 空心）

stroke-dashoffset 调整虚线起始偏移量

stroke-dashoffset 增大，向路径起点移动，描边线条会慢慢擦除

注意，它需要设置虚线，它是基于虚线的偏移

svg{
    /* 先设置虚线长度为3000,让它线本身就很长 */
    stroke-dasharray: 3000;
    /* 设置 stroke-dashoffset 变化，可以做到画一个图的动画 */
    stroke-dashoffset: 从 3000 ~ 0 变化,从没有到有;
}

svg path {
    animation: move 1s liner;
}

/* 值从小变大是在擦除，由大变小为描绘 */
@keyframes move {
    0% {
        stroke-dashoffset: 3000;
    }
    
    100%{
        stroke-dashoffset: 0;
    }
}

注意：js可以通过 getTotalLength() 方法来获取svg图标的实际长度

clip-path 复杂裁剪

能创建复杂的裁剪形状，使元素仅显示被裁剪区域的内容

我们可以通过可视化工具来做一些我们需要的形状，而且只做裁剪，不会对内容产生影响。

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

示例：

/* 使用 circle() 创建一个圆的裁剪 */
div{
    /* 第一个是扩散范围，at 之后的两个参数是圆心位置 */
    clip-path: circle(50.0% at 50% 50%);
    /* 自定义每个点的坐标来实现裁剪，具体可以使用上方的网址创建 */
    clip-path: polygon(点1x 点1y, 点2x 点2y, 点3x 点3y, ...);
}

效果示例1：车体的裁剪（两张图片叠放，使用裁剪

效果示例2:字母灯光（两个层，一张灰层的字，一张彩色的字，利用裁剪）

<h1>HELLOWORLD</h1>
h1::after{
    content:'HELLOWORLD';
    position: absolute;
    top:0;
    left:0;
    /* 设置文字为透明，方便让background渐变色蒙板 */
    color: transparent;
    /* 设置为渐变背景色 */
    background: linear-gradient(to right, #色1, #色2, #色3, #色4);
    /* 设置渐变色背景为文字蒙板 */
    background-clip: text;
    
    /* 设置裁剪动画来回走 */
    animation: move 5s ease infinite;
}
@keyframes move {
    0%{
        /* 开始的时候，让裁剪放在最左侧 */
        clip-path: circle(50% at 0% 50%);
    }
    
    50% {
        /* 让裁剪放在最右侧 */
        clip-path: circle(50% at 100% 50%);
    }
    
    100% {
        /* 回到最左侧,或这个省略也可以 */
        clip-path: circle(50% at 0% 50%);
    }
}

滤镜 filter

filter 滤镜可以对元素及其子元素进行实时图像处理，无需修改原始素材

div{
    filter: 值;
}

具体值如下

blur() : 高斯模糊 (px)
brightness(): 调整元素亮度 (%),100% 或 1 为原始亮度，<100% 或 <1 变暗，反之变亮
contrast() : 调整元素对比度 (%) 同上
saturate() : 调整背景饱和度 (%),取值 0% 为无色彩，100%为原饱和度， >100 更高饱和度
grayscale() : 将元素转换为灰度图 (%), 0% 为原始色彩，100% 或 1 为完全灰色
hue-rotate() : 调整元素色相 (deg) 通过角度来调整色相
sepia() : 将元素转换为深褐色（%） 复古效果，0% 为原始色彩，100% 或 1 为完全深褐色
drop-shadow() : 为元素添加投影 类似 box-shadow,但支持非矩形元素，drop-shadow(5px 5px 5px #fff)

背景滤镜 backdrop-filter

backdrop-filter 在css中主要针对元素背后的区域（即背景）的滤镜效果应用属性，filter 主要针对整个元素，包括内容，它通常与半透明背景配合使用，能实现类似“毛玻璃”的视觉效果。

div{
    background: transparent;
    /* 让元素的背景添加模糊效果,并可以多个值同时叠加使用 */
    backdrop-filter: saturate(150%) blur(10px);
}

具体值如下：

blur() : 高斯模糊 (px)
brightness(): 调整元素亮度 (%),100% 或 1 为原始亮度，<100% 或 <1 变暗，反之变亮
contrast() : 调整元素对比度 (%) 同上
saturate() : 调整背景饱和度 (%),取值 0% 为无色彩，100%为原饱和度， >100 更高饱和度
grayscale() : 将元素转换为灰度图 (%), 0% 为原始色彩，100% 或 1 为完全灰色
hue-rotate() : 调整元素色相 (deg) 通过角度来调整色相
sepia() : 将元素转换为深褐色（%） 复古效果，0% 为原始色彩，100% 或 1 为完全深褐色
drop-shadow() : 为元素添加投影 类似 box-shadow,但支持非矩形元素，drop-shadow(5px 5px 5px #fff)

其它效果

背景滤镜：毛玻璃模糊 backdrop-filter: blue()

我们可以通过设置元素背景滤镜，使元素的背景有一定的透明且气玻璃效果

div{
    backdrop-filter: blue(10px);
}

添加倒影

div {
    /* 添加倒影 */
    box-reflect: 倒影方向 倒影距离 倒影图像;
    /* 兼容性样式 */
    -webkit-box-reflect: below 1px liner-gradient(transparent, #002);
}

倒影方向（必选）：

above: 倒影在元素上方（顶部）
below: 倒影在元素下方（底部，常用）
left: 倒影在元素左侧
right: 倒影在元素右侧

倒影图像（可选）：

liner-gradient：线性渐变，实现从清晰到透明的过渡，避免倒影边缘生硬

动画时间线 animation-timeline

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

滚动时间线

动画进度与页面容器的滚动位置关联

scrollbar{
    animation: move 2s;
    /* 让动画绑定到时间线，上面的动画设置将会失效 */
    /* 动画会按照滚动条的位置来演变动画 */
    animation-timeline: scroll()
}

视图时间线

动画进度与元素进入、离开视口的可见性关联

img {
    animation: scale 2s;
    /* 当元素到达视口时，才会根据滚动条进度进行演变动画 */
    animation-timeline: view();
}

/* 0% 时正常大小，透明度为0.2，演变到 100% 放大1.5倍，不透明 */
@keyframes scale {
    0%{
        transform: scale(1);
        opactiy: 0.2;
    }
    100%{
        transform: scale(1.5);
        opacity: 1;
    }
}

变量与函数

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

变量

CSS 变量是一种动态存储和复用值的机制。它可以让样式管理更灵活，可维护。

定义变量值需要在名字前加 " -- "

/* 声明一个变量，名字为 color 值为 #fff */
--color: #fff;

要使用这个变量时，可以通过 var() 方法获取

/* 使用上面定义的变量 */
color: var(--color);

作用域

作用域可分为全局作用域和局部作用域，全局作用域需要把变量声明在 :root 中，而局部作用域则是在css元素样式定义中

:root{
    /* 在这里定义的变量将全局可用 */
    --style: #000;
}

div{
    /* 在其它地方也能使用 */
    color: var(--style);
}

局部作用域，可以在本元素及其子元素中使用

div{
    /* 在元素样式中声明的变量为局部作用域，只能在当前的样式中使用 */
    --color: #fff;
    /* 在当前样式中使用 */
    color: var(--color);
}

div sub {
    /* 在它的子元素中也可以使用 */
    color: var(--color);
}

p{
    /* 在别的地方使用无效 */
    color: var(--color);
}

计算函数 calc()

calc 计算函数可以执行数学运算（加减乘除），支持混合单位

sub{
    /* 混合计算，这里表示 如果父盒子有100 则当前子盒子有33 ,通过calc计算减去22px */
    width: calc(33% - 20px)
}

使用案例：精灵图位移计算

/* 原始的图，我们都是手动的设置精灵图的位置 */
background-position: 0 0;
background-position: 0 -58;
background-position: 0 -116;
background-position: 0 -174;

/* 现在我们可以在每个元素定义变量，使用时利用变量计算 */
<ul>
	/* 定义li时，在内联声明变量,供样式中使用 */
	<li style="--i:0;"></li>
	<li style="--i:1;"></li>
	<li style="--i:2;"></li>
	<li style="--i:3;"></li>
</ul>

ul li{
    /* 通过获取上面的 --i 变量 并计算 y 的坐标值，一条样式就能达到效果 */
    background: url(./img/spring.jpg) no-repeat 0 calc(var(--i) * -58px) 
}

使用案例：炫酷菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷导航条</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: #333;
        }

        .menu {
            position: relative;
            margin: 200px auto;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000;
            text-align: center;

            /* background-color: #fff; */

            /* padding-left: 20px; */
        }

        /* 中间按钮的原始样式 */
        .menu .btn {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
            border-radius: 50%;
            background-color: #333;
            border: 2px solid #fff;
        }

        /* 中间按钮i标签样式 */
        .menu .btn i {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 中间按钮+号样式 */
        .menu .btn i svg {
            fill: #fff;
            width: 20px;
            height: 20px;
            transition: all 1.3s ease;
        }

        /* span的原始样式 */
        .menu span {
            position: absolute;
            transition: transform .5s ease calc(var(--i) * .1s);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background-color: #333;
            border: 2px solid var(--col);
            border-radius: 50%;
            cursor: pointer;
            color: var(--col);
        }

        /* 中间按钮悬停时的效果，使中间的+号旋转315度 */
        .menu:hover .btn i svg {
            transform: rotate(315deg);
        }

        /* 让每个span一边位移，一边旋转 */
        .menu:hover .btn~span {
            transform: rotateZ(calc(var(--i) * 45deg)) translateX(80px);
        }

        .menu .btn~span i {
            transition: transform .5s ease calc(var(--i) * .1s);
        }



        /* 让里面的小图标反向转回来，不然图标都会被旋转45度 */
        .menu:hover .btn~span i {
            transform: rotateZ(calc(var(--i) * -45deg));
        }

        /* 图标span悬停时的效果，span背景颜色和图标颜色变化 */
        .menu span:hover {
            box-shadow: 0 0 10px var(--col),
                0 0 20px var(--col),
                0 0 50px var(--col);
            background-color: var(--col);

            /* 覆盖原来的过渡效果 */
            transition: all .1s;
        }

        .menu span:hover i {
            color: #333;
            transition: all .1s;
        }
    </style>
</head>

<body>
    <div class="menu">
        <div class="btn">
            <i class="iconfont icon-add"><svg t="1767500613806" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5011" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <path
                        d="M832.234 448H575.25V191.016c0-35.346-28.653-64-64-64s-64 28.654-64 64V448H191.766c-35.346 0-64 28.654-64 64s28.654 64 64 64H447.25v256.984c0 35.346 28.654 64 64 64s64-28.654 64-64V576h256.984c35.346 0 64-28.653 64-64s-28.654-64-64-64z"
                        p-id="5012"></path>
                </svg></i>
        </div>
        <span style="--i:0; --col:#ff2972;"><i class="iconfont icon-microsoft"></i></span>
        <span style="--i:1; --col:#fee800;"><i class="iconfont icon-index"></i></span>
        <span style="--i:2; --col:#04fc43;"><i class="iconfont icon-iconindex"></i></span>
        <span style="--i:3; --col:#f300f1;"><i class="iconfont icon-index100"></i></span>
        <span style="--i:4; --col:#00b0fe;"><i class="iconfont icon-picture"></i></span>
        <span style="--i:5; --col:#ff2972;"><i class="iconfont icon-linear-new-office-data-trend-index"></i></span>
        <span style="--i:6; --col:#fee800;"><i class="iconfont icon-elara-icon-indexmanagement"></i></span>
        <span style="--i:7; --col:#f300f1;"><i class="iconfont icon-duoshouxinde"></i></span>

    </div>
</body>

</html>

单位

vw 和 vh 单位

vw 和 vh 是 css 中的视口单位，它是基于浏览器视口的尺寸来定义元素的尺寸和位置的专用单位，会根据视口的大小来变化其每单位所包含的量

vw 和 vh 始终基于浏览器可视区域的实时尺寸计算（不包含浏览器工具栏、标签栏等界面元素），它们的值会自动更新，特别适合响应式设计、全屏布局、移动适配等场景

计算:单位的计算视为，把视口切成100等份，每1个单位即是一等份，即1单为=视口宽高的1%

/* 如果视口的宽度为 1920*1080 来算 */
width: 1vw;  -> 19.2 px
height: 1vh; -> 10.8 px

注意：它与 % 单位对比区别：% 是以它的父元素为标准计算的，而vh 和 vw 总是以视口为标准计算

em 相对单位

em 是基于元素中的字体大小作为标准认定的一种可变单位,一般我们用于定义字体大小，由页面设置基准字体大小后，在元素中使用 em 来设置字体的大小倍数

div{
    /* 当字体大小为12px 时， 1em = 12px */
    font-size: 12px;
    width: 1em; 
}

rpx 移动基准单位

rpx 是用在移动端（尤其是用在小程序上），它以一个明确的分辩率作为基准，这个分辩率是 750 ，不管这个移动设备的屏幕大小多大，分辩率多高（或多低）都会被切分成750份，每一个rpx 就是一份

div{
    /* 如果该屏幕的分辩率为 1000，则分成750分后，每分为 1.333,因此，1rpx = 1.333px */
    width: 1rpx;
}

vmin 和 vmax

当设备旋转（如果手机从竖屏转为横屏）时，视口的宽高会变化，但vmin 始终取当前宽高的较小值，vmax取较大值。

这通常是因为，当移动端页面在手机中显示时，手机使用了横屏时，原来的 vw 表示手机的屏宽，横屏后，vw就变成了手机的屏长，这使得页面会放大很多，如下图就是当手机横屏时出现的情：

vmin 指的是，在一个屏中，取它最小的那个尺寸，不管是横屏还是竖屏，我们始终取它最小的那个尺寸作为标准

vmax 刚是取屏中的最大值。

div{
    /* 单位与 vw 一样使用 */
    width: 100vmin;
    height: 100vmin;
}

rem 单位

rem 单位，总是依照 html 根元素中的 font-size 属性的值作为标准，除了html其它都不认

rem与em的区别：rem总是以html的font-size属性值作为标准，而em则会依照自身或其父元素的font-size属性值作为标准

html{
    font-size: 16px;
}
/* 当 html 根元素中设置了 font-size 大小时,rem单位就会依照它作为一个单位值计算 */
div{
    /* 这里等价于 16px */
    width: 1rem; 
}

通过媒体查询来动态修改 font-size 值以匹配不同屏幕的大小

html{
    font-size: 20px
}
@media screen and (max-width: 320px) {
    html {
        font-size: 17px;
    }
}
@media screen and (max-width: 540px) {
    html {
        font-size: 28px;
    }
}

通过js方式引入匹配

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

通过动态调整根元素（<html>）的 font-size, 结合 rem 单位实现页面自适应

// 引入这个文件就可以自动适配了
<script src="flexible.js"></script>
function setRemUnit(){
    var rem = docEl.clientWidth / 10;
    docEl.style.fontSize = rem + "px";
}

有关flexible.js文件在assert中保存了。

VW 与 REM 方案对比

REM 方案比较早出现，目前比较推荐使用 vw 方案

/* vw 方案 */
基础单位：1vw = 视窗宽度的 1% (指css像素，非物理像素)
实现方式：直接使用 vw 单位，无需js
设计稿换算：元素尺寸 = 设计稿尺寸 / 设计稿宽度 * 100vw
动态适配：视窗宽度变化时，vw 单位自动按比例缩放
优先级：优先使用

/* rem 方案 */
基础单位：1 rem = html{} 的 font-size 值（动态计算）
实现方式：通过 js 或媒体查询动态调整根元素的 font-size
设计稿换算：元素尺寸 = 设计稿尺寸 / 基准字体大小
动态适配：根元素字体动态调整，所有 rem 单位同步缩放
优先级：根据需求使用

移动端开发

以前的pc端我们需要设置版心，因为屏幕够大，可以设置版心作为一个盒子约束内容布局，但是在移动端我们是不再需要设置版心了，因为我们会根据移动端的屏幕大小做适配布局，屏幕多大，版心就多大，所以就没有版心的概念了。

视口标签 meta

视口标签是用于保证我们的页面宽度和移动端屏幕大小一致用的。在移动端上比较重要

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta> 标签定义了移动端的一些基本信息，具体如下:

width: 设置视口宽度，取值为 device-width 或具体值，默认 980px (移动端默认)
移动端默认的980px称为布局视口，device-width 以匹配设备宽度称为理想视口

initial-scale: 页面初始缩放比例，取值 1.0 
与 width 和 device-width 配合使用，避免缩放混乱

minimum-scale: 允许用户缩放的最小比例，取值 0.1
若设为1.0，则用户无法放大页面

maxomum-scale: 允许用户缩放的最大比例，取值 10.0
限制缩放范围，但可能影响无障碍访问

user-scalable: 是否允许用户手动缩放，取值 yes 或 no 
禁用缩放可提升体验，但需谨慎使用（无障碍场景需权衡）

物理像素和CSS像素

物理像素是指设备屏幕的实际像素数量，即硬件层面的像素点总数，比如屏幕的分辩率1920*1080，则物理像素则是 1920 * 1080

CSS像素是指在CSS中使用的虚拟像素单位，用于布局和样式计算，它是一个抽象概念，不直接对应物理像素，而是通过设备像素万DPR与物理像素的关联

DPR是像素比，即倍率，假如在PC上一个字母的大小，所占用的像素是10个，如果这个字母要在高分辩率手机屏幕上表现同样的大小，则这个字母应该放大多少倍，就是DPR.

举例：iPhone15Pro的物理分辩率为 1179 * 2556，dpr 为3，则如果要让内容能与PC一样大小，能存放的内容分辩率为 393 * 852，内容将矢量放大3倍

移动端设计稿通常以 750px 作为标准宽度（主要是小程序和H5）

移动端适配方案

响应式适配

套代码通过响应式方案完成PC、移动端的适配

单位适配

PC和平板通过响应式完成适配

单独制作

手机端页面，通过rem和vw单位完成页面适配

div{
    /* 在单位上使用 vw 作为标准 */
    width: 10vw;
}

响应式网页布局

响应式布局是一种网页设计方法，使网页能够根据用户设备的屏幕尺寸，分辨率，方向（横竖屏）等特性身动调整布局和内容，提供一致且优化的用户体验。其核心目标是“一次设计，多端适配”

媒体查询

媒体查询是css3的功能，允许根据设备的特性（如屏幕宽高，分辨率，设备类型等）应用不同的样式规则。它是实现响应式设计的核心技术

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

媒体查询需要提供两个参数，第一个参数是提供要查询的属性，第二个参数是提供限制值

/* 范例样式：通过不同屏幕定制不同的 font-size  */

/* 这里表示：屏幕宽度【最大】是320，也就是说，屏幕宽度 小于等于 320px 时会生效 */
@media screen and (max-width: 320px) {
    html {
        font-size: 17px;
    }
}

/* 这里表示: 屏幕宽度【最小】是540px，也就是说，屏幕宽度 大于等于 540px 时会生效 */
@media screen and (min-width: 540px) {
    html {
        font-size: 29px;
    }
}

/* 这里表示：因为上面小于320px和大于540px时的样式已生效，所以屏幕宽度 540px > 当前屏宽 > 320px 时生效 */
html {
    /* 此处会使屏幕宽度 320px ~ 540px 之间生效 */
    font-size: 20px; /* 也可以使用 vw */
}

/* 媒体查询还能支持多个参数同时实现 */
/* 
这里表示：（min-width: 720px）表示最小 720px 即 
屏宽 大于等于 720px 时生效

（max-width: 1200px）表示最大 1200px 即
屏宽 小于等于 1200px 时生效

结合起来就是 720px < 屏宽 < 1200px 时生效
*/
@media screen and (min-width: 720px) and (max-width: 1200px) {
    html {
        font-size: 20px;
    }
}

我们可以以简写的方式，它的意思默认高是screen

/* 简写省略 screen */
@media (max-width: 1200px) {
     html {
        font-size: 20px;
    }
}

TDK 网站优化标签

TDK指的是三样单词的缩写，分别是【Title】，【Description】，【Keywords】三个元标签，它们是网站SEO优化的核心元素。直接影响搜索引擎对网页的理解和排名。

Title: 决定搜索结果的标题显示，是搜索引擎判断页面主题的首页依据。
Description: 生成搜索结果的摘要描述，影响用户点击率
Keywords: 提供页面主题关键词（尽管现代搜索引擎已弱化其权重，仍部分参考）
三者共同构成网页的“第一印象”，优化不当可能导致排名下降或点击流失

<title>Vivo手机官方网站</title>
<meta name="keywords" content=""></meta>
<meta name="description" content=""></meta>

鼠标样式 cursor

cursor 属性用于控制鼠标指针在元素上的显示样式，通过改变光标形态可以向用户传递交互提示

div{
    /* 默认箭头（系统箭头） */
    cursor: default;
    /* 手型，可用于点击<a> */
    cursor: pointer;
    /* |型坚线，编辑文本形 */
    cursor: text;
    /* 等待，沙漏形 */
    cursor: wait;
    /* 帮助，带？的箭头 */
    cursor: help;
    /* 禁止形 */
    cursor: not-allowed;
    /* 手掌抓取 */
    cursor: grab;
    /* 手掌抓取中 */
    cursor: grabbing;
    /* 放大+号 */
    cursor: zoom-in;
    /* 缩小-号 */
    cursor: zoom-out;
}

自定义滚动条样式

滚动条有四个样式，分别是【滑块宽高】 【轨道】【滑块】【鼠标经过】

我们可以设置如下参数

/* 设置滑块的宽高 */
::-webkit-scrollbar {
    width: 10px;
}

/* 设置轨道背景颜色，圆角等样式 */
::-webkit-scrollbar-track{
    background: var(...)
}

/* 设置滑块样式 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(); /* 使滑块变成渐变色 */
    border-radius: 10px; /* 设置圆角 */
}

/* 设置鼠标经过滑块时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(); /* 滑动滑块时的渐变色稍微与静置时差不多就可以 */
}

书写顺序

网页设计实例

使用 BootStrap 框架设计一个简单的网页布局

/* base.css 中配置基本的样式 */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--vivo-dark);
    color: #fff;
    overflow-x: hidden;
}

a {
    color: #fff;
    text-decoration: none;
}

/* 这个页面的主要css配置 */
:root {
    --vivo-blue: #1976d2;
    --vivo-cyan: #00e5ff;
    --vivo-purple: #7b1fa2;
    --vivo-dark: #121212;
    --vivo-card-bg: #1e1e1e;
    --neon-glow: 0 0 10px rgba(0, 229, 255, 0.7),
        0 0 20px rgba(0, 229, 255, 0.5),
        0 0 30px rgba(0, 229, 255, 0.3);
}

/* 导航栏菜单的总体样式 */
.navbar {
    background-color: rgba(18, 18, 18, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
}

/* logo 的发光原理是，先让盒子有个渐变背景，然后让文字裁剪 */
.navbar-brand,
.navbar-brand:hover {
    font-size: 1.8rem;
    font-weight: bold;
    /* 让背景有渐变 */
    background: linear-gradient(45deg, var(--vivo-cyan), var(--vivo-blue));
    /* 以文字作裁剪 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 文字阴影 */
    text-shadow: var(--neon-glow);
}

/* 导航栏左侧菜单文字样式 */
.nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 10px;
}

/* 设置下划线动画的样式 */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, var(--vivo-cyan), var(--vivo-blue));
    transition: width 0.3s ease;
}

/* 导航栏左侧菜单文字:hover样式，产生下划线动画 */
.nav-link:hover::after {
    width: 100%;
}

/* 导航栏左侧菜单文字:hover样式，产生文字阴影 */
.nav-link:hover {
    text-shadow: var(--neon-glow);
}

/* 导航栏右侧菜单图标样式 */
.icons a {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 10px;
}

/* 因为要让右侧图标做文字阴影，所以要对图标设置:hover样式 */
.icons a:hover i {
    text-shadow: var(--neon-glow);
}

.banner .carousel-item img {
    width: 100%;
    height: 50vw;
}

/* 在banner模块下，设置一个线性渐变的遮罩，将下面的内容渐变式的隐藏 */
.banner {
    mask-image: linear-gradient(rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
}

/* banner的页码提示器向上移动 */
.banner .carousel-indicators {
    margin-bottom: 15rem;
}

/* banner的文字提示向上移动 */
.carousel-caption {
    margin-bottom: 15rem;
}

/* 热门产品模块的文字提示 */
.hot-products .info {
    color: rgba(255, 255, 255, 0.7);
}

/* 热门产品模块的卡片组 */
.hot-products .card {
    overflow: hidden;
    background-color: var(--vivo-card-bg);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

/* .hot-products .card-img {
    padding: 30px; 
    overflow: hidden;
}  */

/* 热门产品模块的卡片标题 */
.card-body .card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}

/* 热门产品模块的卡片描述 */
.card-body .card-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

/* 热门产品模块的卡片价格 */
.card-body .card-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--vivo-cyan);
}

/* 热门产品模块的卡片价格前缀 */
.card-price::before {
    content: '￥';
    color: var(--vivo-cyan);
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--vivo-cyan);
}

/* 热门产品模块的卡片购买按钮 */
.hot-products .card-body .btn-buy {
    color: var(--vivo-dark);
    background: none;
    color: var(--vivo-cyan);
    border: 1px solid var(--vivo-cyan);
    border-radius: 25px;
    width: 100%;
    padding: 10px 0;
    font-weight: bold;
}

/* 热门产品模块的卡片购买按钮:hover样式 产生霓虹辉光 */
.btn-buy:hover {
    box-shadow: var(--neon-glow);
    text-shadow: var(--neon-glow);
    color: var(--vivo-dark);
}

/* 热门产品模块的卡片:hover样式 产生微微向上移动的效果 */
.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--neon-glow);
}

/* 未来科技模块的标题 */
.future-tech {
    position: relative;
    background: url(./img/bg.jpg) no-repeat center center/cover;
    /* 设置背景图片为固定定位图片，滚动不会移动背影图片 */
    background-attachment: fixed;
}

/* 为未来科技模块的标题添加一个半透明的遮罩层，使文字更易读 
在这里设置了absolute会把整个盒子都盖住了（包括文字），所以在文字那个盒子里也设置position-relative
使得文字可以左在before的遮罩层上
*/
.future-tech::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}


/* 未来科技模块的图标 */
.future-icon {
    font-size: 3rem;
    text-shadow: var(--neon-glow);
    color: var(--vivo-cyan);
    margin-bottom: 1rem;
}

.future-title {
    font-size: 1.7rem;
    font-weight: bold;
    color: #fff;
    padding: 10px 0;
}

.future-description {
    color: #aaa;
}

/* 底部模块 */
.footer {
    background-color: var(--vivo-dark);
    padding-top: 50px;
    height: 400px;
}

.footer .menu-header dt {
    position: relative;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
}

.footer .menu-header dt::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 50px;
    height: 2px;
    color: rgba(255, 255, 255, 0.7);
    background: linear-gradient(45deg, var(--vivo-cyan), var(--vivo-blue));

}

.footer .menu-header>dd a {
    display: block;
    font-size: 1rem;
    padding: 5px 0;
    transition: all 0.2s ease;
}

.footer .menu-header>dd:hover a {
    transform: translate(8px);
    color: var(--vivo-cyan);
    text-shadow: var(--neon-glow);
}

.about .icons {
    display: flex;
}

.about .icons a {
    margin-top: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    margin-right: 10px;
    transition: all 0.3s ease;
}

.about .icons a i {
    font-size: 1.3rem;
}

.about .icons a:hover {
    background: linear-gradient(45deg, var(--vivo-cyan), var(--vivo-blue));
    color: #fff;
    box-shadow: var(--neon-glow);
    transform: translateY(-3px);
}

.about .icons p {
    color: rgba(255, 255, 255, 0.7);
}

.subscribe .subscribe-input {
    height: 50px;
    border-radius: 8px 0 0 8px;
}

.subscribe .subscribe-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.subscribe .subscribe-btn {
    height: 50px;
    width: 90px;
    border-radius: 0 20px 20px 0;
    background: linear-gradient(45deg, var(--vivo-blue), var(--vivo-cyan));
    color: #fff;
    font-weight: bold;
    font-size: .9rem;
    transition: all 0.3s ease;
}

.subscribe .subscribe-btn:hover {
    box-shadow: var(--neon-glow);
    text-shadow: var(--neon-glow);
    color: #fff;
    transform: translateY(-3px);
}

.footer-menu {
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 当屏幕宽度小于等于 992px 时，下降banner的文案和页码器 */
@media (max-width: 992px) {
    .banner {
        margin-top: 80px;
    }

    .banner .carousel-caption {
        margin-bottom: 20px;
    }

    .banner .carousel-indicators {
        margin-bottom: 60px;
    }
}

/* 当屏幕宽度小于等于 576 时，隐藏banner的文案和页码器 */
@media (max-width: 576px) {
    .banner {
        margin-top: 80px;
    }

    .banner .carousel-caption {
        display: none;
    }

    .banner .carousel-indicators {
        display: none;
    }
}

<!-- HTML结构 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="Vivo, 手机, 移动电话">
    <meta name="description" content="Vivo - 专业的移动设备解决方案">
    <title>Vivo官方网站</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<!-- 本页面使用 Bootstrap 设计 -->

<body>
    <!-- 头部导航栏模块 -->
    <nav class="navbar navbar-expand-lg fixed-top" data-bs-theme="dark">
        <div class="container">
            <!-- logo -->
            <a href="#" class="navbar-brand">vivo</a>
            <!-- 导航栏文字菜单 -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a href="#" class="nav-link active" aria-current="page">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link " aria-current="page">智能手机</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link " aria-current="page">智能生态</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link " aria-current="page">云服务</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link " aria-current="page">会员中心</a>
                    </li>
                    <!-- 菜单栏下的下拉菜单功能结构 -->
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false" aria-current="page">下拉菜单</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">下拉菜单1</a></li>
                            <li><a class="dropdown-item" href="#">下拉菜单2</a></li>
                            <li><a class="dropdown-item" href="#">下拉菜单3</a></li>
                        </ul>
                    </li>
                </ul>

                <!-- 右侧的图标 -->
                <div class="icons">
                    <a href="#" class="icon"><i class="bi bi-search"></i></a>
                    <a href="#" class="icon"><i class="bi bi-person"></i></a>
                    <a href="#" class="icon"><i class="bi bi-cart"></i></a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 首页banner模块轮播图 -->
    <section class="banner">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <!-- 轮播图下方的按钮条 -->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1767517530746/images/pc/kv.png.avif"
                        class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>vivo X60 Pro</h5>
                        <p>介绍vivo X60 Pro的详细信息</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1767517530746/images/pc/kv.png.avif"
                        class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>vivo X60 Pro</h5>
                        <p>介绍vivo X60 Pro的详细信息</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1767517530746/images/pc/kv.png.avif"
                        class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>vivo X60 Pro</h5>
                        <p>介绍vivo X60 Pro的详细信息</p>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>

    </section>

    <!-- 热门产品模块 -->
    <section class="hot-products py-5">

        <div class="container">
            <!-- 热门产品模块的标题 -->
            <h2 class="text-center fw-bold display-4">热门产品</h2>
            <p class="text-center fs-6 mt-3 info">探索vivo最新科技产品</p>

            <!-- 卡片组 -->
            <div class="row mt-5">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-img">
                            <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1767517530746/images/pc/kv.png.avif"
                                class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title fw-bold">vivo v50</h5>
                            <p class="card-text ">6.5寸全面屏</p>
                            <p class="card-price fw-bold">1299元起</p>
                            <a href="#" class="btn btn-primary btn-buy">立即购买</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-img">
                            <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1767517530746/images/pc/kv.png.avif"
                                class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title fw-bold">vivo v50</h5>
                            <p class="card-text ">6.5寸全面屏</p>
                            <p class="card-price fw-bold">1299元起</p>
                            <a href="#" class="btn btn-primary btn-buy">立即购买</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-img">
                            <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1767517530746/images/pc/kv.png.avif"
                                class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title fw-bold">vivo v50</h5>
                            <p class="card-text ">6.5寸全面屏</p>
                            <p class="card-price fw-bold">1299元起</p>
                            <a href="#" class="btn btn-primary btn-buy">立即购买</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 未来科技模块 -->
    <section class="future-tech py-5">
        <div class="container position-relative">
            <!-- 未来科技模块的标题 -->
            <h2 class="text-center fw-bold display-4">未来科技</h2>
            <p class="text-center fs-6 mt-3 info">探索vivo最新科技产品</p>

            <div class="row">
                <div class="col-md-4 text-center">
                    <i class="bi bi-camera future-icon"></i>
                    <h3 class="future-title">AI拍照技术</h3>
                    <p class="future-description">利用AI技术实现更智能的拍照功能</p>
                </div>
                <div class="col-md-4 text-center">
                    <i class="bi bi-camera future-icon"></i>
                    <h3 class="future-title">AI拍照技术</h3>
                    <p class="future-description">利用AI技术实现更智能的拍照功能</p>
                </div>
                <div class="col-md-4 text-center">
                    <i class="bi bi-camera future-icon"></i>
                    <h3 class="future-title">AI拍照技术</h3>
                    <p class="future-description">利用AI技术实现更智能的拍照功能</p>
                </div>
                <div class="col-md-4 text-center">
                    <i class="bi bi-camera future-icon"></i>
                    <h3 class="future-title">AI拍照技术</h3>
                    <p class="future-description">利用AI技术实现更智能的拍照功能</p>
                </div>
                <div class="col-md-4 text-center">
                    <i class="bi bi-camera future-icon"></i>
                    <h3 class="future-title">AI拍照技术</h3>
                    <p class="future-description">利用AI技术实现更智能的拍照功能</p>
                </div>
                <div class="col-md-4 text-center">
                    <i class="bi bi-camera future-icon"></i>
                    <h3 class="future-title">AI拍照技术</h3>
                    <p class="future-description">利用AI技术实现更智能的拍照功能</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部模块 -->
    <footer class="footer mt-5">
        <div class="container">
            <!-- 底部服务菜单列表 -->
            <div class="row footer-menu">
                <!-- 屏大于 960px 时，每个行有4个 -->
                <!-- 屏大于 768px 时，每个行有2个 -->
                <!-- 屏小于 576px 时，每个行有1个 -->
                <dl class="col-lg-3 col-md-6 col-sm-12 menu-header">
                    <dt class="fw-bold">服务菜单</dt>
                    <dd><a href="#">服务中心</a></dd>
                    <dd><a href="#">客服中心</a></dd>
                    <dd><a href="#">订单查询</a></dd>
                    <dd><a href="#">售后申请</a></dd>
                </dl>
                <dl class="col-lg-3 col-md-6 col-sm-12 menu-header">
                    <dt class="fw-bold">服务菜单</dt>
                    <dd><a href="#">服务中心</a></dd>
                    <dd><a href="#">客服中心</a></dd>
                    <dd><a href="#">订单查询</a></dd>
                    <dd><a href="#">售后申请</a></dd>
                </dl>
                <dl class="col-lg-3 col-md-6 col-sm-12 menu-header">
                    <dt class="fw-bold">服务菜单</dt>
                    <dd><a href="#">服务中心</a></dd>
                    <dd><a href="#">客服中心</a></dd>
                    <dd><a href="#">订单查询</a></dd>
                    <dd><a href="#">售后申请</a></dd>
                </dl>
                <dl class="col-lg-3 col-md-6 col-sm-12 menu-header about">
                    <dt class="fw-bold">关注我们</dt>
                    <div>
                        <dd>
                            <div class="icons">
                                <a href="#"><i class="bi bi-facebook"></i></a>
                                <a href="#"><i class="bi bi-twitter"></i></a>
                                <a href="#"><i class="bi bi-instagram"></i></a>
                                <a href="#"><i class="bi bi-youtube"></i></a>
                                <a href="#"><i class="bi bi-wechat"></i></a>
                            </div>
                            <p class="mt-4">订阅最新产品动态</p>
                            <div class="input-group mt-3 subscribe">
                                <input type="email" class="form-control bg-dark text-white border-0 subscribe-input"
                                    placeholder="请输入您的邮箱" aria-label="请输入您的邮箱" aria-describedby="subscribe-btn">
                                <button class="btn btn-primary subscribe-btn" type="button"
                                    id="subscribe-btn">订阅</button>
                            </div>
                        </dd>
                    </div>
                </dl>
            </div>
            <!-- 版权信息 -->
            <div class="row">
                <div class="col-md-12 text-center mt-5">
                    <p class="text-white-50">
                        &copy; 2025 TZMing. All Rights Reserved.
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script src="dist/js/bootstrap.min.js"></script>
</body>

</html>