CSS3

主流浏览器的前缀
prefix		browser
-webkit		chrome和safari
-moz		firefox
-ms			IE
-o			opera
什么时候加前缀,什么时候不加?

可以根据css参考手册或caniuse官网:

http://css.doyoe.com/
https://www.caniuse.com/
css前缀演变史(举个例子 仅用于说明)
1、---> 
只有谷歌实现,我要在自己上面加个标识,
只能我认识,是我私有的属性
-webkit-border-radius
2、--->
后来火狐和欧鹏我也实现了,我也要加个标识
-moz-border-radius
-o-border-radius
3、--->
ie说我也实现了我也要加个表示
-ms-border-radius
4、最后w3c标准发现大部分浏览器都实现了这个属性的时候
大家都去掉前缀吧
border-radius
预处理器和后处理器

postCss:用js实现的css的抽象的语法树AST(Abstract Syntax Tree)。相当于一个平台,可以让一些插件在上面跑

后处理器和预处理器都是基于postCss,postcss + 插件 (充分实现扩展性,200多个)

预处理器(pre-processor)

如:less/sass cssNext

后处理器(post-processor)

如:autoprefixer该插件可以自动添加前缀

css选择器

一、关系型选择器

1、E F(包含选择器) 选择所有被E元素包含的F元素。所有子孙元素
<div><p>1</p><p>2</p><p>3</p><div><p>4</p>	</div>
</div>/* 拿到所有的p元素 */
div > p{}
2、E > F(子选择器) 选择所有作为E元素的子元素F。仅子元素
<div><p>1</p><p>2</p><p>3</p><h1><p>4</p>	</h1>
</div>/* 拿到1,2,3的p元素 */
div > p{}
3、E+F(相邻选择器) 满足条件的第一个兄弟元素节点
<div>div</div>
<p>1</p>
<p>2</p>
<p>3</p>
/* 拿到div后第一个p元素 */
div + p{}
4、E~F(兄弟选择器) 满足条件的所有兄弟元素结点
<div>div</div>
<p>1</p>
<p>2</p>
<p>3</p>
/* 拿到div后所有p元素 */
div ~ p{}

二、属性选择器

下面几个选择器用到的html

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>
<div class="aa b c">4</div>
<div class="a-test">5</div>
<div class="a b-test">6</div>
<div class="ba-test">7</div>
<div class="aa b c">8</div>
1、 E[att~=“val”]:选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。
/* 所有class属性中被单独隔的元素(第1,3,6个div) */
div[class~="a"]{background-color: red;
}
2、E[att|=“val”] :选择具有att属性,其值是以val开头并用连接符"-"分隔的字符串的E元素;如果值仅为val,也将被选择。
/* 以a-开头,或a单独存在的元素(第1,5个div) */
div[class|="a"]{background-color: red;
}
3、E[att^=“val”] :选择具有att属性且属性值为以val开头的字符串的E元素。
/* 以a开头的元素(第1,3,4,5,6,8个div) */
div[class^="a"]{background-color: red;
}
4、E[att$=“val”]:选择具有att属性且属性值为以val结尾的字符串的E元素。
/* 以test结尾的元素(第5,6,7个div) */
div[class$="test"]{background-color: red;
}
5、E[att*=“val”]:选择具有att属性且属性值为包含val的字符串的E元素。
/* 只要存在该字符都可(第5,6,7个div) */
div[class*="t"]{background-color: red;
}

三、伪元素选择器(两个冒号::)

1、placeholder
<input type="text" placeholder="请输入用户名">/* 改变提示内容的字体颜色(仅能改变字体颜色且仅部分浏览器兼容) */
input::placeholder{color:green}
2、selection
<div>今天天气晴</div>
/* 当选中该标签时,显示以下样式,只能设置背景颜色、阴影、字体颜色 */
<style>div::selection{background-color: yellow;text-shadow:3px 5px green;color: red;}
</style>

四、伪类选择器(一个冒号:)

伪类选择器被选中的元素的一种状态
1、E:not(s):匹配不含有s的E元素

常用于在解决最后一个元素不需要某个特殊样式。如:假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线

<div class="demo">1</div>
<div class="demo">2</div>
<div class="test">3</div>
<div>4</div><style>/* class属性不是demo */div:not([class="demo"]){background-color: red;}/* 没有class属性 */div:not([class]){background-color: red;}/* 除去最后一个的所有元素 */div:not(:last-of-type){background-color: red;}
</style>
2、E:root:匹配E元素在文档的根元素。在HTML中,根元素永远是HTML

在html中 :root和html选择器效果相同

<style>:root{background-color: red;}html{background-color: red;}
</style>
3、E:target:匹配锚点指向的元素,选择器用于选取当前活动的目标元素。

(被标记为锚点的元素 即 location.hash = xxx)

<a href="#demo1">第一个</a>
<a href="#demo2">第二个 </a>
<div id="demo1">1</div>
<div id="demo2">2</div>
/* 效果是点击第一个时第一个div有边框样式 */
<style>div:target{border:1px solid red;}
</style>
综合案例:实现效果,当点red时,背景颜色变成红色,点击yellow时背景颜色变成黄色
<div class="btn"><a href="#red" class="bgred">red</a><a href="#yellow" class="bgyellow">yellow</a><a href="#green" class="bggreen">green</a>
</div>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div><style>/*通常height:100%不起作用,但在html根节点时加上height:100%,相当于获取屏幕的高度,并赋值,必须要加上body,给body的高度也赋值后,body中的元素也可以用height:100%获取屏幕高度*/:root,body{margin: 0;padding: 0;height: 100%;}#red,#yellow,#green{height: 100%;width: 100%;}#red{background-color: red;}#yellow{background-color: yellow;}#green{background-color: green;}div.btn{position: absolute;width: 600px;top: 300px;}div.btn a{color: #fff;background-color: #fcc;font-size: 30px;margin: 0 10px;padding: 5px;border-radius:5px;}/* 选择div中有id属性的,且没有被选中的div的display属性设置为none */div[id]:not(:target){display: none;}
</style>
3、E:first-child:父元素的第一个子元素
E:last-child:父元素的最后一个子元素
E:only-child:父元素仅有的一个子元素
<p>0</p>
<div><p>1</p><p>2</p><p>3</p>
</div>
<div><p>4</p>
</div>
<p>5</p><style>
/*first-child只要是标签的第一个即可 0,1,4的p标签都会被选出*/p:first-child{backlastground-color: red;}
/*last-child只要是标签的最后一个即可 3,4,5的p标签都会被选出*/p:last-child{background-color: red;}
/*only-child 4的p标签都会被选出*/p:only-child{background-color: red;}
</style>
E:nth-child(n):匹配父元素的第n个子元素
E:nth-last-child(n):匹配父元素的倒数第n个子元素

备注: n从0开始 css从1开始,以上5个不常用,因为要考虑其他元素对自己的干扰

<div><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p>
</div><style>/* 相当于p:nth-child(odd) 将奇数个选出来*/p:nth-child(2n+1){ backlastground-color: red;}/* 相当于p:nth-child(even) 将偶数个选出来*/p:nth-child(2n){ backlastground-color: red;}
</style>
4、E:first-of-type:父元素下第一个类型为E的子元素
E:last-of-type:父元素下的所有E子元素中的倒数第一个。
E:only-of-type:父元素的所有子元素中唯一的那个子元素E。
E:nth-of-type(n):父元素的第n个子元素E。
E:nth-of-last-type(n):父元素的倒数第n个子元素E。

解释:与上面5个类似

5、E:empty:匹配没有任何子元素(包括text节点)的元素E。(除注释无任何内容,包括空格)
6、E:checked:被选中的元素
<label>
请点击我<input type="checkbox">
<span></span>
</label><style>input:checked + span{background-color: green;}input:checked + span::after{content: "wawo...";color: #fff;}
</style>
7、E:enabled,E:disabled 是否是禁用状态的元素
<input type="text">
<input type="text" disabled="disabled"><style>input:enabled{border: 1px solid green;}input:disabled{border: 1px solid #f20;background-color: #fcc;}
</style>
8、E:read-only 只读状态下的元素
<input type="text" value="不能被修改哦" readonly="readonly"><style>input:read-only{border: 1px solid #f20;background-color: #fcc;}
</style>

属性

一、边框和背景

1、border

border中用的的html

<div></div>

border中div的基础样式

<style>div{width: 100px;height: 100px;border: 1px solid black;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);}
</style>

解释:calc()动态计算长度值,calc运算符前后都需要保留一个空格

(1)border-radius

a、1个值的写法

<style>div{/*1个值 四个边*/border-radius: 10px;}
</style>

b、2个值的写法

<style>div{/*2个值 上下 左右 --》左上角右下角  右上角左下角*/border-radius: 10px 40px;}
</style>

c、3个值的写法

<style>div{/*3个值 中间值代表两个 左上角 右上角左下角 右下角*/border-radius: 10px 25px 40px;}
</style>

d、4个值的写法

<style>div{/*4个值 分别为左上,右上,左下,右下*/border-radius: 10px 20px 30px 40px;}
</style>

e、复杂写法,一定先写上下,后写左右 即先top/bottom-left/right

<style>div{border-top-left-radius:10px;border-top-right-radius:20px;border-bottom-left-radius:30px;border-bottom-right-radius:40px;}
</style>

f、终极复杂版 第一个是水平方向 第二个是垂直方向

<style>div{border-top-left-radius:10px 20px;border-top-right-radius:20px 30px;border-bottom-left-radius:30px 40px;border-bottom-right-radius:40px 50px;}
</style>

g、还有一种写法 /前代表水平方向的/后代表垂直方向上的四个角

<style>div{border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;}
</style>
border-radius 案例 :

1、正圆

<style>div{border-radius: 50%;/*或计算为长宽的一半像素值*/border-radius: 50px;}
</style>

2、四分之一圆 扇形

<style>div{border-top-left-radius:100px 100px;   }
</style>

3、半圆

<style>div{width: 200px;height: 100px;border: 1px solid black;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);border-top-left-radius:100px 100px;border-top-right-radius:100px 100px;}
</style>

4、树叶型(导航栏)

<style>div{width: 200px;height: 100px;border: 1px solid black;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);border-top-left-radius:100px 100px;border-bottom-right-radius:100px 100px;}
</style>
(2)border-image

a、border-image-source:定义元素边框背景图像,可以是图片路径或使用渐变创建的“背景图像”。

<style>div{border-image-source:linear-gradient(red,blue);/* ------- */border-image-source:url(red.png);}
</style>

b、border-image-width:定义元素边框背景图像厚度。

<style>div{/* 设置图片的宽度是20px, */border-image-width: 20px; }
</style>

c、border-image-slice:定义元素边框背景图像从什么位置开始分割。

分割线的大小,填数字 或者百分比都可,不要填100% ,上右下左四条分割线,分成9块。除中间区域外,放在border的四个边上
CSS3新增样式:Flex弹性盒子,旋转、变换和过渡-编程知识网

<style>div{border-image-slice: 100;}
</style>

d、 border-image-repeat:定义元素边框背景图像的平铺方式。

默认是stretch 拉伸填充效果,repeat是平铺填充,round是不能整数平铺时拉伸图片,space时不能整数平铺时以空白间隙在图片之间

<style>div{border-image-repeat: stretch;}
</style>

e、可以缩写为

<style>div{border-image:source slice repeat;}
</style>

2、background

background中用到的html

<div></div>

background中用到的基础css

<style>div{width: 200px;height: 200px;position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);background-image: url(1.jpg);background-size: cover;background-repeat: no-repeat;
}
</style>

(1)background-image:可以放渐变颜色或背景图片地址

<style>div{/* 可以放渐变颜色 */background-image: linear-gradient(#0f0,#f00);/* 可以放多个背景 */background-image: url(01.jpg) ,url(02.jpg);
}
</style>

(2)background-origin:这个属性决定了图片从哪里开始定位(background-position),默认是padding开始 显示背景图片

border-origin:border-box|padding-box|content-box

<style>div{padding: 20px;border: 20px solid transparent;background-origin: border-box;background-position: 20px 20px;}
</style>

(3)background-clip:这个属性决定了背景图片从哪开始截断,与background-origin相对应,默认是padding-box截断,即padding以外的区域不显示背景图片

background-origin: border-box | padding-box | content-box | text(text属性下面介绍)

<style>div{padding: 20px;border: 20px solid transparent;background-image: url(3.jpg);background-origin: border-box;background-clip: padding-box;background-repeat: no-repeat;background-position: 20px 20px;}
</style>

(4)background-clip:text 需要与text-fill-color配合

一旦设置文字就变成了背景,再设置text-shadow,阴影会在背景上

<div>我很帅</div>
<style>div:hover{background-position: center center;}div{width: 400px;height: 100px;position: absolute;left: calc(50% - 200px);top: 100px;font-size: 80px;font-weight: bold;background-image: url(4.jpg);/*仅部分浏览器兼容*/-webkit-background-clip: text;background-clip: text;text-fill-color:transparent;-webkit-text-fill-color:transparent;transition: all .6s;}
</style>

(5)background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: fixed | scroll | local 默认值scroll

<style>div {overflow: scroll;/*默认值scroll 根据容器定位local:相对于内容区进行定位fixed:相对于真正的可视区(视口进行定位)*/background-attachment: local;}
</style>

(6)background-size

cover:用一张图片填充满整个容器,图片在不改变比例下拉伸,有超出图片风险
contain:让容器包含一张完整的图片,有留余的风险

<style>div {background-size: contain;}
</style>

3、box-shadow

(1)6个参数
/* 
默认外阴影 
水平偏移量,
垂直偏移量,
模糊半径(基于边框原来的位置,同时向两边模糊),
外延值(在四个方向同时增加|减少阴影大小,可省略)  
颜色
*/
<style>div {box-shadow:5px 5px 3px 0px #fcc;/* 内阴影 */box-shadow: inset 5px 5px 3px 0px #fcc;}
</style>
(2)叠加使用,增强效果
body{background-color: black;
}
div{width: 100px;height: 100px;background-color: transparent;border: 2px solid white;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);box-shadow:inset 0px 0px 10px #fff,3px 0px 10px #f0f,0px -3px 10px #0ff,-3px 0px 10px #00f,0px 3px 10px #ff0;
}
</style>
一个炫酷的效果阴影效果
<style>
body{background-color: #000;
}
div{width: 300px;height: 300px;position: absolute;left: calc(50% - 150px);top: calc(50% - 150px);border-radius: 50%;box-shadow:inset 0px 0px 50px #fff,inset 10px 0px 80px #f0f,inset -10px 0px 80px #0ff,inset 10px 0px 100px #f0f,inset -10px 0px 100px #0ff,0px 0px 50px #fff,-10px 0px 80px #f0f,10px 0px 80px #0ff;
} 
</style>

二、生成图像

1、linear-gradient:线性渐变创建图像

渐变方向可以是一个角度,0deg是渐变从下到上,180deg是渐变从上到下

<style>div {width: 200px;height: 200px;background-image: linear-gradient(180deg,#0f0,#ff0);}
</style>

渐变方向可以是关键字,to left是设置渐变为从右到左,可以写一个关键字也可两个,to top right 从左下到右上

<style>div {width: 200px;height: 200px;background-image: linear-gradient(to top right,#0f0,#ff0);}
</style>

渐变色后面可以跟像素值或百分比,表示从哪到哪之间是渐变内容

<style>div {width: 200px;height: 200px;/* 从60px到80px之间是过度颜色 */background-image: linear-gradient(to right,#0f0 60px,#ff0 80px);}
</style>

2、radial-gradient

(1)确定圆的类型:椭圆还是圆形

​ circle:指定圆形的径向渐变

​ ellipse:指定椭圆形的径向渐变。

(2)确定圆|椭圆的圆心:两个参数,第一个是横坐标,第二个是纵坐标,可以是像素,百分比或者关键字(center)默认值是50%即center

<style>div {width: 200px;height: 100px;/*  ellipse at 椭圆圆心circle  at 圆的圆心*/background-image: radial-gradient(ellipse at 100px 0px,#0f0 20%,#ff0 100px,#00f 150px);}
</style>

(3)指定径向渐变的半径长度:选填四个关键字

​ closest-side:从圆心到离圆心最近的边

​ closest-corner:从圆心到离圆心最近的角

​ farthest-side:从圆心到离圆心最远的边

​ farthest-corner:从圆心到离圆心最远的角

<style>div {width: 200px;height: 100px;/* farthest-corner 最远的角farthest-side   最远的边closest-corner  最近的角closest-side    最近的边*/background-image: radial-gradient(ellipse closest-corner at 50px 50px,#0f0,#ff0,#00f);}
</style>

三、文本及文本装饰

1、text-shadow

(1)4个参数
/* 
text-shadow: x,y,blur,color; 
水平偏移量
垂直偏移量
模糊半径(基于边框原来的位置,同时向两边模糊)
颜色
*/<div>TEXT SHADOW</div>
<style>div {width: 500px;height: 100px;font-size: 50px;text-shadow: 3px 3px 3px #000;}
</style>
浮雕和镂刻效果
<style>div {width: 500px;height: 100px;font-size: 50px;color: #ddd;/* 浮雕效果*/text-shadow: 1px 1px #000,-1px -1px #fff;/* 镂刻效果*/text-shadow: -1px -1px #000,1px 1px #fff;}
</style>

2、text-stroke 描边属性

<style>div {width: 500px;height: 100px;font-size: 100px;color: #000;font-family: simsun;font-weight: bold;-webkit-text-stroke: 1px red;}
</style>

3、white-space

white-space:normal | pre | nowrap | pre-wrap | pre-line

4、word-break

word-break:normal | keep-all | break-all | break-word

5、text-align

text-align:start | end | left | right | center | justify | match-parent | justify-all

justify:内容两端对齐,但对于强制打断的行(被打断的这一行)及最后一行(包括仅有一行文本的情况,因为它既是第一行也是最后一行)不做处理。
start:内容对齐开始边界。
end:内容对齐结束边界。
match-parent:这个值和inherit表现一致,只是该值继承的start或end关键字是针对父母的direction值并计算的,计算值可以是 left 和 right 。
justify-all:效果等同于justify,不同的是最后一行也会两端对齐。

6、@font-face 引入字体包

设置嵌入HTML文档的字体。
@font-face {font-family: fontName;src: url(引入地址);
}
@font-face {font-family: 'diyfont';src: url('diyfont.eot'); /* IE9+ */src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('diyfont.woff') format('woff'), /* chrome、firefox */url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

四、多列 column

通常用作报纸布局

<style>div {/* 分成多少列 */column-count:4;/* 每列之间的间隙 */column-gap: 10px;/* 每列之间的分割线 */column-rule: 1px solid #000;/* 贯穿 */column-span: all;}
</style>

五、box盒模型

box-sizing:content-box(默认)

(1)w3c标准盒模型

​ width= contentWidth

​ 相当于:box-sizing:content-box

(2)IE6混杂盒模型

​ width = contentWidth + border * 2 + padding * 2

​ 相当于:box-sizing:border-box

(3)resize:改变dom元素的大小

​ resize : both|horizontal|vertical

​ 前提:必须设置overflow

六、flex弹性盒子

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
flex:flex-grow flex-shrink flex-basis
flex:1 1 0%   === flex:1
felx:1 1 auto === flex:auto
flex:0 0 auto === flex:none

1、设置display:flex上的元素可以拥有的属性

所用到的的html

<div class="wraper"><div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div><div class="content">6</div><div class="content">7</div><div class="content">8</div>
</div>

所用到的基础css

<style>.wraper{width: 600px;height: 300px;border: 1px solid black;display: flex;}.content{width: 100px;height: 100px;border: 1px solid red;box-sizing: border-box;}.content:nth-of-type(2){/* 设置baseline效果时使用 */margin-top: 20px;}
</style>
(1)flex-direction:设置主轴的方向。默认为row(自左向右)
/* 
row-reverse:对齐方式与row相反。
column:自下向上
column-reverse:对齐方式与column相反。
*/
flex-direction: row;
(2)flex-wrap:设置是否换行。默认为nowrap(不换行)
/* 
wrap:换行
wrap-reverse:从反过来换行,把底当成开始 
*/
flex-wrap: wrap;
(3)justify-content:设置主轴上的对齐方式。默认为flex-start(将向行起始位置对齐)
/* 
flex-end:从结束位置对齐
center:剧中对齐
space-between:向两边剧中对齐,两边无空隙,中间空隙相同
space-around:向中间剧中对齐,两边的空隙相同,大小是中间空隙的一半
*/
justify-content: flex-start;
(4)align-items:设置交叉轴上的单行元素的对齐方式。默认是stretch(相当于auto,大小为width和height高度)
 /* 对于多行元素无作用
stretch:在未设置高度时,默认撑开父级元素的高度,设置高度时失效
flex-start:交叉轴开始对齐
flex-end:交叉轴结束对齐
center:交叉轴居中对齐
baseline:基于文字底线开始对齐
*/
align-items: center;
(5)align-content:设置交叉轴上的多行元素的对齐方式。默认值是stretch
/* 对单行无作用
同justify-content
stretch:剩余空间被所有行平分,以扩大它们的侧轴尺寸。
flex-start:从交叉轴开始位置对齐
flex-end:从交叉轴结束位置对齐
center:居中对齐
space-between:向两边(上下边)剧中对齐,两边无空隙,中间空隙相同
*/
align-content: flex-start;

2、子元素上拥有的属性

所用到的html

<div class="wraper"><div class="content">1</div><div class="content">2</div><div class="content">3</div>
</div>

所用到的基础css

<style>.wraper{width: 600px;height: 300px;border: 1px solid black;display: flex;flex-direction: row;}.content{width: 100px;height: 100px;border: 1px solid red;box-sizing: border-box;}
</style>
(1)order:设置子元素出現的顺序。默认为0,数值越小,优先级越低
.content:first-of-type{order: 1;
}
.content:last-of-type{order: -1;
}
(2)align-self:设置子元素单独在交叉轴上的对齐方式。默认是auto
/*
与align-items相比,优先级比align-items高
与align-content相比,优先级比align-content低auto:计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
flex-start:交叉轴起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:交叉轴起始位置的边界紧靠住该行的侧轴结束边界
stretch:如果设置了高度,则按照heigh,如果未设置,则拉伸为盒子高度
baseline:该值将参与基线对齐
center:剧中对齐
*/
.content:first-of-type{align-self: flex-start;
}
(3)flex-basis:设置弹性盒伸缩基准值。可以简单理解为覆盖width,设置以后,width失效
/* 
flex-basis 和 width:
当设置flex-basis后,如果内容区中的内容超出flex-basis所设置的宽度时,不会截断,会撑大宽度。而width不会没设置width的前提下,设置的flex-basis的值是元素的最小值
在设置width的前提下,设置的flex-basis的值是元素的最小值,也是默认值,width的值是元素宽度的最大值
(flex-basis < 元素的宽度 < width)
如果flex-basis大于width 则flex-basis的值是最大值宽度
*/
flex-basis: 200px;
(4)flex-grow:设置弹性盒的扩展比率。默认值是0。不扩展

​ 当一行还有剩余空间的时候,就会安装flex-grow设置的比例进行分配剩余的空间,调整大小

/* 
剩余的空间,分为6份,第一个content占1份,第二个2份,第三个3份
*/
.content:nth-of-type(1){flex-grow: 1;
}
.content:nth-of-type(1){flex-grow: 2;
}
.content:nth-of-type(1){flex-grow: 3;
}
(5)flex-shrink:设置弹性盒的收缩比率。默认值是1。

计算公式:1、计算加权值:每个元素 真实内容区的大小(去掉border)* shrink 值之和

​ 2、计算压缩值:(真实内容区大小 * shrink值 )/ 加权值 * 多出来的像素

备注:要注意有border和无border的区别,计算的为去掉border的宽度

/* 
计算方式 
1、计算加权值 真实内容区的大小 * shrink值
200px*1 + 200px*1 + 400px*3 =1600px
2、
第一个盒子压缩值:
200px * 1 
——————————  * 200px(多余的像素) = 25px  
1600px第二个盒子压缩值:
200px * 1 
——————————  * 200px(多余的像素) = 25px  
1600px第三个盒子压缩值:
400px * 3 
——————————  * 200px(多余的像素) = 150px  
1600px
*/
<style>.content{width: 200px;height: 100px;flex-shrink: 1;}.content:nth-of-type(3){width: 400px;flex-shrink: 3;}
</style>

案例1:flex弹性盒子 剧中效果

<div class="wraper"><div class="content"></div>
</div>
<style>.wraper{width: 300px;height: 300px;border: 1px solid black;display: flex;justify-content: center;align-items: center;}.content{width: 100px;height: 100px;box-sizing: border-box;border: 1px solid red;}
</style>

案例2:可动态增加导航栏

<div class="wraper"><div class="items">天猫</div><div class="items">淘宝</div><div class="items">聚划算</div><div class="items">聚划算</div>
</div><style>.wraper{width: 300px;height: 300px;border: 1px solid black;display: flex;justify-content: center;align-items: center;}.items{height: 30px;box-sizing: border-box;border: 1px solid red;flex: 1 1 auto;text-align: center;line-height: 30px;}
</style>

案例三:中间固定,两边自适应 其中一个固定,另外两个不固定等

<div class="wraper"><div class="content"></div><div class="content"></div><div class="content"></div>
</div><style>.wraper{width: 400px;height: 200px;border: 1px solid black;display: flex;resize: both;overflow: hidden;}.content{flex: 1 1 auto;height: 100px;box-sizing: border-box;border: 1px solid red;}.content:nth-of-type(2){flex: 0 0 200px;}
</style>

案例四:圣杯布局

<div class="wraper"><div class="header">header</div><div class="contain"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div><div class="footer">footer</div>
</div><style>.wraper{width: 400px;height: 400px;border: 1px solid black;display: flex;flex-direction: column;overflow: hidden;resize: both;}.header,.footer,.right,.left{flex: 0 0 20%;border: 1px solid green;box-sizing: border-box;}.contain{flex: 1 1 auto;display: flex;}.center{flex: 1 1 auto;}
</style>

七、过度、动画和变换

1、transition过渡

用到的html

<div></div>

用到的基础css

<style>div{width: 100px;height: 100px;background-color: red;}div:hover{width: 200px;height: 200px;}
</style>
(1)transition-property:设置对象中的参与过渡的属性
div{
/* 监听什么属性 width,height,color */transition-property: all;
}
(2)transition-duration:设置对象过渡的持续时间
div{
/* 过度动画多长时间执行完 */transition-duration: 0.2s;
}
(3)transition-timing-function:设置对象中过渡的动画类型
linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:等同于 steps(1, start)
step-end:等同于 steps(1, end)
steps(number,start|end):第一个参数执行多少步,第二个参数是保留开始样式还是结束样式。具体用法在下面介绍
cubic-bezier(number,number,number,number):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内div{/* 运动状态 默认ease 平滑过度,先快 匀速 再慢 可填写贝塞尔曲线cubic-bezier */transition-timing-function: linear;
}
(4)transition-delay:设置对象延迟过渡的时间
div{
/* 延迟多少时间执行 */transition-delay: 1s;
}
(5)综合写法
div{
/* 监听width 执行2s 匀速 延迟1s  */transition: width 2s linear 5s;
}

2、animation动画

用到的html

<div></div>

用到的基础css

div{width: 100px;height: 100px;position: absolute;background-color: red;
}	
(1)@keyframes:指定动画名称和动画效果
<style>@keyframes run{0%{left: 0;top: 0;}50%{left: 100px;top: 100px;}100%{left: 0;top: 0;}}@keyframes color-change{from{background-color: green;}50%{background-color: yellow;}to{background-color: red;}}
</style>
(2)animation-name:设置对象所应用的动画名称
div{
/* 设置对象所应用的动画名称 */animation-name: run;
}
(3)animation-duration:设置对象动画的持续时间。默认0s
div{
/* 设置对象动画的持续时间 默认0s */animation-duration: 1s;
}
(4)animation-timing-function:设置对象动画的过渡类型 与transition的属性相同。默认是ease

其中的step属性的含义

/* 
animation-timing-function属性
steps(Integer,start||end)Integer:整数,函数执行的步数,从当前帧到下一帧 执行多少步start:保留下一帧帧状态,直到这段动画时间结束end:保留当前帧状态,直到这段动画时间结束 常用,一般与forwards(保留最后一帧的状态)连用step-end == steps(1,end)step-start == steps(1,start)*/
div{
/* 设置对象动画的过渡类型,可以是贝塞尔曲线 默认是ease */animation-timing-function: ease;
}
(5)animation-delay:设置对象动画的延迟时间。默认0s
div{
/* 设置对象动画的延迟时间 默认0s */animation-delay: 1s;
}
(6)animation-iteration-count:设置对象动画的循环次数。默认是1
div{
/* 
设置对象动画的循环次数,默认是1
infinite 无限循环
*/animation-iteration-count: infinite;
}
(7)animation-direction:设置对象动画在循环中运动状态。默认normal
div{
/* 
animation-direction:设置对象动画在循环中运动状态 
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行。钟摆效果
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
*/animation-direction: alternate;
}
(7)animation-play-state:设置对象动画的状态。默认是running
div{/* 设置对象动画的状态 开始或停止 默认是running */animation-play-state: paused;
}
(8)animation-fill-mode:设置对象动画时间之外的状态
div{
/* 设置对象动画时间之外的状态 
none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时(最后一帧)的状态
backwards:设置对象状态为动画开始时(第一帧)的状态
both:设置对象状态为动画结束或开始的状态
*/animation-fill-mode: forwards;
}
(9)综合写法。可以按照以上顺序写在animation中
div{/* 写多个,并行作用执行run动画,在两秒内完成,以线性过渡,在结束第一个时从第一个结束的状态翻过来执行。无线循环延迟2s后,执行color-change动画,在2s内完成,动画结束时保留第一帧的状态*/animation: run 2s linear infinte alternate,color-change 2s 2s fowards;
}	

案例1:超级简易时钟效果

<div class="clock"><div class="min"></div>
</div>
<style>div.clock{width: 200px;height: 200px;border-radius: 50%;border: 1px solid black;position: relative;}div.min{position: absolute;width: 100px;border-top: 1px solid red;top: 100px;animation: radius-run 60s steps(60,end) infinite;transform-origin: 100% center;}@keyframes radius-run{0%{transform: rotate(90deg);}100%{transform: rotate(450deg);}}
</style>

案例2:跑马效果


<div class="horse"></div>
<style>div.horse{width: 200px;height: 100px;background-image: url(./horse.png);background-repeat: no-repeat;background-position: 0 0;animation: run 1s steps(12,end) infinite;}	@keyframes run{0%{background-position: 0 0;}100%{background-position: -2400px 0;}}
</style>

3、transform变换

(1)旋转

rotate:指定对象的2D rotation(2D旋转)

div{
/* rotate(0deg) 旋转 */transform: rotate(0deg);
}

rotateX,rotateY,rotateZ:指定对象在x,y,z轴上的旋转角度

<style>body{/* 设置景深 */perspective: 800px;/* 设置子元素定位在三维空间内 */transform-style: preserve-3d;}div{width: 100px;height: 200px;background-color: red;position: absolute;left: 200px;top: 300px;/* 元素旋转之后,元素的参照轴也跟着旋转,因此要考虑旋转顺序  */transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform-origin: 0 0;}
</style>

rotate3d:指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度

div{
/* 
rotate3d(x,y,z,angle) 
前三个值表示的是旋转方向x,y,z,第四个值表示的是旋转角度
*/transform: rotate3d(1,1,1,0deg);
}
(2)缩放

scale:指定对象的2D scale(2D缩放)两个参数,第一个是x轴,第二个是y轴。

/*大于1扩张,小于1收缩 scale:伸缩的是元素所在的变化坐标轴的刻度,并不是元素的大小
*/
div{transform: scale(2,1)
}
/*写多个值,是叠加操作,而不是覆盖。
*/
div{transform: scale(2,1) translatex(100px) scale(0.5,1);
}
/*伸缩的轴会根据旋转轴变换而变换伸缩的影响会一直保留下来
*/
div{transform: scale(2,1),rotate(0deg);
}skewy():指定对象Y轴的(垂直方向)扭曲

scalex,scaley,scalez:指定对象的x,y,z轴缩放

scale3d:指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略

(3)扭曲

skew:指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

skewx,skewy:指定对象X,Y轴的扭曲

<style>body{perspective: 800px;transform-style: preserve-3d;}div{width: 200px;height: 200px;background-color: red;position: absolute;left: 100px;top: 200px;/* 扭曲填2个角度 默认0deg。扭曲的是坐标轴,但不仅是扭曲,坐标轴的刻度也会被拉伸*/transform: skew(45deg,0deg);}
</style>

skew案例

<style>body{perspective: 800px;transform-style: preserve-3d;}@keyframes skewrun{0%{transform: skew(0deg,0deg);}50%{transform: skew(45deg,45deg);}100%{transform: skew(-45deg,-45deg);}}div{width: 200px;height: 200px;background-image: url(1.jpg);position: absolute;left: 100px;top: 200px;animation: skewrun 2s linear infinite alternate;}
</style>
(3)平移

translate:指定对象的2D translation(2D平移)第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

translateX,translateY,translateZ:指定对象X,Y,Z轴的平移

translate3d:指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略

div{
/*
translate参照的是自身,
在某些不知道自己的宽度需要平移的情况下可以用translate(50%) 即向x轴平移自己宽度50%的距离
*/
transform: translate(100px);
transform: translateX(100px) translateY(100px) translateY(100px);
transform: translate3d(100px,100px,0);
}
(4)perspective景深和perspective-origin景深的位置
<style>body{/* 景深:>0指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果translatez越大,该元素看起来就会越大我们看到的都是元素在屏幕上的投影*/perspective: 800px;/* 景深的位置 */perspective-origin: center center;transform-style: preserve-3d;}div{width: 200px;height: 200px;background-color: red;position: absolute;left: 100px;top: 100px;transform:translatez(100px);}
</style>

案例

<body><div class="content1"></div><div class="content2"></div><div class="content3"></div><div class="content4"></div><div class="content5"></div><script>document.body.onmousemove = function(e){this.style.perspectiveOrigin = e.pageX+ "px " +e.pageY + "px"}</script>
</body><style>html,:root{height: 100%;margin: 0;padding: 0;}body{perspective: 800px;height: 100%;}div{width: 200px;height: 200px;background-image: url(1.jpg);background-size: cover;position: absolute;top: 200px;transform:rotatey(45deg);}.content1{left: 200px;}.content2{left: 400px;}.content3{left: 600px;}.content4{left: 800px;}.content5{left: 1000px;}
</style>
(5)transform-style:指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化。

transform-style:flat | preserve-3d

注意:preserve-3d 必须写在该元素上,无法继承父元素的该属性

<div class="wrapper"><div class="demo"></div>
</div>
<style>html,:root{height: 100%;margin: 0;padding: 0;}body{perspective: 800px;perspective-origin: 300px 100px;height: 100%;}.wrapper{width: 200px;height: 200px;position: absolute;left: 200px;top: 200px;background-color: red;transform: rotateY(0deg);/* 显示不出来是因为浏览器渲染能力不够,需要设置元素在三维空间中 */transform-style: preserve-3d;}.demo{width: 200px;height: 200px;background-image: url(./4.jpg);background-size: cover;transform:translatez(100px);}
</style>
(6)transform-origin:设置对象以某个原点进行转换。
/* 变换中心 给谁设置,就是谁参照这个 默认值是center center,可以是百分比,具体像素值
*/
<div class="wrapper"></div>
<style>	*{margin: 0;padding: 0;}body{perspective: 800px;perspective-origin: 300px 100px;transform-style: preserve-3d;}.wrapper{width: 200px;height: 200px;position: absolute;left: 200px;top: 200px;background-image: url(./4.jpg);background-size: cover;transform: rotateY(0deg);/* 3个值变换的空间中心 */transform-origin: 100px 100px 100px;}
</style>
(7)backface-visibility:元素背面是否可见

backface-visibility:visible | hidden

案例1:3d旋转照片墙

<body><div class="wrapper"><img src="./1.jpg" ><img src="./2.jpg" ><img src="./3.jpg" ><img src="./4.jpg" ><img src="./5.jpg" ><img src="./6.jpg" ><img src="./7.jpg" ><img src="./8.jpg" ></div><script>document.body.onmousemove = function(e){this.style.perspectiveOrigin = e.pageX + "px " + e.pageY +"px"}</script>
</body><style>*{margin: 0;padding: 0;}html{height: 100%;}body{perspective: 2000px;transform-style: preserve-3d;height: 100%;}.wrapper{width: 300px;height: 300px;position: absolute;left: calc(50%);top: calc(50%);transform: translatex(-50%) translateY(-50%);transform-style: preserve-3d;animation: round 10s linear infinite;}@keyframes round{0%{transform: translatex(-50%) translateY(-50%) rotateY(0deg);}100%{transform: translatex(-50%) translateY(-50%) rotateY(360deg);}}img{width: 300px;position: absolute;}img:nth-of-type(1){transform: rotateY(45deg) translateZ(500px);}img:nth-of-type(2){transform: rotateY(90deg) translateZ(500px);}img:nth-of-type(3){transform: rotateY(135deg) translateZ(500px);}img:nth-of-type(4){transform: rotateY(180deg) translateZ(500px);}img:nth-of-type(5){transform: rotateY(225deg) translateZ(500px);}img:nth-of-type(6){transform: rotateY(270deg) translateZ(500px);}img:nth-of-type(7){transform: rotateY(315deg) translateZ(500px);}img:nth-of-type(8){transform: rotateY(360deg) translateZ(500px);}
</style>

案例2:3d 魔方

<body><div class="box"><div class="content"></div><div class="content"></div><div class="content"></div><div class="content"></div><div class="content"></div><div class="content"></div></div><script>document.body.onmousemove = function(e){this.style.perspectiveOrigin = e.pageX + "px " + e.pageY +"px"}</script>
</body><style>*{margin: 0;padding: 0;}html{height: 100%;}body{perspective: 2000px;transform-style: preserve-3d;perspective-origin: 800px 700px;height: 100%;}.box{width: 300px;height: 300px;position: absolute;left: calc(50%);top: calc(50%);transform: translatex(-50%) translateY(-50%);transform-style: preserve-3d;animation: round 10s linear infinite;}@keyframes round{0%{transform: translatex(-50%) translateY(-50%) rotateY(0deg);}100%{transform: translatex(-50%) translateY(-50%) rotateY(360deg);}}.content{width: 300px;height: 300px;position: absolute;}.content:nth-of-type(1){transform:translateZ(150px);background-color: red;}.content:nth-of-type(2){transform:translateZ(-150px);background-color: green;}.content:nth-of-type(3){transform: rotateY(90deg) translateZ(150px);background-color: yellow;}.content:nth-of-type(4){transform: rotateY(-90deg) translateZ(150px);background-color: salmon;}.content:nth-of-type(5){transform: rotatex(90deg) translateZ(150px);background-color: blue;}.content:nth-of-type(6){transform: rotatex(-90deg) translateZ(150px);background-color: orange;}
</style>
(8)matrix矩阵

矩阵就是transform给我们选中的计算规则

/* 
| 1 0 e |       | x |         | x + e |  
| 0 1 f |   *   | y |    =    | y + f |
| 0 0 1 |       | 1 |         | 1     |
matrix(1,0,0,1,e,f) ===  translate(x,y)| a 0 0 |       | x |         | ax |  
| 0 b 0 |   *   | y |    =    | dy |
| 0 0 1 |       | 1 |         | 1  |
matrix(a,0,0,d,0,0) ===  scale(x,y)*/矩阵都是反向计算出来的

案例 倒影

<body><img src="./4.jpg" alt=""><img src="./4.jpg" alt="">
</body>
<style>
/* 
| 1 0 0 |        | x |         |  x |  
| 0 -1 0 |   *   | y |    =    | -y |
| 0 0 1  |       | 1 |         | 1  |*/img{width: 300px;height: 225px;position: absolute;}img:nth-of-type(1){top: 0px;}img:nth-of-type(2){top: 225px;width: 300px;transform: matrix(1,0,0,-1,0,0);}
</style>

八、CSS的性能优化

1、html渲染过程:构建DOM树,构建CSSOM树,根据DOM树和CSSOM树构建render树,有了render树就开始布局Layout、最后绘制paint。

CSS3新增样式:Flex弹性盒子,旋转、变换和过渡-编程知识网

HTML整个解析过程看起来很简单,但是我们要知道解析过程中css、js和dom的加载顺序。我们都知道HTML是自上往下解析的,在解析过程中:1、如果遇到link和style,那就就会去下载这些外部的css资源,但是css跟DOM的构建是并行的,就是说不会阻塞DOM树的构建。
2、如果遇到script,那么页面就会把控制权交给JavaScript,直到脚本加载完毕或者是执行完毕。
3、页面的渲染是依靠render树,也就是说如果css没有加载完成,页面也不会渲染显示。
4、JavaScript执行过程中有可能需要改变样式,所以css加载也会阻塞JavaScript的加载。
5、JavaScript执行过程中如果操作DOM,但是DOM树又是在JavaScript之后才能构建,就会报错,找不到节点。这就是HTML的渲染过程,因为DOM和css并行构建,我们会把css用外部引入,可以更快的构建DOM,因为JavaScript会阻塞DOM和css构建,且操作DOM一定要在DOM构建完成,我们选择把script放在最下面。如果我们过多的在render渲染完成后改变render,那么重排和重绘就会一直被动重发执行,这也会造成渲染速度变慢。

2、重构和重绘

reflow(重构):
1、改变窗口大小
2、改变文字大小
3、内容的改变,输入框输入文字
4、激活伪类,:hover
5、操作class属性
6、脚本操作dom
7、计算offsetWidth和offsetHeight
8、设置style属性repaint(重绘):
如果只改变某个元素的背景色、文字颜色、边框颜色,不影响
它周围或内部布局的属性repaint速度快于reflow

3、will-change

/*
浏览器刷新页面的频率1s 60次,平均16.7ms刷新一次
gpu可以在一帧里渲染好页面,那么当你改动页面的元素或者实现动画的时候,将会非常流畅处理gpu加速问题 给transform设一个监听,让浏览器预备一个层,最好在该样式发生变化的前一刻给设置上监听,变化完成后最好删除监听
因为在监听过程中 浏览器会一直预备一个层 来给transform备用如:在点击前,设置will-change或者通过js判断来设置
*/
div{width: 100px;height: 100px;
}
div:hover{will-change: transform;
}
div:active{transform: scale(2,2);
}

4、空间混色法:品字形或者柱状行

CSS3新增样式:Flex弹性盒子,旋转、变换和过渡-编程知识网

1个像素 ==> 三个像点(红绿蓝) ==> 空间混色法

点距:从一个同色的点 到 另一个同色的点的距离

css像素px是逻辑像素 每个设备的物理像素不同,点距约等于像素

dpi:一英寸所能容纳的像点数 1 in = 2.54 cm

ppi:一英寸所能容纳的点距

dpr(设备像素比) = 物理像素/css像素

一般笔记本屏幕 200dpi ≈ 0.1mm  或者 0.15mm 非常好的屏幕参照像素 以96dpi的屏幕 一臂之遥,显示出来的具体大小
标杆 1/96 * 英寸 100dpi      	200dpi 				300dpi
标杆 1/96 * 英寸 
100px * 100px   100px*2 *100px*2    100px*3 * 100px*3

柱状栅格空间混色法示例

<body><div class="wrapper">div.demo*1000</div>
</body>
<style>.wrapper{display: flex;}.demo{width: 1px;height: 100px;}.demo:nth-of-type(2n){background-color: #f00;}.demo:nth-of-type(2n+1){background-color:#0f0;}.box{width: 100px;height: 100px;background-color:#ff0}
</style>

九、响应式网页开发

分辨率:像素点的密集程度

如何在不同的设备上展示的效果相同?

1、meta viewport:适配各种不同分辨率的设备 , 将页面大小 根据分辨率不同进行相应的调节

<!--      1css px != 屏幕分辨率 一般默认视口宽度980pxwidth:视口宽度device:设备的宽度initial-scale:初始化的缩放 --》 windows上ie浏览器 横竖屏的宽度 =  竖屏时候的宽度width=device-width:iphone或者ipad 上横竖屏的宽度 =  竖屏时候的宽度user-scalable=no:不允许用户缩放页面
--><meta name="viewport" content="width=device-width, initial-scale=1.0">

2、响应式网页开发方法

1. 流体网格:可伸缩的网格,大小宽高,都是可伸缩(1)可用flex或者百分比来控制大小(2)floa在布局上面 元素大小不固定可伸缩
2. 弹性图片:图片宽高不固定(可设置min-width: 100%)
3. 媒体查询:让网页在不同的终端上面展示效果相同(用户体验相同让用户用着更爽) 在不同的设备(大小不同 分辨率不同)上面均展示合适的页面
4. 主要断点: 设备宽度的临界点 
大小的区别 ---> 宽度不同   ---> 根据不同宽度展示不同的样式
响应式网页开发主要是在css样式上面进行操作

3、媒体查询

(1)媒体类型
all:适用于所有设备print:用于打印机和打印预览screen:电脑屏幕,平板电脑,智能手机等speech:应用于屏幕阅读器等发声设备
(2)引入方式
<!--外部引入 媒体特性必须加() -->
1.link中引入
<link rel="stylesheet" media="screen and (max-width:375px)" href="index.css">
2.style中引入
<style>@import 'index.css' screen and (max-width:375px);
</style>
3.行间样式
<style>@media screen and (min-width:375px) and (max-width:375px) {body{background-color: yello;}}
</style>

媒体查询不占权重,一般将媒体查询放在最后

(3)运算符

a、and 运算符:合并

b、,运算符:或者

<style>@media screen and (min-width:375px) and (max-width:375px),print and (min-width:375px) {body{background-color: yello;}}
</style>

c、not运算符:非

<style>@media not screen and (min-width:375px) {body{background-color: yello;}}
</style>
(4)单位值
rem:相对于父级元素的字体长度(font-size)
em:相对于当前元素文本的字体长度。默认是浏览器默认字体长度。
px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
vw:相对于视口的宽度。视口被均分为100单位的vw
vh:相对于视口的高度。视口被均分为100单位的vh
vmax: 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
渐进增强:向上兼容 想开发一个专用版本,再兼容最新的设备
优雅降级:向下兼容 先开发通用版本 再兼容老版本