一、厂商前缀
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