第三天笔记

CSS

层叠样式表(Cascading Style Sheets，缩写为CSS)，是一种样式表语言，用来描述HTML文档的呈现(美化内容)

书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<style>
    /* CSS 代码 */
    /* 选择器 { CSS 属性 } */
    /* 属性名和属性值成对出现 -> 键值对 */
    p {
        color: red; /* 修改字体颜色 */
        font-size: 30px; /* 修改字体大小 */
    }
</style>
<body>
    <p>体验css</p>
</body>
</html>

CSS 引入方式

内部样式表：学习使用
- CSS代码写在style标签里面
外部样式表：开发使用
- CSS代码写在单独的CSS文件中（.css）
- 在 .html 文件中使用 link 标签引入
  <link rel="stylesheet" href="./my.css">
行内样式：配合JavaScript使用
- CSS代码写在style属性里面
  <div style="color: red; font-size: 30px">
  xxx
  </div>

CSS选择器

作用：查找标签，设置样式

基础选择器：

标签选择器
类选择器
id选择器
通配符选择器

标签选择器

作用：使用标签名作为选择器 → 选中同名标签设置相同的样式。因此无法差异化同名标签的样式

例如：p h1 div a

类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器 —> .类名
使用类选择器 —> 标签加 class=“类名”

示例代码：（一个类选择器可以个多个标签使用，一个标签也可以使用多个类名）

<style>
	/* 定义类选择器 */
    .red {
        color: red;
    }
    .size {
        font-size: 30px;
    }
</style>

<!-- 使用类选择器 -->
<div class="red size">
    芝士div标签
</div>

开发习惯：类名见名知意，多个单词可以用–连接，例如:news-hd（新闻头部）

id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式

步骤：

定义 id 选择器 —> #id名
使用 id 选择器 —> 标签加 id=“id名”

规则：同一个id选择器在一个页面只能使用一次

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #red {
        color: red; /* 修改字体颜色 */
        font-size: 30px; /* 修改字体大小 */
    }
</style>
<body>
    <div id="red">芝士div标签</div>
</body>
</html>

通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        color: red; /* 修改字体颜色 */
        font-size: 30px; /* 修改字体大小 */
    }
</style>
<body>
    <div id="red">芝士div标签</div>
</body>
</html>

画盒子

目标：使用合适的选择器画盒子

新属性：

属性名	作用
width	宽度
height	高度
background-color	背景色

字体修饰属性

字体粗细

属性名：font-weight
属性值：
- 数字（开发使用）
| 大小 | 数值 |
| — | —- |
| 正常 | 400 |
| 加粗 | 700 |
- 关键字
| 大小 | 关键字 |
| — | ——— |
| 正常 | normal |
| 加粗 | bold |

字体倾斜

作用：清除文字默认的倾斜效果
属性名：font-style
属性值：
- 正常（不倾斜）：normal
- 倾斜：italic

行高

作用：调整多行文本间的间距
属性名：line-height
属性值：
- 数字+px
- 数字（当前标签 font-size 属性值的倍数）

行高的垂直居中技巧：行高属性值等于盒子的高度属性值

注意：只适用于单行区域

字体族

属性名：font-family
属性值：字体名

font-family: 楷体;

font-family: Microsoft YaHlei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;

拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体

font 复合属性

使用场景：设置网页文字公共样式
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
font：是否倾斜是否加粗字号/行高字体族（必须按顺序书写)

div{
font: italic 700 30px/2 楷体;
}

字号和字体值必须书写，否则font属性不生效

文本缩进

属性名：text-indent
属性值
- 数字+px
- 数字+em（推荐：1 em = 当前标签的字号大小）

文本对齐

作用：控制内容水平对齐方式
属性名：text-align
属性值

属性值	效果
left	左对齐（默认）
center	居中对齐
right	右对齐

修饰线

属性名：text-decoration
属性值

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

颜色

属性名：color
属性值

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red、green、blue…	学习测试
rgb表示法	rgb(r, g, b)	r，g，b表示红绿蓝三原色，取值：0~255	了解
rgba表示法	rgba(r, g, b, a)	a表示透明度，取值：0~1	开发使用，实现透明色
十六进制表示法	#RRGGBB	#000000，#ffcc00，简写：#000，#fc0	开发使用（从设计稿复制）

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器子选择器 {CSS属性} 父子选择器之间用空格隔开

<style>
	div span {
		color: red;
	}
<style>

<span>span标签</span>
<div>
	<span>这是div的儿子</span>
</div>

子代选择器

子代选择器：选中某元素的子代元素。

选择器写法：父选择器 > 子选择器 {CSS属性} 父子选择器之间用 > 隔开

<style>
	div > span {
		color: red;
	}
<style>

<div>
	<span>这是div里面的</span>
	<p>
		<span>这是div里面的p里面的</span>
	</p>
</div>

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1，选择器2，…，选择器n {CSS属性}，选择器之间用逗号隔开

<style>
	div,
	p,
	span {
		color: red;
	}
<style>

<div>div标签</div>
<p>p标签</p>
<span>span标签</span>

交集选择器—-了解

交集选择器：选中同时满足多个条件的元素。

选择器写法：选择器1选择器2 {CSS属性}，选择器之间连写，没有任何符号

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面

<style>
	p.box {
		color: red;
	}
<style>

<p class="box">p标签，使用了类选择器 box</p>
<p>p标签</p>
<div class="box">div标签，使用了类选择器 box</div>

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover {SSS属性}

<style>
	a:hover {
		color: red;
	}

	.box:hover {
		color: green;
	}
</style>

<a href="#">a标签</a>
<div> class="box">div 标签</div>

伪类：超链接

超链接一共有四个状态

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时: 激活

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

CSS 特性

CSS 特性：化简代码 / 定位问题，并解决问题

继承性
层叠性
优先级

继承性

继承性：子级标签默认继承父级的文字控制属性

注意：若标签自己有属性则不继承

层叠性

特点：

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

公式：通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !Important

(选中标签的范围越大，优先级越低)

优先级 - 叠加计算原则

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式：（每一级之间不存在进位）

（行内样式,，id 选择器个数，类选择器个数，标签选择器个数）

规则：

从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
!Important 权重最高
继承权重最低

Emmet 写法

Emmet 写法: 代码的简写方式，输入缩写 VS code 会自动生成对应的代码。

HTML

说明	标签结构	Emmet
类选择器	\ \	标签名.类名
id 选择器	\ \	标签名#id名
同级标签	\ \ \ \	div+p
父子级标签	\ \ \ \	div>p
多个相同标签	\1\\2\\3\	span*3
有内容的标签	\ 内容\	div{内容}

首字母写法

背景属性

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

背景图

网页中，使用背景图实现装饰性的图片效果。

属性名： background-image (bgi)

属性值：url (背景图 URL)

注意：背景图默认平铺效果

背景图平铺方式

属性名：background-repeat (bgr)

属性值：

属性值	效果
no-repeat	不平铺，盒子左上角显示一张背景图
repeat	平铺，默认效果
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

背景图位置

属性名：background-position (bgp)

属性值：水平方向位置（正数右移，负数左移），垂直方向位置（正数下移，负数上移）

关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

坐标（数字+px，正负都可以）

示例代码：

div{
	width: 400px;
	height: 400px;
	background-color: pink;
	background-image: url(./image/pic.jpg);
	background-repeat: no-repeat;

	background-position: center bottom;
	background-position: 50px -100px
	background-position: 50px center;

	background-attachedment: fixed;
}

提示：

关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

属性名：background-size (bgz)

常用属性值：

关键字：
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小（100%图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放）
数字+单位（例如：px）（较少用）

背景图固定

属性名：background-attachment (bga)

属性值：fixed

背景复合属性

属性名：background（bg）

属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定
（空格隔开各个属性值，不区分顺序)

显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

块级元素（例如 div）

独占一行
宽度默认是父级的 100%
添加宽高属性生效

行内元素（例如 span）

一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开
vertical-align 行内块和行内垂直方向对齐方式

行内块元素（例如 img）

一行可以显示多个
设置宽高尺寸生效
宽高尺寸默认由内容撑开
vertical-align 行内块和行内垂直方向对齐方式

转换显示模式

属性名：display

属性值：

属性值	效果
block	块级
inline-block	行内块
inline	行内

选择器	说明
E: first-child	查找第一个 E 元素
E: last-child	查找最后一个 E 元素
E: nth-child (N)	查找第 N 个 E 元素（第一个元素的 N 值为 1）

: nth-child (公式)

作用：根据元素结构关系查找多个元素

功能	公式
偶数标签	2n
奇数标签	2n+1; 2n-1
找到 5 的倍数的标签	5n
找到第 5 个以后的标签	n+5
找到第 5 个以前的标签	-n+5

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	作用
E::before	在 E 元素里面最前面添加一个伪元素
E::after	在 E 元素里面最后面添加一个伪元素

注意点：

必须设置 content: “ “ 属性用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

PxCook 软件

PxCook（像素大厨）是一款切图设计工具软件。支持 PSD 文件的文字、颜色、距离自动智能识别。

开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）

盒子模型

作用：布局网页，摆放盒子和内容

盒子模型 - 组成

盒子模型的重要组成部分：

内容区域 - wedth & height
内边距 - padding （出现在内容和盒子边距之间）
边框线 - border
外边距 - margin （出现在盒子外面，常用来拉开两个盒子之间的距离）

盒子模型 - 边框线

属性名：border（bd）

属性值：边框线粗细线条样式颜色（不区分顺序）

常用线条样式：

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

盒子模型 - 设置单方向边框线

属性名：border-方位名词 (bd+方位首字母，例如 bdl)

属性值：边框线粗细线条样式颜色（不区分顺序）

样例代码

div{
	border-top: 2px solid red;
	border-right: 3px dashed green;
	border-bottom: 4px dotted blue;
	border-left: 5px solid orange;

	width: 200px;
	height: 200px;
	background-color: pink;
}

盒子模型 - 内边距

作用：设置内容与盒子边缘之间的距离

属性名：padding / padding+方位名词（p+方位首字母）

样例代码：

div{
	padding-top: 2px solid red;
	padding-right: 3px dashed green;
	padding-bottom: 4px dotted blue;
	padding-left: 5px solid orange;

	width: 200px;
	height: 200px;
	background-color: pink;
}

盒子模型 - 内边距 - 多值写法

Padding 多值写法

取值个数	示例	含义
一个值	padding: 10px	四个方向内边距均为 10 px
四个值	padding: 10px 20px 30px 40px	上：10 px；右：20 px；下：30 px；左：40 px
三个值	padding: 10px 20px 30px	上：10 px；左右：20 px；下：30 px
两个值	padding: 10px 20px	上下：10 px；左右：20 px

==记忆方法：上右下左，没数看对面==

盒子模型 - 尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：

手动做减法，减掉 border / padding 的尺寸
內减模式：box-sizing: border-box

盒子模型 - 外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 的属性值、含义相同

注意：外边距不会撑大盒子

版心居中

div {
	margin: 0px auto;
}

浏览器计算宽度先减去盒子宽度，此时左右都是 auto，即为水平居中，因此做到了自适应版心居中

清除默认样式

清除标签默认的样式，比如：默认的内外边距

两种做法：

京东

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

淘宝

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td,, extarea, th, ul {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

注意：去掉列表的项目符号属性 list-style: none;

盒子模型 - 元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值：

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

外边距问题 - 合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

外边距问题 - 塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

解决方法:

取消子级 margin，父级设置 padding（推荐）
父级设置 overflow: hidden
父级设置 border-top

行内元素 - 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

盒子模型 - 圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

注意：也存在多值写法，记忆方法：从左上角顺时针赋值，没有取值的角与对角取值相同

常用的圆角形状：

常见形状 - 正圆形状
- 给正方形盒子设置圆角属性值为宽高的一半 / 50%（超过 50 没有效果）
常见形状 - 胶囊形状
- 给长方形盒子设置圆角属性值为盒子高度的一半

盒子模型 - 阴影（拓展）

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

设计顺序

书写顺序

1. 盒子模型属性
2. 文字样式
3. 圆角，阴影等属性

浮动

作用：让块元素水平排列。

属性名：float

属性值：

left：左对齐
right：右对齐

浮动后的盒子特点：

顶对齐
具备行内块特点
脱标

注意：一般放在 css 属性的最前面

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

方法一：额外标签法

在父元素内容的最后忝加一个块级元素（一般类名为 clearfix），设置 CSS 属性 clear: both

方法二：单伪元素法

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

方法三：双伪元素法（推荐）

<!-- brfore 伪元素是为了解决塌陷的 after是清除浮动影响的 -->
.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}

.clearfix::after {
	clear: both;
}

方法四：overflow

父元素添加 CSS 属性 overflow: hidden

总结

浮动属性 float，left 表示左浮动，right 表示右浮动
特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
父级宽度不够，浮动的子级会换行
浮动后的盒子脱标

清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果

双伪元素法

拓展：浮动本质作用是实现图文混排效果

Flex 布局

Flex 布局 - 简介

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

Flex - 组成

设置方式：给父元素设置 display: flex 子元素可以自动挤压或拉伸

组成部分：

弹性容器
弹性盒子：沿着主轴方向排列
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向

描述	属性
创建 flex 容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-decoration
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

Flex - 主轴对齐方式

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

Flex - 侧轴对齐方式

属性名：

Align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
Align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值：

属性值	效果
stretch	弹性盒子沿着恻轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

Flex - 修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向。主轴方向变换，侧轴自动变换。

属性名：flex-decoration

属性值：

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

Flex - 弹性伸缩比

作用：控制弹性盒子在主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

Flex - 弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值：

Wrap：换行
Nowrap：不换行（默认）

Flex - 行对齐方式

属性名：align-content

属性值：

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

注意：该属性对单行弹性盒子不生效

注意：

默认情况下，主轴方向尺寸是靠内容撑开，侧轴默认拉伸

ul>li{$}*4可以快速生成

定位

作用：灵活的改变盒子在网页中的位置

实现：

定位模式：position
边偏移：设置盒子的位置

left
right
top
bottom

定位模式：相对定位

属性值：position: relative

特点：

改变位置的参照物是自己原来的位置
不脱标，占位
标签的显示模式特点：不变

定位模式：绝对定位

属性值：position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区改位置
脱标，不占位
标签的显示模式特点：改变，宽高生效（具备了行内块特点）

定位居中

实现步骤：

绝对定位
水平、垂直边偏移为 50%
子级向左、上移动自身尺寸的一半

左、上的外边距为 - 尺寸的一半
transtform: translate(-)

固定定位

属性值：position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

参照物：浏览器窗口
脱标，不占位
标签的显示模式：改变，宽高生效（具备了行内块特点）

堆叠层级

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序，取值越大显示顺序越靠上

总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	1.已经定位的祖先元素 2.浏览器可视区
固定定位	fixed	是	行内块特点	浏览器窗口

CSS 精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件，再 background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加 background-position 属性，改变背景图位置

3.1 是用 PxCook 测量

3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点：

灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用

字体图标 - 下载字体

iconfont 图标库：https://www.iconfont.cn/
下载字体：

字体图标 - 使用字体

引入字体样式表（iconfont.css）
标签使用字体图标类名
1. iconfont：字体图标基本样式（字体名，大小等等）
2. icon-xxx：图标对应的类名

样例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* 字体样式 */
    </style>
</head>
<body>
    <span class="iconfont icon-xxx"></span>
</body>
</html>

注意：如果要调整字体大小，注意选择器的优先级要高于iconfont类

字体图标 - 上传矢量库

作用：项目特有的图标上传到iconfont图标库，生成字体

垂直对齐方式 - vertical-align

属性名：vertical-align

属性值：

屬性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

注意：行内块和行内标签当成文字处理，默认基线对齐导致基线下有空白，除去 baseline 其余三种对其方式无空白，行内块转为块显示模式也无空白

过渡属性 - transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性花费时间（s）

提示：

过渡的属性可以是具体的 CSS 属性
也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
transition 设置给元素本身

透明度 - opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 - 1

0：完全透明（元素不可见）
1：不透明
0 - 1 之间小数：半透明

光标类型 - cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

平面转换 transform

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫做 2D转换

平面转换 - 平移

属性值：transform: translate(X轴移动距离, Y轴移动距离）

取值：

像素单位数值
百分比（按照盒子自身尺寸计算结果）
正负均可

技巧：

translate（只写一个值，表示沿着 X 轴移动）
单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

居中写法：

写法1

position: absolute;
left: 50%;
top: 50%;

/* margin */
margin-left: -100px;
margin-top: -50px;

width: 200px;
height: 100px;

写法2（参考自身尺寸，方便）

osition: absolute;
left: 50%;
top: 50%;
translate: transform(-50%, -50%);

注意：

宽高可以使用百分比，以父级元素为基准

平面转换 - 旋转

属性值：transform: rotate(旋转角度）

旋转角度：

单位：deg
有正负（正顺负逆）

平面转换 - 改变转换原点

默认情况下，转换原点是盒子中心点

属性值：transform-origin: 水平原点位置垂直原点位置;

取值

方位名词（left、top、right、bottom、center)
像素单位数值
百分比

多重转换

先平移再旋转
旋转会改变坐标轴向
多重转换:以第一种转换形态的坐标轴为准
拆开写不行，有层叠性，生效最后一个

平面转换 - 缩放

属性值：

transform: scale(缩放倍数);
transform: scale(X轴缩放倍效, Y轴缩放倍数);

技巧

通常，只为 scale 设置一个值，表示 X 轴和 Y 轴等比例缩放
取值大于1表示放大，取值小于1表示缩小

平面转换 - 倾斜

属性值：transform: skew();

取值：角度度数deg

渐变

线性渐变

属性值：

background-image: linear-gradient(
	渐变方向,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

取值

渐变方向（可选）
- to 方位名词
- 角度度数
终点位置（可选）
- 百分比

硬线：

例子1：

background: linear-gradient(
	to bottom left, 
	cyan 50%, 
	palegoldenrod 50%
);

例子2（多条纹硬线）

background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
);
background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
);

径向渐变

属性值：

background-image: radial-gradient(
	半径 at 圆心位置,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

取值

半径可以是2条，则为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词

锥形渐变

属性值：

background: conic-gradient(
	from 起始角度 at 变换中心,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

空间转换

空间：是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同
空间转换也叫3D转换
属性：transform

空间转换 - 平移

属性值：

transform: translate3d(x, y, z);
transform: translatex();
transform: translateY();
transform: translatez();

取值（正负均可）

像素单位数值
百分比（参照盒子自身尺寸计算结果）

注意：

电脑是平面，默认无法观察z轴平移效果
translate3d 必须要有三个数字

视距

作用：指定了观察者与 Z = 0 平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性值：(添加给父级，取值范围800-1200）

perspective: 视距;

空间转换 - 旋转

属性值：transform: rotateZ(值)；
属性值：transform: rotateX(值)；
属性值：transform: rotateY(值)；
左手法则 – 根据旋转方向确定取值正负：左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
拓展
- rotate3d(x, y, z, 角度度数)：用来设置自定义旋转轴的位置及旋转的角度
- x， y，z取值为0-1之间的数字

立体呈现

作用：设置元素的子元素是位于 3d空间 中还是平面中

属性名：transform-style

属性值：

flat：子级处于平面中
preserve-3d：子级处于3D空间

呈现立体图形步骤

父元素添加transform-style: preserve-3d;
子级定位
调整子盒子的位置（位移或旋转）

空间转换 - 缩放

属性值：

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

动画 - animation

过渡：实现两个状态间的变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

实现步骤：

定义动画

@keyframes 动画名称{
    from {}
    to {}
}

@keyframes 动画名称{
    0% {}
    10% {}
    ......
    100% {}
}

使用动画

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

提示：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

属性值：

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	执行完毕时状态	forwards：最后一帧转态 backwards：第一帧状态
animation-timing-function	速度曲线	linear：匀速运动 steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合 :hover 使用

无缝动画原理：复制开头图片到结尾位置（图片累加宽度=区域宽度）

多组动画

animation:
	动画1,
	动画2,
	动画N
;

注意：当动画的开始状态样式跟盒子默认样式相同，可以省略动画开始状态的代码

屏幕分辨率

硬件分辨率→物理分辨率（出厂设置）
缩放调节的分辨率→逻辑分辨率（软件/驱动设置）
通过视口标签规定html尺寸，让html宽度等于设备宽度（默认生成）

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

适配方案

宽度适配：宽度自适应
- 百分比布局
- Flex布局
等比适配：宽高等比缩放
- rem
- vw

rem适配方案

rem单位，是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号?
- 媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的CSS样式当
某个条件成立，执行对应的CSS样式

@media (媒体特性) {
  选择器 {
	css属性
  }
}

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

rem - flexible.js

flexible.js是手淘开发出的一个用来适配移动端的js库。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的 font-size。

less

Less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言,使CSS具备一定的逻辑性、计算能力
注意：浏览器不识别Less 代码，目前阶段，网页要引入对应的CSS文件
VS Code插件：Easy LESS，保存less文件后自动生成对应的CSS文件

less - 注释

单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
块注释
- 语法：/*注释内容*/
- 快捷键：Shift + Alt + A

less - 运算

加、减、乘直接书写计算表达式
除法需要添加小括号或 .
如果表达式有多个单位，最终css里面以第一个单位为准

less - 嵌套

作用：快速生成后代选择器
& 表示的是当前选择器，代码写到谁的大括号里面就表示谁
不会生成后代选择器
应用：配合hover伪类或nth-child结构伪类使用

less - 变量

语法

定义变量：@变量名:数据;
使用变量：CSS属性:@变量名;

less - 导入

作用：导入 less 公共样式文件
语法：导入：@import “文件路径”;
提示：如果是less文件可以省略后缀

import "./base.less';
import "./common';

less - 导出

写法：在less文件的第一行添加 //out:存储URL
提示：文件夹名称后面添加 /

// out: ./index.css
// out: ./css/

less - 禁止导出

写法：在 less文件第一行添加：// out:false

vw适配方案

相对单位
相对视口的尺寸计算结果
vw：viewport width
- 1vw = 1/100 视口宽度
vh：viewport height
- 1vh = 1/100 视口高度
注意：vw和vh不要混用

Bootstrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网：https://www.bootcss.coml

Bootstrap - 使用

下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 → 下载 Bootstrap 生产文件

使用

1．引入Bootstrap.css文件

<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

2.调用类名：container：响应式布局版心类
<div class="container">测试</div>

Bootstrap - 栅格系统

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占3份即可（12 / 4= 3）

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	>=576px
Medium	md	>=768px
Large	lg	>=992px
Extra large	xl	>=1200px
Extra extra large	xxl	>=1400px

常用布局类

col-*-*：列（例如：col-xxl-3）
row：行

Bootstrap - 全局样式

Button类

btn：默认样式
btn-success：成功
btn-warning：警告
…
按钮尺寸：btn-lg / btn-sm

剩余的看文档

表格类

table：默认样式
table-striped：隔行变色
table-success：表格颜色
…

剩余的看文档

Bootstrap - 组件(Components)

1.引入样式表

2.引入 js 文件

3.复制结构，修改内容

Bootstrap - 字体图标

下载
- 导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip
使用
- 复制fonts文件夹到项目目录
- 网页引入 bootstrap-icons.css 文件
- 调用CSS类名（图标对应的类名）

CSS

CSS 引入方式

CSS选择器

标签选择器

类选择器

id选择器

通配符选择器

画盒子

字体修饰属性

字体大小

字体粗细

字体倾斜

行高

字体族

font 复合属性

文本缩进

文本对齐

修饰线

颜色

复合选择器

后代选择器

子代选择器

并集选择器

交集选择器—-了解

伪类选择器

伪类：超链接

CSS 特性

继承性

层叠性

优先级

优先级 - 叠加计算原则

Emmet 写法

背景属性

背景图

背景图平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性

显示模式

块级元素（例如 div）

行内元素（例如 span）

行内块元素（例如 img）

转换显示模式

: nth-child (公式)

伪元素选择器

PxCook 软件

盒子模型

盒子模型 - 组成

盒子模型 - 边框线

盒子模型 - 设置单方向边框线

盒子模型 - 内边距

盒子模型 - 内边距 - 多值写法

盒子模型 - 尺寸计算

盒子模型 - 外边距

版心居中

清除默认样式

盒子模型 - 元素溢出

外边距问题 - 合并现象

外边距问题 - 塌陷问题

行内元素 - 内外边距问题

盒子模型 - 圆角

盒子模型 - 阴影（拓展）

设计顺序

浮动

清除浮动

方法一 ：额外标签法

方法二：单伪元素法

方法三：双伪元素法 （推荐）

方法四：overflow

总结

Flex 布局

Flex 布局 - 简介

Flex - 组成

Flex - 主轴对齐方式

Flex - 侧轴对齐方式

Flex - 修改主轴方向

Flex - 弹性伸缩比

Flex - 弹性盒子换行

Flex - 行对齐方式

方法一：额外标签法

方法三：双伪元素法（推荐）