一、 盒子模型、盒子型、框模型（box model）
- CSS将网页中的所有元素都设置为了一个矩形的盒子
- 将元素设置为矩形盒子后对页面的布局就变成将不同的盒子摆放到不同的位置
-
每一个盒子都有以下及格部分组成
-
内容区（content）
-
内边框（padding）
-
边框（border）
-
外边框（margin）
-
- 内容区（content），元素中所有的子元素和文本内容区都在内容区排列
内容区的大小由width和heigth两个属性来设置
width 设置内容区的宽度
heigth 设置内容区的高度
- 边框（border），边框属于盒子边缘，边框里边属于盒子内部，除了变宽都是盒子的外部
-
-
要设置边框。需要至少设置三个样式：
- border-width 边框的宽度
默认值 一般都是三个像素
border-width 可以用来指定四个法相的边框的宽度
值情况：
四个值：上 右 下 左 （顺时针）
三个值：上 左右 下
两个值：上 下
一个值：上下左右
除了border-width外还有一组 border-xxx-width
xxx可以是 top rigth bottom left
用来单独指定某一个变得宽度
-
border-color 边框的颜色
border-color用来指定边框的颜色，同样可以分别指定四个边的边框
规则和border一样
border可以不写，如果不写则自动使用color的颜色值
3. border-style 边框的样式
border-style指定边框的样式 同样有四个方向
solid 实线
dotted 点状实虚线
dashed 虚线
double 双线
none没有样式
border-style的默认值时none 表示没有边框
-
border简写属性：通过该属性可以同时设置边框的所有的相关央视，并且没有顺序要求
border: 10px red solid; 除了border意外哈有四个border-xxx 同上
-
-
内边距（padding）
- 内容区和边框之间的距离
- 一共有四个方向的内边距
- padding-top
- padding-right
- padding-botton
- padding-left
- 内边距的设置会影响到盒子的大小
- 背景颜色会延伸到内边距上
一个盒子的可见狂的大小由内容区 内边距 和 边框共同决定
所以在计算盒子大小时，需要将这三个区域一起计算
-
内边距的简写属性，可以同时指定四个方向的内边距
规则和border-width 一样
-
外边距（margin）
- 外边距不会影响盒子可见框的大小 但会影响盒子的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距
- 注意
- 元素在页面中是按照自左向右的顺序排序的，
- 所以默认情况下如果我们设置的左和上外边距则会移动自身
- 而设置下和右会移动其他元素
- 元素在页面中是按照自左向右的顺序排序的，
- margin-top
- 上外边距 设置一个正值，元素会向下移动
- margin-rigth
- 默认值况下不会产生任何效果
- margin-buttom
- 下外边距 设置一个正值，其下边的元素会向下移动
- margin-left
- 左外边距 设置一个正值，元素会向右移动
- margin也可以设置负值，如果设置负值会向相反的方向移动
- margin的简写属性
- margin 可以设置四个方向的外边距，用法和padding一样
- 注意
-
盒子的水平布局
-
元素的水平方向布局
-
元素在其父元素中的水平方向的位置由以下几个属性共同属性决定
- margin-left
- border-left
- padding-left
- width（默认为auto：自动调整）
- padding-rigth
- margin-rigth
-
一个元素在其父元素中，水平元素布局必须满足以下的等式
-
margin-left + border-left + padding-left + width + padding-rigth + border-right + margin-rigth = 其父元素内容区的宽度（必须满足）
-
如果等式不成立，则成为过度约束，则等时会自动调整
- 调整情况：
- 如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以时等式成立
- 调整情况：
-
这七个之中由三个值可以设为auto
-
width
-
margin-left
-
margin-right
-
如果某个值为auto，则会自动调整为auto的那个值使等式成立
-
如果将一个宽度和外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动调为0
-
如果将三个值设置为auto，则外边距都是0，宽度最大
-
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为值
所以我们经常利用这个特点来时一个元素在其父元素中水平居中
示例：
width:xxx;
margin:0 auto;
-
-
-
-
-
盒子的垂直方向布局
-
默认情况下父元素的高度被内容撑开
-
子元素实在父元素的内容区中排列的，
-
如果子元素的大小超过父元素，则子元素中一处
-
使用overflow属性来设置父元素如何处理一处的子元素 父类设置
- 可选值
- visible 默认值，子元素会从父元素中溢出，在父元素外部显示
- hidden 一处部分将会被裁剪 不会显示
- sroll 生成两个滚动条，同滚动条来查看完整内容
- auto 根据需要生成滚动条
- overflow-x 单独处理水平方向的
- overflow-y 单独处理垂直方向的
- 可选值
-
-
外边距折叠
-
垂直外边距重叠（折叠）
-
相邻的垂直外边距会大声重叠现象
-
兄弟元素
- 兄弟元素的响铃垂直外边距会取两者之间的较大值 （两者都是正值）
- 特殊情况
- 相邻的外边距一正一负，则取两者的和
- 如果相邻的外边距都是负值，则取两者中绝对值的较大值
- 兄弟元素之间的外边距折叠对于开发时有力的，所以我们不需要进行处理
-
父子元素
- 父子元素相邻的外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面布局，必须要进行处理
-
解决方法：
-
.clearfix::before {
content:’’;
display:table;
}
-
-
行内元素的和模型
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding，但是垂直方向padding不会影响布局 会覆盖其他元素
- 行内元素可以设置border，但是垂直方向border不会影响布局 会覆盖其他元素
- 行内元素可以设置margin，但是垂直方向margin不会影响布局 会覆盖其他元素
- 可以使用display属性来将行内元素转换为块元素
- 可选值：
- inline 将元素设置成行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内块元素
- 行内块，既可以设置高度和宽度又不会独占一行
- table 将一个元素设置为一个表格
- none 元素不在页面中显示
- visibility 用来设置元素的显示状态
- 可选值：
- visible 默认值， 元素在页面中正常显示
- hidden 元素在页面中隐藏 不显示 饭依然占据页面的位置
-
浏览器默认样式
- 默认样式
- 通常情况下，浏览器都会为元素设置一些默认样式
- 默认样式的存在会影响页面的布局，通常情况下编写网页时必须去除浏览器的默认样式（PC端的页面）
-
盒子大小
- 默认情况下，盒子可见狂的大小由内容区、内边距和边框共同决定的
- box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
- 可选值
- content-box 默默认知，宽度和高度来设置整个盒子就可见框的大小
- border-box 宽度和高度用来设置整个盒子可见框的大小
- width和height值的时内容区和内边距和边框的总大小
- 轮廓阴影和圆角
- outline 用来设置匀速的轮廓线，用大和border一摸一样
- 轮廓和边框不同点就是轮廓不会影响可见框的大小
- box-shadow 用来设置与那苏的阴影效果，阴影不影响页面布局
- 语法：
- box-shadow: 0px 0px 0px red;
- 第一个 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
- 第二个垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
- 第三个值 阴影的模糊半径
- 第四个值 阴影颜色
- border-radius：用来设置圆角
- 四个值 左上 右上 右下 坐下
- 三个值 左上 右上/坐下 右下
- 两个值 左上/右下 右上/坐下
- 一个值全部
- 四个方向：
- border-top-left-radius ：0px 0px 左上角圆角
- border-top-right-radius 左上角圆角
- border-bottom-left-radius 左上角圆角
- border-bottom-right-radius 左上角圆角
- 第一个值水平方向半径 第二个值垂直放下半径
- 设置成园
- border-radius: 50%;
二、浮动
-
浮动介绍
-
通过浮动可以是一个元素向其父元素的左右侧移动
- 使用float属性来设置元素的浮动
- 可选值：
- none 默认值 元素不移动
- left 元素向左移动
- right 元素向右浮动
- 可选值：
- 使用float属性来设置元素的浮动
-
注意：
- 元素设置浮动以后，水平布局的等式便不需要强制成立
- 元素设置浮动之后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
-
浮动特点：
- 浮动元素会完全脱离文档流，不会占据文档流中的位置
- 设置浮动后元素会像父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左向右移动时，不会超过它前面的其它浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则福哦那个元u尿素无法上移
- 浮动元素不会超过他上边的兄弟元素，最多和它一样高
-
浮动其它特点：
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围
- 所以我们可以利用浮动来设置文字环绕图片的效果
- 元素设置浮动以后，将会从文档流中脱离，元素的一些特点也会发生改变
- 脱离文档流的特点：
- 块元素
- 快语速不会再独占一行
- 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
- 行内元素
- 行内元素脱离文档流以后会变成块元素，特点和块元素一样
- 脱离文档流以后就没有块元素和行内元素的区别
- 块元素
- 脱离文档流的特点：
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围
-
浮动缺点
-
高度塌陷问题
- 在浮动布局中，父元素的高度默认时被子元素撑开的，当子元素浮动后。其会完全脱离文档流，子元素从文档流中脱离将会无法整齐父元素的高度，导致父元素的高度丢失
- 父元素高度丢失以后，旗下的元素会自动上移，导致页面布局混乱
- 所以高度塌陷时浮动布局中比较常见的一个问题，这个问题必须要处理
-
BFC 块级格式化环境
-
BFC是一个CS中的隐含属性，可以为一个元素开启BFC
- 开启BFC该元素会变成一个独立区域
-
元素开启BFC后的特点：
- 开启BFC后元素会不被浮动元素所覆盖
- 开启BFC的元素资源子元素和父元素的外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
-
可以通过一i额特殊方式开启元素BFC：
-
设置元素浮动（不推荐）
-
将元素设置为行内块元素（不推荐）
-
将元素的overflow设置为一个非visible的值
常用方式 为元素设置 overflow:hidden开启七BFC
-
-
如果我们不希望某个元素因为其他元素浮动影响而改变位置，我们可以通过clear属性清楚浮动元素对当前元素所产生的影响
- clear
- 作用：清除浮动元素对当前元素的影响
- 可选值
- left 清除左侧浮动元素对当前元素的影响
- right 清除左侧浮动元素对当前元素的影响
- both 清楚两侧元素中影响较大的那侧
- 原理：设置清除浮动之后浏览器会自动为元素添加一个上外边距以使七不受其他元素影响
- clear
-
高度塌陷的最终解决方案
-
利用after伪元素解决
-
原理：就是在父元素最后添加一个块元素让父元素适应撑开子元素
-
语法：
-
.父元素::after {
content:’’;
display:block;
clear:both;
}
-
等同于在父元素CSS代码之后加一个新的div
-
.clear {
clear:both;
}
-
-
-
同时解决外边距重叠和高度塌陷问题
-
.clear::before,
.clear::after {
content:’’;
display:table;
clear:both;
}
-
可以同时解决高度塌陷和外边距重叠问题，
-
-
-
-
-
总结：
- 浮动目前来讲他的主要作用时让他网页中的元素可以水平排列
- 通过这一特点可以制作一些水平方向布局
- 浮动目前来讲他的主要作用时让他网页中的元素可以水平排列
-
三、定位（posting）
- 定位是一种跟高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 使用position属性来设置定位
- 可选值：
- static 默认值，元素是静止的没有开启定位
- relative 开启元素的相对定位
- absolute 开启元素的决定定位
- fixed 开启元素的固定定位
- sticky 开启元素的粘滞定位
- 相对定位：
- 当元素的position属性值设置为relative时则开启元素的相对定位
- 相对定位的特定：
- 元素开启相对相对定位以后，如果不设置偏移量元素不会发生任何变化
- 相对定位使参照于元素在文档流中的位置进行定位的
- 相对定位会改变元素的层级
- 相对定位不会改变元素的性质，块还是块，行内还是行内
- 偏移量（offset）
- 当元素开启了定位定位以后，可以通过偏移量来设置元素位置
- top 定位元素和定位位置上边的距离 使元素向下移动
- bottom 定位元素和定位位置下边的距离 使元素向上移动
- 定位元素垂直方向的位置由top和bottom属性值来决定，通常情况下只是用一种
- left 定位元素和定位位置左侧距离
- right 定位元素和定位位置右侧距离
- 定位元素垂直方向的位置由left和right属性值来决定，通常情况下只是用一种
- 当元素开启了定位定位以后，可以通过偏移量来设置元素位置
- 绝对定位
- 当元素的position属性设置为absolute时，则开去了元素的绝对位置
- 绝对定位的特点：
- 如果不是这偏移量元素的位置不会发生变化
- 开启决定定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质，行内变块，，块的宽高被内容撑开
- 绝对定位会使元素提升一个层级
- 决定定位元素是相对于包含块进行定位的
- 包含块
- 正常情况下：
- 包含块就是离当前元素最最近的祖先块
- 决定定位的包含块：
- 包含块就是离它最近的开启了定位的祖先元素
- 如果所有的祖先元素都没有开启定位则根元素就是他的包含块
- html（根元素、初始包含块）
- 正常情况下：
- 固定定位：
- 将元素属性position属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点都和决定定位一样
- 唯一不同的是固定位置永远参照浏览器的视口进行定位（不会随网页的滚动条滚动）
- 粘滞定位
- 当元素position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致
- 不同的是粘滞定位可以在元素到达某个位置时将其固定
- 绝对元素定位的布局
- 当我们开启了绝对定位后：
- 水平方向布局等式就需要添加left和right两个值
- 此规则和之前一样只是多添了两个值
- 如果九个值中没有auto则会自动调整right意识等式满足
- 可设置为auto的值
- margin width left right
- 因为left和right的默认值是auto，所以如果不知道left和right则等式不满足是，会自动调整这两个值
- 水平方向布局等式就需要添加left和right两个值
- 垂直方向布局的等式也必须满足
- top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块高度
- 当我们开启了绝对定位后：
- 元素层级
- 对于开启了定位元素，可以通过z-index属性来指定元素的层级
- z-index需要一个整数作为参数，值越大元素层级越高 层级元素越高先显示
- 如果层级一样，则优先显示靠下的元素
- 祖先元素的层级再高也无法盖住后代
- 对于开启了定位元素，可以通过z-index属性来指定元素的层级
四、字体族
-
字体相关样式
-
color 用来设置字体颜色
-
font-size 用来设置字体大小
- 和font-size相关单位
- em 相当于当前元素的一个font-size
- rem相当于根元素一个font-size
- 和font-size相关单位
-
font-family 字体族（字体的格式）
-
可选值：
- serif 衬线字体
- sans-serif 非衬线字体
- monospace等宽字体
- 指定字体的类别，浏览器会自动使用该别类下的字体
- 以及具体的字体 如，font-family: ‘微软雅黑’；
-
font-family 可以设置多个字体，优先使用第一个 如果不能使用则使用下一个
-
font-face可以将服务器中的字体直接共同给用户去使用
- 问题：
- 1.加载问题
- 2.版权
- 3.字体格式
font-face {/*指定字体颜色*/font-family:'myfont'/*服务器中字体路径*/src:url('./xxx')} - 问题：
-
-
-
图标字体（iconfont）
- 在网页中经常使用一些图标，可以通过图片引入图标
- 但是图片大小本身比较大时，并且非常的不灵活
- 所以在使用图标是，我们还可以将图标直接设置为字体，
- 然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
- 在网页中经常使用一些图标，可以通过图片引入图标
-
fontawesome使用步骤
- 1.下载
- 2.解压
- 3.将css和webfonts的形式来对字体进行引入
- 4.将all.css引入网页中
- 5.使用图标字体
- 直接通过类名使用图标
-
通过伪元素设置图标字体
- 1.找到要设置图标的元素通过before或after选中
- 2.在content中设置字体编码
- 3.设置字体样式
- `fab``
font-family:'Font Awesome 5 Brands';font-weight:900;
-
通过实体来使用图标字体
- &#x图标的编码；
-
行高（line height）
- 行高指的是文字占有的实际高度
- 可以line-height来设置行高
- 行高可以设置一盒大小（px em）
- 也可以设置一个整数
- 如果是一个整数的话，行高将会是字体的指定的倍数
- 行高可经常用来设置文字的行间距
- 行间距 = 行高 - 字体大小
- 字体框
- 字体框就是字体存在的各自，设置font-size实际就是设置字体框的高度
- 行高会在字体狂的上下平均分配
-
字体的简写属性
-
font可以设置字体相关的所有属性
- 语法： font:字体大小/行高 字体族
- 行高 可以省略不写 图个不写会使用默认值
-
font-weight 字体加粗 语法：font-sieze : bold;
- 可选值：
- normal 默认值不加粗
- bold 加粗
- 100-900 九个级别（没什么用）
- 可选值：
-
font-style 字体风格
- 可选值：
- normal
- italic 斜体
- 可选值：
-
字体复合属性
font: font-style font-weight font-size/line-height font-family;
font: italic 700 20px/20px “微软雅黑“;
-
-
文本的水平和垂直对齐
- text-align 文本的水平对齐
- 可选值：
- left 左侧对其
- right 右侧对其
- center 居中对齐
- justify 两端对齐
- 可选值：
- vertical-align 设置元素垂直对齐方式
- 可选值
- baseline 基线对齐
- top 顶部对齐
- bottom 底部对齐
- middle 居中对齐
- 可选值
- text-align 文本的水平对齐
-
其它文本样式
- text-decoration 设置文本修饰
- 可选值：
- none 什么都没有
- underline 下划线
- line-thruogh 删除线
- overline 上划线
- 可选值：
- while-space 设置网页如何处理空白
- 可选值：
- normal 正常
- nowrap 不换行
- pre 保留空白
- 可选值：
- text-decoration 设置文本修饰
五、背景
- 设置背景颜色
- background-color 设置背景颜色
- background-imag 设置背景图片
- background-imag : url(‘图片位置’);
- 可以同时设置背景图片和背景颜色，这样背景颜色会作为图片的背景色
- 如果背景图片小于元素，则背景图片会自动平铺将元素铺满
- 如果背景图片小于元素，将会一部分背景无法完全显示
- backgr-repeat 设置背景重复方式
- 可选值
- repeat 默认值 背景会沿着x轴y轴双向重复
- repeat-x 默认值 背景会沿着x轴重复
- repeat-y 默认值 背景会沿着y轴重复
- background-position 用来设置背景的位置
- 设置方式
- 通过top lef right bottom center 几个方位词表示位置
- 使用方向此必须同时指定两个值，如果只写一个词第二个值默认center
- 通过盘一辆来指定背景图片位置
- 水平方向偏移量 垂直方向偏移量
- background-position:100px 200px;
- 水平方向偏移量 垂直方向偏移量
- 通过top lef right bottom center 几个方位词表示位置
- 设置方式
- 设置背景范围
- background-clip
- 可选值：
- border-box 默认值 被那个会出现在内容区和内容区
- padding-box 背景不会出现在边框只出现内容区和内边距
- content-box 背景只会出现在内容区
- 可选值：
- background-clip
- background-origin 背景图片的偏移量计算的原点
- padding-box 默认值 background-position从内边距开始计算
- content-box 背景图片的偏移量从内容区处计算
- border-box 背景图片的变量从边框开始计算
- background-size 设置背景图片的大小
- 第一个孩子表示宽度
- 第二个表示高度
- 如果只写一个，则第二个值默认auto
- cover 图片比例不变，将元素铺满
- contain 图片比例不变，将图片在元素中完整显示
- background-attachment 背景图片时候跟随元素移动
- 可选值：
- scroll 默认值 背景图片会跟随元素移动
- 可选值：
- 渐变 通过渐变可以设置一些复杂的背景颜色，可以实现一个颜色向其他颜色过度的效果
- 渐变是图片，需要通过background-image 来设置
- 线性渐变 颜色会沿着一条直线发生变化
- linear-gradient()
- linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过度区域
- 线性渐变的开头，我们可以制动一个渐变的方向
- to left
- to right
- to bottom
- to top （可以自由组合）
- background-imag:linear-gradient(to left top ,red,yellow);
- deg deg表示度数
- turn 表示圈
- 可以指定多种颜色，默认情况下平均分配，
- 也可以手动指定渐变分布情况background-imag:linear-gradient(red 50px,yellow，blue);(有多少纯的颜色)
- background-imag:linear-gradient(to left top ,red,yellow，blue…);
- repeating-linear-gradient() 可以设置平铺的线性渐变
- linear-gradient()
- 径向渐变 radial-gradient() 径向渐变（放射性的效果）
- 默认情况下径向渐变原型的形状根据元素的形状计算的
- 正方形 圆形
- 长方形 椭圆
- 我们可以手动指定径向渐变的大小
- circle
- ellipse
- 也可以指定渐变的位置
- 我们可以手动指定径向渐变的大小
- 默认情况下径向渐变原型的形状根据元素的形状计算的
六、过度 transition
- 用法
-
transition:要过渡的属性 花费的时间 运动曲线 何时开始;
- 1.属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距等，如果想让所有的属性都过渡，写一个all即可
- 2.花费时间：单位为秒（必须写单位）比如0.5s
- 3.运动曲线：默认是ease（可以省略）
- 4.何时开始：单位是秒（必须写单位）可以设置延迟触发事件 默认0s可以省略
-
如果想写多个属性 利用 , 分割 也可以利用all改变所有的属性
-
谁做过渡transition写给谁
-
<style> #app { width: 120px; height: 15px; border: solid 1px red; border-radius: 7px; padding: 1px; } .in { width: 30%; height: 100%; border-radius: 7px; background-color: red; transition: width 1.5s; } #app:hover .in { width: 100%; } </style> </head> <body> <div id='app'> <div class="in"></div> </div>
-
七、动画
-
动画的基本使用
-
1.先定义动画
-
利用keyframes定义动画
-
@keyframes 动画名称 { 0% { width:100px; } 50% { width:150px; } 100% { width:200px; } }
-
-
2.在调用动画
-
在类内调用
-
//调用动画 animation-name:动画名称; //持续时间 animation-duration:2s;
-
-
-
动画序列
- 0%是开始，100%是动画完成
- 在@keyframes中规定某项CSS样式，就能创建有当前样式逐渐改变为新的样式
- 可以改变任意多的样式也可以改变任意次数
- from和to等价于0%和100%
-
<style> @keyframes move { 0% { transform: translate(0 ,0) } 25% { transform: translate(1100px ,0) } 50% { transform: translate(1100px,1000px) } 75% { transform: translate(0,1000px); } 100% { transform: translate(0,0); } } .app { width: 120px; height: 100px; background-color: #fab; animation-name: move; animation-duration: 4s; } </style> -
常见属性
- @keyframes 规定动画
- animation 所有动画属性的简写属性，除了animation-play-state属性
- animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向播放 起始时间或者结束的状态
- animation-name 规定@keyframes动画的名称（必须）
- animation-duration 规定动画完成一个周期所花费的时间，默认是0（必须）
- animation-timing-function 规定动画的速度曲线，默认是“ease”
- animation-delay 规定动画何时开始 默认是0
- animation-iteration-count 规定动画被播放的次数，默认是1 还要infinite
- animation-direction 规定动画是否在下一个周期逆向播放，默认是“normal”，alternate逆播放
- animation-play-state 规定动画是否在运行或暂停。默认是running含有paused
- 利用伪类配合
- animation-fill-mode 规定动画结束后的状态，保持forwards回到初始backwards
#技巧
-
要让一个文字在父元素中垂直居中，只需将父元素的line-height设置为和父元素height一样高即可
-
为了边框和文字一样，可以将块元素设置为行内块元素
-
多于文字不换行显示省略号
.box {width : 200px;while-space : nowrap;overflow:hidden;text-overflow:ellipsis;}
1951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
