一、厂商前缀
1.1 作用
解决浏览器对C3新特性的兼容，不同的浏览器厂商，定义了自己的厂商前缀
1.2 语法
| 浏览器 | 厂商前缀 | 内核(渲染引擎)：解析html+css+js |
|---|---|---|
| 谷歌 | -webkit- | blink |
| 苹果 | -webkit- | webkit |
| 欧朋 | -o- | blink |
| 火狐 | -moz- | gecko |
| IE | -ms- | trident |
1.3 例子
五个浏览器都要去兼容，也就是以下语句都要写，顺序无所谓（因为无法确定用户使用哪个浏览器）
css
/* 兼容谷歌和苹果 */
background-image:-webkit-radial-gradient(top,red,orange,yellow,green,blue) ;
/* 兼容欧朋 */
background-image: -o-radial-gradient(top,red,orange,yellow,green,blue);
/* 兼容IE */
background-image: -ms-radial-gradient(top,red,orange,yellow,green,blue);
/* 兼容火狐 */
background-image: -moz-radial-gradient(top,red,orange,yellow,green,blue);
background-image: radial-gradient(top,red,orange,yellow,green,blue);二、 css hack （了解）
2.1 作用
解决IE不同版本的兼容性问题
2.2 语法
1）条件hack
位置同HTML
<!--[if 条件]>
代码块
<![endif]-->
条件：
IE 版本号 指定版本
gt IE 版本号 大于
gte IE 版本号 大于等于
lt IE 版本号 小于
lte IE 版本号 小于等于
2）属性hack
在属性前面或者后面加符号
前缀：* + - _ # 例如：*color:;
后缀：\0 \9 \9\0 !important 例如：color:red !important;
三、 动画
3.1 作用
使元素从一种样式逐渐变为另外一种样式
3.2 过渡和动画的区别
过渡：简单的动画
1）必须有触发事件 :hover，没法在页面加载时自动执行
2）过渡是一次性的
3）过渡只有开始状态和结束状态，没有中间的过程
动画：复杂的动画1）定义动画的过程 @keyframes name{}
2）可以没有触发事件，可以在网页加载时自动执行
3）可以执行任意多次
3.3 语法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
过渡：简单的动画
1）必须有触发事件 :hover，没法在页面加载时自动执行
2）过渡是一次性的
3）过渡只有开始状态和结束状态，没有中间的过程
*/
.box1 {
width: 200px;
height: 200px;
/* 开始状态 */
background-color: red;
transition: all 1s;
}
/* 鼠标悬停触发过渡 */
.box1:hover {
/* 结束状态 */
background-color: yellow;
}
/*
动画：复杂的动画
1）定义动画的过程 @keyframes name{}
2）可以没有触发事件，可以在网页加载时自动执行
3）可以执行任意多次
*/
.box2 {
width: 200px;
height: 200px;
background-color: red;
margin-top: 20px;
/* 2.触发动画 */
/*
animation: name duration timing-function delay iteration-count direction fill-mode;
必须 必须 可选 可选 可选 可选 可选
名称 持续时间 速度变化类型 延迟时间 播放次数 方向 动画是否停在最后一帧
*/
/* animation: dh 3s linear 1s 3 alternate forwards; */
/* 单个属性 */
animation-name: dh;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
.box2:hover{
/* 暂停动画 */
animation-play-state: paused;
}
/* 1.定义动画的过程 状态 */
@keyframes dh {
/* 开始的状态 */
0% {
background-color: red;
}
/* 任意的百分比 动画的过程 */
20% {
background-color: orange;
width: 1200px;
}
50% {
background-color: blue;
width: 600px;
transform: rotate(360deg);
}
75% {
background-color: green;
width: 200px;
}
/* 结束的状态 */
100% {
background-color: yellow;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>1）定义动画的过程
@-webkit-keyframes name{
<!-- 开始的状态 -->
0%|from{
css样式
}
<!-- 任意百分比 过程 -->
百分比{
css样式
}
<!-- 结束的状态 -->
100%|to{
css样式
}
}
2）触发动画
-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
必须 必须 可选 可选 可选 可选 可选
名称 持续时间 速度变化类型 延迟时间 播放次数 方向 动画是否停在最后一帧
3.4 属性
animation-name: ;动画名称 必须属性
animation-duration: ;动画持续时间 必须属性 取值s|ms
animation-timing-function: ;动画速度变化类型 可选属性 ease ease-in ease-out ease-in-out linear
animation-delay: ;延迟时间 可选属性 取值s|ms 可以取负值
animation-iteration-count: ;动画播放次数 可选属性 数字|infinite(无限循环)
animation-direction: ;动画播放方向 可选属性 alternate(偶数次倒序播放)
animation-fill-mode: ;动画是否停在最后一帧 可选属性 forwards(动画停在最后一帧)
animation-paly-state:;动画的状态 可选属性 running：默认值，运行 paused：暂停
四、 媒体查询 media query
4.1 响应式布局
1）概念
写一次样式，适配所有终端
2）优缺点
优点：能够快速的适配所有的终端
缺点：代码量大，浏览器加载时间长
4.2 实现响应式布局的方法
1）媒体查询
2）bootstrap
3）rem+js
4）vw
4.3 媒体查询
1）设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
视口 设备宽度 初始化缩放比例
2）不同的设置宽度显示不同的样式
①行内引入(所有的终端样式写在一个css文件中)
移动端
@media screen and (max-width:768px){
移动端的样式
}
平板
@media screen and (min-width:768px) and (max-width:992px){
平板的样式
}
pc端
@media screen and (min-width:992px){
pc端的样式
}
②外部引入(各自终端写在各自的css文件中)
移动端
<link rel="stylesheet" href="样式文件" media="screen and (max-width:768px)">
平板端
<link rel="stylesheet" href="样式文件" media="screen and (min-width:768px) and (max-width:992px)">
pc端
<link rel="stylesheet" href="样式文件" media="screen and (min-width:992px)">
五、 弹性盒模型 伸缩盒模型 flex box
5.1 介绍
Css3新增的布局模式，主要用于移动端布局
主要是控制容器中的子元素在容器中的排列方式、对齐方式、分配容器剩余空间等
5.2 名词
弹性容器：父元素
弹性项目：子元素
注意：弹性布局只对弹性容器中的弹性项目生效
5.3 弹性容器上的属性
1）转换为弹性盒模型
display:flex; 把元素转换为弹性容器
父元素开启弹性盒模型，子元素默认水平排列,子元素默认宽度变为由内容撑开
2）设置子元素在父元素中的排列方式
flex-direction:;
row：默认值 从左往右水平排列
row-reverse：从右往左水平排列
column：从上往下垂直排列
column-reverse：从下往上垂直排列
3）设置子元素在主轴的对齐方式
默认子元素水平排列，水平方向为主轴，垂直方向为侧轴
当子元素垂直排列，垂直方向为主轴，水平方向为侧轴
justify-content:;
flex-start：默认值 弹性盒的开始
flex-end：弹性盒的结束
center：居中
space-between：在子元素之间平均分配父元素剩余的空间
space-around：在子元素四周分配父元素剩余的空间，两端是中间的一半
4）设置子元素在侧轴的对齐方式
align-items:;
flex-start：默认值 弹性盒的开始
flex-end：弹性盒的结束
center：居中
5）设置子元素是否换行
flex-wrap:;
nowrap:默认值 不换行
wrap：换行
5.4 弹性项目上的属性
1）flex
①作用
设置弹性盒模型中的子元素如果分配父元素的剩余空间
②语法
flex:flex-grow flex-shrink flex-basis;
默认值 0 1 auto
③flex-grow
设置子元素的扩展比率(子元素宽度的比例)
默认值为0，取值为数值
②flex-shrink
设置子元素的收缩比例
默认值为1，取值为数值
③flex-basis
设置子元素的基准值
默认值为auto，取值px