一、厂商前缀
1.1 作用
解决浏览器对C3新特性的兼容，不同的浏览器厂商，定义了自己的厂商前缀
1.2 语法
| 浏览器 | 厂商前缀 | 内核(渲染引擎)：解析html+css+js |
|---|---|---|
| 谷歌 | -webkit- | blink |
| 苹果 | -webkit- | webkit |
| 欧朋 | -o- | blink |
| 火狐 | -moz- | gecko |
| IE | -ms- | trident |
1.3 例子
五个浏览器都要去兼容，也就是以下语句都要写，顺序无所谓（因为无法确定用户使用哪个浏览器）
/* 兼容谷歌和苹果 */
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 过渡和动画的区别
3.3 语法
<!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 属性
四、 媒体查询 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文件中)
②外部引入(各自终端写在各自的css文件中)
五、 弹性盒模型 伸缩盒模型 flex box
5.1 介绍
Css3新增的布局模式，主要用于移动端布局
主要是控制容器中的子元素在容器中的排列方式、对齐方式、分配容器剩余空间等
5.2 名词
弹性容器：父元素
弹性项目：子元素
注意：弹性布局只对弹性容器中的弹性项目生效
5.3 弹性容器上的属性
1）转换为弹性盒模型
display:flex; 把元素转换为弹性容器
父元素开启弹性盒模型，子元素默认水平排列,子元素默认宽度变为由内容撑开
2）设置子元素在父元素中的排列方式
3）设置子元素在主轴的对齐方式
默认子元素水平排列，水平方向为主轴，垂直方向为侧轴
当子元素垂直排列，垂直方向为主轴，水平方向为侧轴
4）设置子元素在侧轴的对齐方式
5）设置子元素是否换行
5.4 弹性项目上的属性
1）flex
①作用
设置弹性盒模型中的子元素如果分配父元素的剩余空间
②语法
flex:flex-grow flex-shrink flex-basis;
默认值 0 1 auto
③flex-grow
设置子元素的扩展比率(子元素宽度的比例)
默认值为0，取值为数值
②flex-shrink
设置子元素的收缩比例
默认值为1，取值为数值
③flex-basis
设置子元素的基准值
默认值为auto，取值px
