目录
含义：
层叠样式表(级联样式表）：
简单来说，就是美化页面
作用：
设置HTML页面文本内容，图片外形及版面布局和外观显示样式
解决了HTML局限性（设计性，html属性操作不便，html添加样式繁琐）
HTML结构和CSS样式相分离
特性：
层叠性：
含义：多种CSS样式添加（处理冲突的能力）
原则：样式冲突时，使用就近原则
样式不冲突时，不会层叠
继承性：
含义：部分子标签继承父标签某些样式
样式：font-，line-，color，text-
优先级：
含义：定义CSS样式时，经常出现两个或更多规则应用在同一元素上选择器相同，执行层叠性
定义CSS样式时，经常出现两个或更多规则应用在同一元素上选择器不同，出现优先级
ID>class>element
权重计算公式：
继承/通配选择器： 0，0，0，0
每个元素 0，0，0，1
每个类，伪类 0，0，1，0
每个ID 0，1，0，0
每个行内样式style 1，0，0，0
每个！import 无穷大
（a,b,c） 权重
a:ID选择器个数
b：类，伪类，属性选择器的个数
c：元素，伪元素选择器的个数
注意：值从左到右，左边最大，一级大于一级，数位之间没有进制，级别不可超越
权重叠加：
使用加法计算
注意：数位间没有进制
权重计算时，选中 用公式
未选中 权重是0
使用：
书写位置：
行内式（内联样式）：-----很少使用
写在标签里style属性里
优点：优先级最高
缺点：
1 结构与样式未分离
2 代码结构混乱
3 样式不可复用
4 只能控制当前标签
<div style="width:15px ; height:15px; background-color: green;"></div>内部式（内部样式）：
写在head标签内用style标签
优点：
1 样式可以复用
2 代码结构清晰
缺点：
1 结构和样式未彻底分离
2 样式不可以多个页面复用
3 只能控制当前页面的样式
如下图所示：
外部式（外链样式）：----推荐使用
新建一个以CSS结尾的新文件，再引入html的结构中
引入html中：
<link rel="stylesheet" href="css文件路径" type=“text/css”>
rel 表示被链接文档是个样式表文件
href 定义所链接外部样式表文件的路径
type 定义所链接文档类型（可省略）
优点：
1 样式可以多个页面复用
2 代码结构清晰
3 结构和样式彻底分离
4 可以触发浏览器的缓存机制
缺点：
必须引入才可以使用优先级：
行内样式最大，内部样式和外部样式一样 q
选择器：
基础选择器：
标签选择器(元素选择器)：
作用：把一类标签全部选择出来
优点：快速为页面同类型标签统一样式
缺点：不能设计差异化样式
语法：
标签名{
属性：值;
}
类选择器：
优点：可为元素定义单独或相同样式，可选择一个或多个标签
特殊用法：标签可定义多个类名
注意：类名是自定义的
类名命名：
长名称，词组，横线，英文字母等均可使用
不能使用纯数字，中文
类名（class）写在标签内
语法：
<标签名 class=“类名 类名”></标签名> 类名间用空格隔开--------HTML
.类名{-------CSS
属性：值；
}
ID选择器
ID名写在标签内
注意：ID名是唯一的
命名：
1 名字不要包含空格；
2 不要以数字开头
语法：
<标签名 id=“ID名”></标签名>--------HTML
#ID名{
属性：值；
}
通配符选择器
注意：* 选择所有标签（选择范围最广）
会降低页面响应速度，不建议使用
尽量不使用无具体语义定义的标签
语法：
*{
属性：值；
} 复合选择器：
后代选择器
语法：
父级 子级{
属性：值；
}
例如：div a {} //div内所有a标签css样式都修改
子元素选择器
语法：
父级>子级{
属性：值;
}
例如：div > a {} //div内所有的儿子级元素a标签的css样式都修改
兄弟选择器
语法：
相邻兄弟：
兄弟+兄弟{
属性：值;
}
例如：div+p{} //选择div后下面紧紧相邻的兄弟元素p标签的样式修改
通用兄弟：
兄弟~兄弟{
属性：值;
}
例如：div~p{} //选择div后下面所有的兄弟元素p标签的样式修改
交集选择器(且/和)
语法：
相交关系{
属性：值;
}
例如：div a{} //div内还含有有a标签的标签css样式修改
并集选择器（或）
作用：集体声明，用，隔开，所有选择器执行后面的样式
例如：div，a{} //div和a标签的标签css样式修改
属性选择器：
1 [属性名]{} 选择只有此属性的元素
例如：[title]{}
2 [属性名="属性值"]{} 选择有此属性而且属性值相等的元素
例如：[title=”test“]{}
3 [属性名^="属性值"]{} 选择有此属性而且属性值以所定义的属性值开头的标签
例如：[title^=”test“]{}
4 [属性名$="属性值"]{} 选择有此属性而且属性值以所定义的属性值结尾的标签
例如：[title$=”test“]{}
5 [属性名*="属性值"]{} 选择有此属性而且属性值包含所定义的属性值的标签
例如：[title*=”test“]{}伪类选择器：
伪类选择器：
作用：用于向某些选择器添加特殊的效果
伪类：很像类，但是不是类，是元素的一种特殊状态
动态伪类：
：link 未访问链接--a元素独有
：visited 已访问链接--a元素独有
：hover 鼠标移动到元素上
：active 选定元素
：focus 获取焦点--表单元素专用
结构伪类：
：first-child 选择第一个元素
：last -child 选择最后一个元素
：nth -child(n) 选择第n个元素
n范围：0--正无穷；
公式法（使用an+b格式）：2n，2n+1
even偶数，
odd奇数
：first-of-type 选择同类型的标签第一个元素
：last -of-type 选择同类型的标签最后一个元素
：nth -of-type(n) 选择同类型的标签的第n个元素
：nth -last-child(n) 选择倒数的第n个元素
：nth -last-of-type(n) 选择倒数的同类型的标签的第n个元素
：only-child 选择的是唯一的元素
：only-of-type 选择的是同类型的唯一的元素
：root 选择的是html根元素
：empty 选择的是没有内容的空的元素（不能有空格）
否定伪类：
：not(值) 选择的是除了值的其他元素
UI伪类：
：checked 选中的元素修改
：disabled 禁用的元素修改
：enabled 可以使用的元素修改---很少使用，可以省略
目标伪类：
：target 锚点指向的元素样式修改
语言伪类：
：lang(语言名) 语言相同的标签样式修改
注意：使用顺序就是以上的顺序，不要打乱顺序，打乱顺序会导致样式不生效
利用的是交集选择器
a链接有自己默认的样式，使用时需给链接指定格式
例如：
a:link{}伪元素选择器：
lorem数字 //vscode---生成固定数字的随机字符串
伪元素选择器：
含义：很像元素，不是元素，是元素中的一些特殊位置
：：first-letter 选择元素中的第一个项
：：first-line 选择元素中的第一行
：：selection 鼠标选中的内容
：：placeholder input的默认提示颜色修改
：：before 在元素的最前面的前面新增内容
a ：：before{
content:"!"
}
：：after 在元素的最后的后面新增内容
a ：：after{
content:"!"
}
优先级：
!important>行内样式>ID选择器>类选择器>元素选择器>通配选择器>继承的样式
元素的显示模式：
块元素---block：
特点：
1 页面内独占一行显示，从上到下排列
2 默认宽度：撑满父元素
3 默认高度：由内容撑开
4 可以通过css设置宽高的值
例子：div，html，body，h1-h6,hr,p,pre,table,tbody,thead,tfoot,tr,caption,form,option,ul,ol,li,dl,dt,dd
行内元素---inline：
特点：
1 页面内不独占一行，一行无法显示，显示在下一行，从左到右排列
2 默认宽度：由内容撑开
3 默认高度：由内容撑开
4 无法使用css设置宽高的值
例子：span,br,em,strong,del,ins,a,label,sub,sup
行内块元素---inline-block：
特点：
1 页面内不独占一行，一行无法显示，显示在下一行，从左到右排列
2 默认宽度：由内容撑开
3 默认高度：由内容撑开
4 可以使用css设置宽高的值
例子：img,td,th,input,iframe,select,button
修改元素的显示模式：
display：
display显示模式：
取值：inline-block 转变为行内块
inline 转变为行内
block 转变为块级
none 隐藏元素
定位会改变display属性：
inline-block 行内块
float 默认转换为行内块（浮动是脱标的）
绝对固定定位 默认转换为行内块
注意：当行内元素具有定位（绝对，固定），浮动时，可以直接设置宽 高字体样式：
font-size 字体大小
单位: px像素（常用）,em字体尺寸 相对长度
in英寸,cm厘米 绝对长度
注意：谷歌浏览器默认文字大小是16px，最大50px，最小12px，设置为0时，字体不显示
不同浏览器默认显示字体大小不同，尽量不给明确数值，一般给body定大小
font-family 字体
常见字体：黑体，宋体，微软雅黑
衬线字体：有棱有角的字体--serif
非衬线字体：圆润的字体--sans-serif
注意：多个字体用，隔开，从左到右执行
中文字符和英文多个字符要用双引号
执行顺序：从左到右，尽量使用电脑默认字体
Unicode字体：
作用：文件编码不匹配的乱码问题，xp系统不支持微软雅黑字体
font-weight 字体粗细
取值：
关键字
normal 正常字体
bold 字体加粗
bolder 字体更粗---很少使用
ligher 字体更细
数值（100到1000）300字体更细 400正常 600加粗 注意不加单位
font-style 字体风格
取值：normal 标准字体,默认值
italic 倾斜--使用字体自带的倾斜
oblique 倾斜--强制倾斜
综合写法：推荐使用
font：style weight size/行高 family
注意：size是必需要填写
综合写法的顺序不得更换，最后两个必须是size和family
color 字体颜色
取值：英文单词
十六进制 #红绿蓝透明度 范围：00-ff
hsl（色相，饱和度，亮度）
色相： 0-100 0deg(deg可以省略)
饱和度：0-100
亮度： 0-100 常用：50
hsla（色相，饱和度，亮度，透明度）
rgb（红，绿，蓝） 范围：0-255
rgba（红，绿，蓝，透明度） 范围：0-1 0透明 外观属性：
line-height 行高，行间距(行高与高度一致使单行文本垂直居中)
最小值：0
取值：px 像素
em 相对值
% 百分比
倍数 ----推荐使用（1.5-2.0）
单行文本垂直居中：
行高=高度 垂直居中
行高>高度 偏下
行高<高度 偏上
注意：
行高高度和字体大小不要一致，一致时会导致字体重叠问题
行高使用1.5-2.0倍最合适
行高为0时，出现多行文字重叠；背景颜色会丢失；顶部边距会消失
当设置了高度时，盒子宽度就是高度的值，无论行高如何修改高度也不会修改
未设置高度。高度是line-height的高度
text-align 文字对齐方式（水平对齐）
取值：left 左对齐
right 右对齐
center 中间对齐（使水平居中）
注意：行内元素，行内块元素均可使用text-align：center；属性
text-indent 首行缩进
取值：
em 字符宽度的倍数
px 像素
注意：1em = 一个汉字的宽度
text-decoration 文本装饰
语法：
text-decoration：类型 颜色 样式
类型取值：
dotted 虚线
wavy 波浪线
样式取值：
none 取消划线，默认值
blink 闪烁
underline 添加下划线
overline 添加上划线
line-through 贯穿线，删除线
width 宽度
默认值：auto 自动 块级铺满整个屏幕，行内只会影响内容长度
width：100%通常与脱离文档流的属性连用
width：33.33% 占用三分之一
height 高度
默认值：auto
height：100% 让子元素和父元素高度保持一致时
height： 其他 % 不推荐使用
outline:none 去掉input的轮廓线
border：0 去掉边框
cursor：pointer 鼠标指针变为小手
letter-spacing 元素间距
word-spacing 单词间距（使用空格区分是否为单词）
vertical-align 控制元素(行内元素,单元格)在当前行的垂直方向对齐方式
取值：
top 顶部
bottom 底部
baseline 默认值
middle 居中
注意：
用于行内元素和单元格(table)--类似于：valign属性
元素使用图片时，图片比文字大时，使用对齐方式，图片的对齐样式不动，文字的对齐样式修改鼠标属性：
鼠标属性：
鼠标放到不同元素上面显示不同的效果
cursor：
1 自带的值
pointer 小手
move 拖动
wait 加载
help 帮助
2 自定义的值
url(地址).pointer
列表属性：
list-style-type： 设置列表样式符号
取值：
none 无样式---常用
square 方块
lower-rowan 小写罗马数字
upper-rowan 大写罗马数字
decimal 数字
list-style-position：设置列表符号的位置
取值：
inside 里面
outside 外面
list-style-image： 自定义列表符号
取值：url(图片地址)
综合写法：
list-style：type position image
表格属性：
border-width：边框宽度
border-color：边框颜色
border-style：边框样式
取值：
solid 实线
dashed 虚线
dotted 点线
double 双实线
综合方法：
border：width color style
table独有属性：
table-layout 控制表格的列宽
取值：
fixed 固定
border-spacing 控制单元格的间距(前提：未使用合并单元格边框)
取值：
px 像素
border-collapse 合并相邻单元格的边框
取值：
collapse
empty-cells 隐藏没有内容的单元格(前提：未使用合并单元格边框)
取值：
hide
caption-side 设置表格标题的位置
取值：top
bottom
注意：rowspan，colspan样式通过css样式无法修改，是table特有的属性背景：
background-color 背景颜色
取值：英文单词
transparent 默认值
rgba（0，0，0，透明度）
透明度：0到1
注意：具有兼容性问题，IE9版本以下浏览器不支持
background-image 背景图片
取值：none
url（） 图片地址
background-repeat 图片背景是否平铺
取值：repeat 平铺，默认值
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-position 图片背景的位置
语法：
background-position：水平 垂直
取值：
关键字：
top
center
bottom
left
right
像素
x轴坐标，y轴坐标
注意：使用这个需要先有background-image属性
background-attachment 背景附着
含义：解释背景是滚动的，固定的
取值：scroll 滚动，默认值
fixed 固定
background-size 背景尺寸
取值：contain包含
cover 覆盖
background-origin 背景坐标原点
background-clip 背景裁切
background-image： 背景渐变
取值：linear-grident
综合写法：
background：color url（） repeat scroll position浮动：
float浮动：使块元素水平排列
含义：设置浮动会脱离文档标准流，移到指定内容，文字环绕图片效果（最开始效果）
特点：
1 脱离文档标准流
2 宽度高度由内容撑开
3 和其他元素可以共用一行
4 没有外边距重合和塌陷问题
5 不会和行内块一样当做文本内容进行处理
缺点：
1 父元素的高度塌陷以及其他的问题
2 影响后面的不浮动的兄弟元素的位置(不是行内元素)
作用：解决display缺陷，多个盒子排一行，盒子左右对齐
取值：none 不浮动
left 左浮动
right 右浮动
解决浮动影响：
1 给父元素设置高度； --未解决兄弟元素问题
2 父元素添加float：left； --未解决兄弟元素问题
3 父元素设置overflow：hidden；----未解决兄弟元素问题
取值：hidden
auto 有一个滚动条
scroll 有二个滚动条
优点：代码简洁
缺点：内容增多时易造成不会自动换行导致内容隐藏，无法显示溢出内容
4 兄弟元素设置clear：both； ---消除所有左右浮动的影响
clear 清除浮动：
含义：父级盒子很多情况下，不给定高度
前提：不浮动的块级元素和行内块元素
本质：解决父元素因子浮动引起的内部高度为0的问题
取值：left 清除左浮动
right 清除右浮动
both 清除两侧浮动
5 使用after伪元素 ---推荐使用
父元素：：after{
content:"";
display:block;
clear:both;
}
父元素:after{
content:'';
display:block;
clear:both;
height:0;
visibilty:hidden;
}
//IE6 IE7专用清除浮动
父元素{
*zoom:1;
}
优点：符合闭合浮动思想，结构语义化正确
缺点:IE6.7不支持：after ，使用zoom：1；触发hoslaught
6 用双伪元素：
父元素:before,父元素:after{
content:''；
display：table；
}
父元素:after{
clear:both;
}
父元素{
*zoom:1;
}
优点：代码更简洁
缺点：由于IE6.7不支持after。使用zoom：1；触发hoslaught
7 额外标签法（隔墙法）：
含义：在浮动元素后添加一个空标签
优点：通俗易懂，书写便利
缺点：添加许多无意化标签，结构化较差
注意：浮动的盒子不占用原来的位置
浮动会改变元素display：inline-block；
浮动元素改变成一行后无缝隙，解决display的缺陷
浮动元素会贴靠在一起，父元素装不下，会另起一行
子盒子浮动参照父盒子
子盒子不与边框重叠，不超父元素的内边距定位：
定位：
作用：将盒子定在某一位置，自由漂浮在其他盒子上
组成：定位模式，边偏移
边偏移：
含义：定位盒子通偏移移动位置
属性：top 顶端偏移量
bottom 底部偏移量
left 左侧偏移量
right 右侧偏移量
注意：定位的盒子有了边偏移才有价值
一般情况下，凡是有定位的地方必有边偏移
特点：
1 开启定位之后元素的层级变高，定位的元素层级相等
2 可以超出父元素的宽度
3 使用过定位的元素后，不论类型都可以修改宽高，可以越过外边距
特殊应用：
1子元素父元素没有固定的宽度，子元素使用了绝对定位，宽度撑满父元素方案：
父元素添加相对定位，子元素添加外边距和边框和相对定位，左右设置为0可以使子元素撑满父元素
2 子块及元素在父块及元素内水平垂直居中方案：
前提：父子元素必须设置宽高
（1）子元素margin：0 auto；
overflow：hidden；
margin-top：150px；
（2）父元素设置相对定位，子元素设置绝对定位设置上下左右为0 margin：auto
定位模式：
语法：
选择器{
position：值；
}
分类：
1 static 静态定位:
含义：元素默认定位方式，无定位
注意：按照标准流特性摆放位置，无边偏移
2 relative 相对定位：
含义：元素相对元素原来自己的标准流位置来说移动到指定的位置
特点：
1 相对于自己原来标准流中位置来移动
2 原来的元素在标准流中的区域仍占有，后面盒子仍以标准流对待,不脱离标准文档流
3 上和下，左和右不能同时使用，同时使用left和top生效
4 尽量不要和浮动，外边距混合使用
例子：
position：relative；
left：100px；
top：100px；
应用：
1 元素位置微调
2 和绝对定位配合使用
3 absolute 绝对定位：
含义：元素以带有定位的（最近已经有定位）父元素来移动位置
特点：
1 若父级无定位，绝对定位盒子以我们文档为准则浏览器移动位置
2 若父级有定位，绝对盒子以第一个开启定位的祖先元素级为准则移动位置
3 子绝父相：父元素用相对定位，子元素用绝对定位
4 标准流子盒子总以父级为准移动位置
5 不保留原来位置，完全是脱标的，脱离了标准文档流
6 上和下，左和右不能同时使用，同时使用left和top生效
7 绝对定位元素尽量不要添加外边距和浮动
8 使用绝对定位后元素成为定位元素，行内元素可以设置宽高
例子：
position：absolute；
left：100px；
top：100px；
应用：
1 元素覆盖显示
4 fixed 固定定位：
含义：是绝对定位的一种特殊方式
特点：
1 完全脱标，脱离了标准文档流
2 只认浏览器可视窗口，跟父元素无关，不随滚动条滚动
3 浏览器可视窗口+边偏移属性==>设置元素位置
4 具有兼容性，IE6及以下不支持
5 尽量不要使用外边距和浮动
例子：
position：fixed；
left：100px；
top：100px；
应用：
1 数据固定位置展示
5 sticky 黏性定位：
<div style="position: sticky;"> </div>
特点：
1 不脱离标准文档流
2 尽量不要和浮动，margin一起使用
3 最常用的是top值
4 特点和相对定位相似，但是粘性定位可以在元素达到某个位置进行固定
5 基于最近的滚动机制的祖先元素
例子：
position：sticky；
left：0px；
top：0px；---常用
z-index堆叠顺序：
含义：使用定位布局会出现盒子重叠情况，加定位盒子的元素默认后来者居上，可用堆叠调整顺序
取值：正整数，负整数，0 默认是0(auto)
注意：数值越大，盒子越靠上
若值相同，按照书写顺序后来居上，数字不加单位
只能用于定位元素，对标准流，浮动，静态定位无效
盒子模型：
盒子模型：
含义：盛装内容的容器
组成：边框： border 盒子厚度
内边距： padding 盒子内容与边框距离
外边距： margin 盒子与盒子间距离
长度单位：
1 px 像素
2 em 相对于当前元素或者其父元素的font-size的倍数
3 rem 相对于根元素html的font-size的倍数，默认值：16px
4 % 相对于父元素的百分比
稳定性：
优先级：width padding margin
padding：影响盒子大小
margin：会有外边距合并，兼容性问题
内容：
1 content内容
含义：是设置的盒子宽高的值
width 设置宽度
height 设置高度
min-width 设置最小的宽度
min-height设置最小的高度
max-width 设置最大的宽度
max-height设置最大的高度
注意：
未设置宽度时，宽度是视口的宽度，设置了margin会影响盒子的宽度
2 border 边框
border-width 边框宽度
border-left-width 左边框宽度
border-right-width 右边框宽度
border-top-width 上边框宽度
border-bottom-width 下边框宽度
border-style 边框样式
border-top-style 上边框样式
border-bottom-style下边框样式
border-left-style 左边框样式
border-right-style 右边框样式
取值：dotted 点线
solid 实线
dashed 虚线
none 无边框
border-color 边框颜色
border-top-color 上边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-right-color 右边框颜色
border-collapse：collapse 相邻边框合并在一起
border-radius 边框圆角
取值：px
%
四个值：左上 右上 右下 左下
综合写法：
border-left：粗细 样式 颜色； 左边框设置
border-right：粗细 样式 颜色； 右边框设置
border-top：粗细 样式 颜色； 上边框设置
border-bottom：粗细 样式 颜色；下边框设置
border：粗细 样式 颜色；
注意：
1 内边距的颜色是设置的背景颜色
3 padding 内边距（元素内容距离盒子距离）
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
综合写法：
一个值 padding：上下左右边距
二个值 padding： 上下 左右
三个值 padding： 上 左右 下
四个值 padding： 上 右 下 左
行内元素的上下内边距不会影响元素的位置，不能完美设置
注意：
添加内边距：
1 内容边框有距离
2 盒子变大
盒子实际大小=内容 宽度 高度 + 内边距 + 边框
如何解决盒子变大的问题：
一定给内边距，宽度减去多出来的内边距
当没有设定盒子宽度时，padding不会撑开盒子
3 内边距的颜色是设置的背景颜色
4 margin 外边距（元素与元素间距离，不会改变盒子的大小）
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
综合写法：
一个值 margin： 上下左右边距
二个值 margin： 上下 左右
三个值 margin： 上 左右 下
四个值 margin： 上 右 下 左
注意：
1 子元素的margin根据父元素的content计算
2 上左外边距影响自身位置，下右外边距影响兄弟元素位置
3 块级元素，行内块元素可以使用所有margin，行内元素只能使用左右外边距，设置上下不生效
4 margin：0 auto； 盒子在父元素内水平居中
auto：居中，前提：该元素具有具体宽度是块级元素
5 margin负值：
1 负边距+定位 ：水平垂直居中
2 压住盒子相邻边框，不让盒子边框过粗
3 突出显示：
用定位
有定位，用z-index
6 外边距重合问题：
当两个上下的兄弟盒子一个有上边距，一个有下边距时，两者间距离是最大的外边距
解决：---没有必要解决，注意书写即可
1 float：left （会影响其他元素的位置）
当两个盒子一个有左边距，一个有右边距时，两者间距离是两者边距的和
7 外边距的塌陷问题：
两个上下的兄弟元素设置上下外边距，设置之后会使父盒子移动，子元素不生效
解决：
1 overflow：hidden；溢出文字隐藏
2 父元素设置padding（影响盒子大小）
3 父元素设置border（影响盒子大小）
box-shadow 盒子阴影：
取值：h-shadow 水平阴影位（允许负值）
v-shadow 垂直阴影位置（允许负值）
blur 模糊距离
spread 阴影天寸
color 阴影颜色
inset 外部阴影改为内部阴影
综合写法：box-shadow:水平位移 垂直位移 阴影半径 阴影大小 阴影颜色 inset
box-sizing 盒子模型
border-box 设置的宽高不受内外边距的影响
content-box
盒子大小：
盒子内容content+内边距padding+边框border动画：
animation 动画：
定义动画：@keyframes
@keyframes 动画名称{
0% / form{
开始状态
}
100% / to{
结束状态
}
}
keyframes 关键帧
调用动画：
animation-name； 动画名称
animation-duration 持续时间
动画属性：
animation-timing-function 动画速度曲线
取值：
linear 匀速
steps 步长，指定时间函数中间隔数量
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
animation-delay 动画延迟 默认是0
animation-iteration-count 动画播放次数 默认是1
取值：infinite 重复无限次
animation-direction 动画是否逆向播放 默认是normal
取值：alternate 反向播放
animation-play-state 动画是否正在运行或暂停
取值：pause 停止
animation-fill-mode 动画结束后状态
取值：backwards 回到起始状态，默认值
forwards 停留在结束状态
综合写法：
animation：name duration timing-function delay iteration-count direction fill-mode
2D转换：
转换：transform是CSS3中具有颠覆性特征之一，可实现元素的位移，旋转，缩放
取值：
1 translate 移动
取值：
transform：translate（x，y）
transform：translateX（x）
transform：translateY（y）
优点：不影响其他元素位置
注意：对行内元素无效
当x，y是百分比时，移动距离是盒子自身宽度，高度来对比
盒子水平垂直居中：transform：translate（-50%，-50%）；
2 rotate 旋转
transform：rotate（XX deg）；
取值：正值时，顺时针旋转
注意：默认的旋转中心点是元素的中心点（50%，50%）
transform-origin转换中心点：
transform-origin：x y；
注意：x y间用空格隔开
x y默认的转换中心是元素的中心点（50%，50%）
x y取值：px，方位名词
3 scale 缩放
transform：scale（x y）；
注意：x y不跟单位
x y取值时数值为倍数，大于1为放大，小于1为缩小
优点：不会影响其他盒子，可设置缩放中心点
综合写法：
transform：translate（） rotate（） scale（）；内容溢出：
overflow：
visible 默认值，显示溢出内容
hidden 溢出内容隐藏
auto 溢出显示滚动条
scroll 溢出显示滚动条
overflow-x 不推荐使用
overflow-y 不推荐使用文本显示问题：
//强制一行显示文本
1 white-space: nowrap;
2 display: inline-block;
3 width: 100%;
display: table;
//强制一行显示，溢出部分隐藏并显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
//文本自动换行
word-wrap: break-word;
white-space: normal;
隐藏元素：
1 display：none
不占用页面位置
2 visibility：hidden
占用页面位置修改元素的默认样式：
1 a标签：
去除下边划线：text-decoration：none
修改点击样式：cursor：defult
2 body标签：
去除默认的外边距：margin：0；
开发时：
1 全局选择器：---很少使用
清除所有外边距内边距
*{
margin:0;
padding:0;
}
2 reset.css 自己书写一些清除默认样式-----使用最多
3 Normalize.css 官网---开发者维护使用的网站---标准化的应用布局技巧：
1 水平居中：
盒子：margin：0 auto；
文字：text-align：center；
2 垂直居中：
3 水平垂直居中：
1 盒子---未添加border和padding
父盒子--块级元素：
overflow：hidden；
子盒子--块级元素
margin：0 auto；
margin-top：（父盒子高度-子盒子高度）/2；
盒子----块级元素-添加border和padding
父盒子：
overflow：hidden；
子盒子--块级元素
margin：0 auto；
margin-top：（父盒子高度-子盒子高度-上下的边框宽度和）/2；
盒子----块级元素-添加border和padding
父盒子：
text-align：center； ---水平居中
line-height：同height高度；---垂直居中
子盒子--行内元素（可以当成文字处理）
2 文字：
text-align：center；
line-height：同height高度；
3 图片+其他元素垂直居中：
1 此方法不是绝对的垂直居中
父盒子--块级元素：
text-align：center； --水平居中
line-height：同height高度； --垂直居中
子盒子--行内块元素+其他元素：
img：
verilgn：middle
2 绝对的垂直居中
父盒子--块级元素：
text-align：center； --水平居中
line-height：同height高度； --垂直居中
font-size：0px；
子盒子--行内块元素+其他元素：
img：
vertical-align：middle
其他元素（span）：
font-size：40px；
vertical-align：middle 元素空隙问题：
行内元素在书写时，相邻元素用空白内容
解决：
1 行内元素不进行换行操作
2 父元素设置font-size：0px；
行内块元素在显示时下面有个空白内容
解决：
1 vertical-align：
前提：含有文字内容
设置为：top，bottom。center ，不可以设置为baseline
2 display：block；
前提：后面没有其他的内容
3 父元素设置font-size：0px；
如果还有其他元素需要单独设置font-size
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
