文章目录
- 1、css引入
- 2、css基本语法
- 3、选择器
-
- 一、常用选择器
- 二、复合选择器
- 3.关系选择器
- 4.属性选择器
- 5.伪类选择器
- 6、伪元素选择器
- 7.选择器的权重
- 4.像素和大小
- 5、颜色
- 6、补充
- 7、文档流
- 8、盒子模型
-
- 1、总体认知
- 2、盒子边框
- 3、内边距
- 4、外边距
- 9.水平布局
- 10.垂直布局
- 11.折叠外距
- 12.行业元素盒模型
- 13.浏览器默认样式
- 盒子的大小
- 15、阴影、轮廓和圆角
- 16、浮动
- 17、高度塌陷
- 18.解决高度坍塌和外距重叠问题(`clearfix`)
- 元素定位
-
- 1、定位（position）
- 2、相对定位
- 3、绝对定位
- 4、固定定位
- 5、粘滞定位
- 元素层次
- 21、字体族
- 22、图标字体
- 23、行高
- 24.文本的水平与垂直对齐
- 25风格
- 26、背景
- 27、线性渐变和径向渐变
- 表格的样式
- 29、过渡效果
- 30、动画
- 31.变形平移和旋转
- 32、less
- 33、弹性盒
- 34、像素
- 35、vw单位
- 36.响应布局
1、css引入
css通过多层结构，控制页面由多层结构组成的分层风格表css每层可分别设置样式。
<!-- 使用css修改元素样式 第一种方法(内联风格，行内风格) 通过标签style设置元素样式的属性 应在属性中使用css语法，xxx(名称):xxx(值); --> <p style="color:red; font-size:60px;"></p> <!-- 第二种方式（内部样式表） 编写样式head中的style标签里 然后通过css选择器选择各种样式的元素 可同时设置多个标签样式 以后使用所选元素 大括号{} 大括号就是 xxx(名称):xxx(值); --> <head> xxxxxx <style> p{ color:red; font-size:60px;} </style> </head>
<!-- 第三种方法(外部样式表) 可以将css风格写在外面css然后通过文件link引入标签。 --> /*这是一个css的文件 style.css */ p{
color:red; font-size:60px; } <!-- 在head中通过link标签引入 --> <link rel="stylesheet" href="style.css">
2、css基本语法
/* css基本语法： 选择器 声明器 选择器：通过选择器可以选中页面中的指定元素 例如上面p的作用就是选中页面中所以的p元素 声明块：通过声明块来指定元素设置样式 声明块由一个个声明组成 一个样式对应一个样式值，名和值之间：连接，以；结尾 */
3、选择器
1、常用选择器
/* 元素选择器 作用：根据标签名选中指定的元素 语法：标签名{} */
<style> p{
color:red;}
h1{
}
</style>
/* id选择器 作用：根据元素的id属性选中一个元素 语法：#id属性值{} */
<style> #id{
color:red;}
</style>
/* 类选择器 作用：根据元素的class属性值选中一组元素 语法：.class属性值{} 注：class是一个标签的属性，和id类似，但是可以重复使用，可以用class属性为元素分组,还可以同时为一个元素指定多个class */
<head>
<style> .blue{
font-size:60px} .red{
color:red;} </style>
</head>
<body>
<p class="red blue">xxxxx</p>
<h1 class="red">xxxxx</h1>
</body>
/* 通配选择器 作用：选中页面中所有的元素 语法：*{} */
2、复合选择器
/* 交集选择器 作用：选中同时符合多个条件的元素 语法：选择器1选择器2选择器n{} 注：交集选择器中如果有元素选择器，必须使用元素选择器开头 满足一个选择条件的同时又要满足另一个选择条件 */
/* 选择器分组（并集选择器） 作用：同时选择多个选择器对应的元素 语法：选择器1，选择器2，选择器n{} 多个不同的元素满足一个要求 */
3、关系选择器
父元素
直接包含子元素的元素叫父元素
子元素
直接被父元素包含的元素是子元素
后代元素
直接或间接被祖先元素包含的元素叫后代元素
兄弟元素
拥有相同父元素是兄弟元素
/* 子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素 > 子元素{} 注：祖先元素 > 父元素 > 子元素{} */
/* 后代元素选择器 作用：选中指定元素内指定的后代元素 语法：祖先 后代{} */
/* 选择下一个兄弟 语法：前一个 + 下一个{} 注：必须是下一个兄弟，相邻的兄弟 选择下边所有的兄弟 语法：兄 ~ 弟{} */
4、属性选择器
/* [属性名]{} 选择含有指定属性的元素 [属性名=属性值]{} 选择含有指定属性和属性值的元素 [属性名^=属性值]{} 选择属性值以指定值开头的元素 [属性名$=属性值]{} 选择属性值以指定值结尾的元素 [属性名*=属性值]{} 选择属性值中含有某些值的元素的元素 */
5、伪类选择器
/* 伪类 用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素 伪类一般情况下都是使用：开头 :first-child 第一个子元素 :last-chdild 最后一个子元素 :nth-child() 选中第n个子元素 特殊值： n: 2n 或 even 表示选中偶数的元素 2n+1 或 odd 表示选中奇数位的元素 以上这些伪类都是根据所有的子元素进行排序 :first-of-type :last-of-type :nth-of-type() 这几个伪类功能和上面类似，不同的是他们是在同类型元素中进行排序 :not() 否定伪类 将符合条件的元素从选择器中去除 */
超链接的伪类
/* :link 用来表示没访问过的链接（正常的链接） */
a:link{
}
/* :visited 用来表示访问过的链接 只能修改链接的颜色 */
a:visited{
}
鼠标状态的伪类
/* :hover 用来表示鼠标的移入状态 */
a:hover{
}
/* :active 用来表示鼠标的点击 */
a:active{
}
6、伪元素选择器
伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用 :: 开头
/* ::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 表示选中的内容 */
xxx::selection{
background-color:blue;}
/* ::before 元素的开始 ::after 元素的最后 这两个必须结合content属性来使用 content用来添加内容 */
xxx::before{
content:'#';
color:blue;
}
7、选择器的权重
样式的冲突
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就会发送样式冲突。
发送样式冲突时，应用那个选择器由选择器的权重（优先级）决定
选择器权重
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器优先级进行相加，最后优先级越高，则会越优先显示（分组选择器是单独计算的），如果优先级计算后相同，则后面的会覆盖前面的
可以在某一个样式的后面添加 ！important ，则此时该样式会获得最高的优先级，甚至超过内联样式
4、像素和大小
像素
width:100px;
height:100px;
百分比
属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素随父元素的改变而改变
em
em是相对于元素的字体大小来计算的
1em=1 font-size
em会根据字体大小的改变而改变
rem
rem是相对于根元素的字体大小来计算的
5、颜色
在css中可以直接使用颜色名字来设置各种颜色
例如：red、blue、green
RGB值：
RGB通过三种颜色的不同浓度来调配出不同的颜色
每一种颜色颜色的范围：0-255（0%-100%）之间
语法：RGB(红色,绿色,蓝色)
RGBA：
在RGB的基础上增加一个透明度，A表示透明度
需要四个值，前三个值和RGB一样，第四个表示透明度，范围为 0-1
1不透明 0透明
十六进制的RGB值：
语法：#红色绿色蓝色
颜色浓度：00-ff
如果颜色两位两位重复可以简写
#aabbcc——>#abc
HSL值 HSLA值
H 色相（0-360）
S 饱和度，颜色的浓度 0%-100%
L 亮度，颜色的亮度 0%-100%
6、补充
我们要去掉超链接中的下划线
text-decoration:none;
我们要让文字在父元素当中居中显示，只需要将父元素中line-height与父元素height一致
7、文档流
网页是一个多层的结构，一层叠一层
通过css可以分别为每一层设置样式
用户看到的是最顶上的一层
这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列的
元素主要有两个状态
在文档流中
不在文档流中（脱离文档流）
元素在文档流中由什么特点
块元素
块元素会在页面中独占一行
默认宽度是父元素的全部（把父元素撑满）
默认高度是被内容撑开（子元素）
行内元素
行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中从左向右水平排列，如果一行之中不能容乃，则会换到第二行继续自左向右排列
行内元素默认宽度和高度都会被内容撑开
8、盒子模型
1、总体认知
盒子模型、盒模型、框模型（box model）
css将页面中的所有元素都设置为一个矩形的盒子
页面布局就是将不同的盒子摆放到不同的位置
每一个盒子模型都由以下几部分组成：
内容区（content）：元素中所有的子元素和文本内容都在内容区排列
内容区的大小由 width 和 height 两个属性来设置
width设置内容区的宽度
height设置内容区的高度
内边距（padding）：内容区到和边框的距离
边框（border）：要设置边框需要有三个样式
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
外边距（margin）：盒子与盒子之间的距离
2、盒子边框
边框（border）：要设置边框需要有三个样式
一般不设置的情况下会有一个默认值，根据浏览器的不同而不同
值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
还可以有一种写法：border-xxx-width，可以单独为某一边指定宽度
xxx可以是
top（顶部）
right（右边）
bottom（底部）
left（左边）
用来指定边框的颜色，同样可以用分别指定四个边框，规则和上面border-width一样
当省略不写的情况下会默认使用 color 的值
默认不写的情况下是none，没有边框，具体用法也和上面的类似
实线：solid
点状虚线：dotted
虚线：dashed
双线：double
通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
border:10px blue double;
如果某一边不需要设置属性，可以直接将改变某一属性设置为 none
border-left: none;
3、内边距
内容区和边框之间的距离是内边距
一个四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响盒子的大小，内容区背景颜色会延申到内边距中
一个盒子的大小由内容区、内边距、边框共同决定，计算大小时需要将三个加在一起算
padding 内边距也可以有简写属性，指定四个方向的内边距，其类似于上面，可以同时写多个值，每个值用空格隔开
值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
4、外边距
外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一个有四个方向的外边距：
margin-top
上外边距，设置一个正值，该元素会向下移动
margin-right
右外边距，设置一个正值，会让右边相邻元素向右移动
margin-bottom
下外边距，设置一个正值，会让下边相邻的元素向下移动
margin-left
左外边距，设置一个正值，会让该元素向右移动
margin 的简写属性
margin可以同时设置四个方向的外边距，同时写多个值，每个值用空格隔开
值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
9、水平方向的布局
元素在水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须满足以下等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素的width
以上的等式必须满足，如果相加的结果不成立，则称为过度约束，浏览器会将等式自动满足上述条件
自动满足的条件如下：
上述七个值当中有三个值可以设置为 auto
width
margin-left
margin-right
如果这七个值当中没有设置为 auto 的情况下，则浏览器会自动调整margin-right的值以满足上述等式
如果设置某个值为auto，则会自动调整属性为 auto 的那个值以满足上述等式
如果将一个宽度和外边距设置为 auto ，则宽度会调整到最大，设置为auto的外边距为0
如果将三个值都设置为 auto ，则外边距都是0，宽度最大
如果将两个外边距设置为 auto ，宽度为固定值，则会将外边距设置为相同的值
10、垂直方向上的布局
子元素是在父元素中的内容区排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用 overflow 属性来设置父元素如何处理溢出的子元素
可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部位置显示
hidden 溢出的内容将会被裁剪，不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条
overflow-x：处理x轴，可选值与上述一致
overflow-y：处理y轴，可选值与上述一致
11、外边距的折叠
垂直外边距的折叠
相邻的垂直方向外边距会发生重叠现象
兄弟元素
兄弟元素的相邻垂直外边距会取两者之间的较大值（两者都是正值）
特殊情况
如果相邻的外边距一正一负，则取两者之和
如果相邻外边距都是负值，则取两者中绝对值较大的
父子元素
父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
父子外边距的折叠会影响页面布局
12、行内元素的盒模型
行内元素的盒模型
行内元素不支持设置宽度和高度（内容区），其宽度和高度被内容撑开
行内元素可以设置padding ，垂直方向的padding不会影响到页面的布局
行内元素可以设置border，垂直方向的border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响布局
/* display,可以用来设置元素的类型 可选值 inline：将元素设置为行内元素 block：将元素设置为块元素 inline-block：将元素设置为行内块元素，可以设置高度，但是不会独占一行 table：将元素设置为一个表格 none：元素不在页面中显示 visbility，用来设置元素显示状态 可选值 visible：默认值，元素在页面中正常显示 hidden：元素在页面中隐藏，不显示，但依然占据页面的位置 */
13、浏览器的默认样式
浏览器中会存在默认的样式，默认样式会影响到我们的页面布局，使用我们需要将其去除，以下有三种方式
这里我们可以打开浏览器，然后按F12，选择元素，鼠标点击我们要查看的元素，就可以查看到当前元素存在的样式
列表中项目符号也可以去除
通过元素选择器选中我们要去掉项目符号的列表，然后添加如下属性
list-style:none;
我们可以观察到，绝大多数的样式都是外边距和内边距，所有我们可以使用通配选择器来实现
*{
margin:0;
padding:0;
}
3、我们可以在一个新文件中将所有的元素的默认属性去掉，然后通过link来引用
重置样式表有两个
reset.css 直接去除浏览器的默认样式
normalizes.css 对默认样式进行统一
<link rel="stylesheet" href="">
14、盒子的大小
默认情况下，盒子的可见框的大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子的尺寸的计算方式（设置width和height的作用）
可选值：
content-box ：默认值，宽度和高度设置内容区的大小
border-box ：宽度和高度用来设置整个盒子可见框的大小
width和height指内容区 和 内边距 和 边框的总大小
15、阴影、轮廓和圆角
/* outline 用来设置元素的轮廓线，用法和border一样，不同在于轮廓不会影响可见框的大小，不会影响布局，只是一个显示效果 */
/* box-shadow 用来设置元素的阴影效果，阴影效果同样不会影响页面的布局 第一个值：水平偏移量，设置阴影的水平位置 第二个值：垂直偏移量，设置阴影的垂直位置 第三个值：阴影的模糊半径 第四个值：阴影的颜色 */
/* border-radius：用来设置圆角，圆角设置的是圆的半径大小,可以在一个圆角里设置两个半径，用 / 隔开 可以分别为指定的四个圆角 四个值：左上 右上 右下 左下 三个值：左上 右上/左下 右下 两个值：左上/右下 右上/左下 也可以分别设置圆角 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius */
16、浮动
通过浮动可以使一个元素向其父元素的左侧或者右侧移动
使用 float 属性来设置元素的浮动
可选值
none：默认值，元素不浮动
left：元素向左浮动
right：元素向右浮动
注：元素设置浮动以后，水平布局的等式不需要强制成立，元素设置浮动以后，会完成从文档流中脱离，不在占据文档流的位置，所有元素下边的还在文档流中的元素会自动向上移动
浮动的特点：
1、浮动元素会完全脱离文档流，不在占据文档流当中的位置
2、设置浮动以后元素会向父元素的左侧或者右侧移动
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前面的其他浮动元素
5、如果浮动元素的上面是一个没有浮动的元素，则浮动元素无法上移
6、浮动元素不会超过它上面的浮动的兄弟元素，最多和它一样高
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所有我们可以利用浮动来设置文字环绕图片的效果
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发发生变化
块元素：
1、元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认被内容撑开
行内元素
行内元素脱离文档流以后可以设置宽度和高度，其性质和脱离文档流的块元素一致，所有脱离文档流以后，就不需要区分块元素和行内元素
17、高度塌陷
在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失
父元素高度丢失后，其下元素会自动上移，导致页面布局混乱
BFC（Block Formatting Context）块级格式化环境
BFC是CSS中一个隐含的属性，可以为一个元素开启BFC，开启BFC的元素会变成一个独立布局的区域
元素开启BFC后的特点：
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素，子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含浮动的子元素
开启BFC的方法
1、设置元素的浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值，常用设置 overflow:hidden;或者overflow:auto;
clear
作用：清楚浮动元素对当前元素的影响
可选值：
left：清楚左侧浮动元素对当前元素的影响
right：清楚右侧浮动元素对当前元素的影响
both：清楚两侧元素中最大影响的那侧
原理：
设置清楚后，浏览器会自动为元素添加一个上外边距
下面可以看到，我们可以通过box3移到box2的下面来将父元素撑开
<head>
<style> .box1{
border:;} .box2{
height:; width:; float:left;} .box3{
clear:both;} </style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
和上面设置clear的原理类似，我们可以在通过after伪类对box1内容区最后添加一位元素，然后由于after伪类是行内元素，所以要先转换为块元素，然后再清楚浮动的影响
<head>
<style> .box1{
border:;} .box2{
height:; width:; float:left;} .box1::after{
display:block; clear:both; content:""} </style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
18、高度塌陷和外边距重叠的解决(clearfix)
高度塌陷我们可以用 after 伪类来解决，根据相同的原理，外边距重叠的时候，我们也可以通过设置 before 伪类来解决外边距重叠
.clearfix::before, .clearfix::after{
content:"";
display:table;
clear:both;
}
19、元素的定位
1、定位（position）
定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使得position属性来设置定位
可选值：
static 默认值，元素是静止的，没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素粘滞定位
2、相对定位
当元素的position属性设置为relative时则开启了元素的相对定位
相对定位的特点：
1、元素开启相对定位以后，如果不设置偏移量就不会发送任何变化
2、相对定位是参照于元素在文档流中的位置进行定位（就是元素没有移动前的原始位置作为参考）
3、相对定位会提升元素的层级
4、相对定位不会使元素脱离文档流
5、相对定位不会改变元素的性质，块元素依旧是块元素、行内元素依旧是行内元素
偏移量（offset）
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：定位元素和定位位置左侧的距离
right：定位元素和定位位置右侧的距离
3、绝对定位
当元素的position属性值设置为absolute时，则开启元素的绝对定位
绝对定位的特点：
1、开启绝对定位后，如果不设置偏移量，元素的位置不会发送变化
2、开启绝对定位后，元素会从文档流中脱离
3、绝对定位会改变元素的性质，行内变块，块的高度被内容撑开
4、绝对定位会使元素提升一个层级
5、绝对定位元素是相对于其包含块进行定位的
包含块（containing block）
正常情况下：
包含块就是离当前元素最近的祖先块元素
绝对定位的包含块
包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块
html（根元素、初始包含块）
当我们开启绝对定位以后：
水平方向上的布局等式就需要添加 left 和 right 两个值
此时规则和之前一样只是多添加了两个值：
当发生过度约束：
如果九个值中没有 auto 则自动调整right值以使等式满足
如果有auto，则自动调整auto的值以使等式满足
可以设置auto的值：
margin width left right
注：left 和 right 的值默认是auto，所有如果不知道 left 和 right 则等式不满足时，会自动调整这两个值
垂直方向的等式也必须要满足
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=父元素的height
4、固定定位
将元素的position属性设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，固定定位的大部分特点和绝对定位是一样的
不一样在于固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随着网页的滚动条滚动
5、粘滞定位
当元素的position属性设置为sticky时则开启元素的粘滞定位
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
20、元素的层级
对于开启了定位元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
如果元素的层级一样，则优先显示结构靠下的元素（后面的元素覆盖前面的元素）
祖先元素的层级再高也不会高过其后代元素，不会覆盖住后代元素
21、字体族
color：用来设置字体的颜色
font-size：字体的大小
em：相当于当前元素的一个font-size
rem：相当于根元素的一个font-size
font-family：字体族，字体的格式，可以同时指定多个字体，多个字体间可以用,隔开，字体生效时优先使用第一个，然后以此类推
可选值：
serif：衬线字体
sans-serif：非衬线字体
monospace：等宽字体
如果要指定使用用户浏览器里没有的字体时，我们就要用到以下属性
font-family用来给字体命名
src用来指定字体路径
format用来指定浏览器解析字体文件的格式，可以不用写
@font-face{
font-family:'myfont';
src:url();
format();
}
font 可以设置字体相关的所有属性
语法：
font:字体大小/行高 字体族;
font:字重 字体风格 字体大小/行高 字体族;
其中字重、字体风格、行高可以不写，用默认值
font-weight字重 字体的加粗
可选值：
normal：默认值，不加粗
bold：加粗
100-900：九个级别
font-style字体风格
normal：正常
italic：斜体
22、图标字体
在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小比较大，不灵活，所有我们我们在使用图标时，可以将图标设置为字体，然后通过font-face的形式对字体进行引入
将css和webfonts移动到项目中
将all.css引入到网页中
<link rel="stylesheet" href="">
使用图标文字
直接通过类名来使用图标字体，通常使用i标签来引入图标
class="fas 图标名"
class="fab 图标名"
1、找到要设置图标的元素通过before和after选中
2、在content中设置字体的编码，通过查表获得编码，在编码前面加上反斜杠\
3、设置字体是样式
fab
font-family:'Font Awesome 5 Brands';
``
fas
font-family:'Font Awesome 5 Free';
font-weight:900;
li::before{
content:'\f004';
font-family:'Font Awesome 5 Free';
font-weight:900;
color:brown;
font-size:30px;
}
23、行高
行高是指文字占有的实际高度
可以通过line-height来设置行高
行高可以直接设置大小，如果大小设置为一个整数的话，代表是指字体大小的倍数
行高可以用来设置文字间的行间距
行间距=行高 - 字体大小
字体框就是字体存放的格子，设置font-size实际上就是在设置字体框的高度，行高会在字体框的上下平均分配
24、文本的水平对其和垂直对齐
text-align 文本的水平对齐
可选值：
left：左侧对齐
right：右侧对齐
center：居中对齐
justify：两端对齐
vertical-align 设置元素垂直对齐，垂直对齐是子元素相对于父元素来说的
可选值：
baseline：默认值，基线对齐
top：顶部对齐
bottom：底部对齐
middle：居中对齐
注：如果是引入的一张图片，图片与下边框会有一定的距离，这是由于基线对齐造成的，所有我们需要设置图片的垂直对齐方式，不是基线对齐就可以消除这个影响
25、文本的样式
text-decoration 设置文本修饰
可选值：
none：
underline：下划线
line-through：删除线
overline：上划线
text-indent适用于首行文字的缩进
语法：
text-indent:length;
white-space 设置网页如何处理空白
可选值：
normal：正常
nowrap：不换行
pre：保留空白，也就是说，设置这个属性之后，打在文本中的空格和换行也可以正常地显示出来
例：
/*设置一段文字溢出后加上...*/
x{
width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
26、背景
语法：background-image: url("xxxx");
可以同时设置背景图片和背景颜色
如果背景图片小于元素，则背景图片会自动在元素中平铺
如果背景图片大于元素，将无法在元素中完全显示背景图片
可选值：
repeat 默认值，背景会沿着x轴和y轴重复
repeat-x 沿着x轴重复
repeat-y 沿着y轴重复
no-repeat 背景图片不重复
设置方式：
通过 top left right bottom center 几个表示方位的值来设置位置，使用方位词时必须要同时指定两个值，如果只有一个值，那么第二个值默认为center
例如：background-color:top left;
通过偏移量来指定背景图片的位置，也要设置两个值
例如：background-color: 100px 100px;
可选值：
border-box 默认值，背景会出现在边框的下面
padding-box 背景不会出现在边框，只会出现在内容区和内边距
content-box 背景只会出现在内容区
padding-box 默认值，background-position从内边距开始计算
content-box 背景图片的偏移量从内容区计算
border-box 背景图片的偏移量从边框开始计算
第一个值表示宽度
第二个值表示高度
如果只写一个，则第二个值默认为auto
cover 图片的比例不变，将元素铺满
contain 图片的比例不变，将图片在元素中完整显示
scroll 默认值，背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动
注：如果背景固定，那么背景图片的偏移量是从视口开始计算
注：background-size必须写在background-position的后面，并且使用/隔开
background-position/background-size
background-origin和background-clip两个样式，origin要在clip的前面
雪碧图是将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示不同的背景，这个方式可以避免加载网页时出现的闪烁
使用步骤：
1、先确定要使用的图标
2、测量图标的大小
3、根据结果创建一个元素
4、将雪碧图设置为元素的背景图片
5、设置一个偏移量以显示正确的图片
27、线性渐变和径向渐变
渐变是图片，需要通过background-image来设置
linear-gradient()
红色在开头，黄色在结尾，中间是过度区域
background-image: linear-gradient(red,yellow);
我们可以指定一个渐变的方向
to left
to right
to top
to bottom
deg 表示度数，默认值为180
turn 表示圈
background-image: linear-gradient(to right,red,yellow);
渐变可以同时指定多个颜色，多个颜色情况下是平均分布的，也可以手动指定渐变的开始位置
background-image: linear-gradient(to right,red 10px,yellow 60px);
repeating-linear-gradient()可以平铺的线性渐变
和上面的用法是一样是，不同的是设置了渐变开始位置和结束位置，下面就是这样渐变开始在10px，结束在60px，所有渐变发生的大小为50px，如果元素大于50px，就会再元素中排列这个渐变，直到元素填满
background-image: repeating-linear-gradient(to right,red 10px,yellow 60px);
radial-gradient()
默认情况下径向渐变的形状根据元素的形状来变化
正方形-圆形
长方形-椭圆形
我们可以手动指定径向渐变的大小，也可以指定渐变的位置
语法：background-image: radial-gradient(大小 at 位置, 颜色 位置 ，颜色 位置);
大小：
circle：圆形
ellipse：椭圆
可以直接指定：10px 20px
位置：
top right left center bottom
28、表格的样式
<style> table{
/*border-spacing：指定边框之间的距离*/ border-spacing:0px; /*border-collaspse:collapse; 设置边框的合并*/ border-collaspse:collapse; }; td{
/*默认情况下元素在td中是垂直居中的，可以通过vertical-align设置*/ }; /*如果在表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中，使用tbody是tr的祖先元素*/ .box{
/*在我们设计样式的时候，我们可以将父元素设计为单元格,我这样我们就可以设置居中效果*/ display:table-cell; } </style>
29、过渡效果
/* transition-property：指定要执行过渡的属性，可以同时指定多个属性，多个属性间用 , 隔开，如果所有属性都需要设置过渡可以使用 all 关键字 注：过渡是一个有效数值向另一个有效数字进行过渡，不能的auto */ transition-property:height,width; transition-property:all 标签：2p3p间距连接器