vw 和 100% 的区别
-
若没有出现滚动条,则二者相等
-
若出现滚动条
-
vw 包含'滚动条'部分,窗口大小
-
100% 不包含'滚动条',占满剩余空间
-
-
demo演示:未添加滚动条效果,一模一样
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100vw;
height: 100px;
background: yellow;
}
.box2 {
width: 100%;
height: 100px;
background: purple;
}
</style>
......
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
css渐变
- 线性渐变:
background:linear-gradient(direction,color-stop1,color-stop2,...)
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
border: 10px solid gray;
background: linear-gradient(red,green); /*从红色向绿色渐变(方向默认从上到下)*/
}
</style>
......
<div class="box"></div>
- 渐变方向的调整
......
.box {
width: 300px;
height: 300px;
border: 10px solid gray;
background: linear-gradient(to top,red,green); /*反向,从下到上渐变*/
}
......
background: linear-gradient(to top right,red,green,purple); /*右上方三颜色渐变*/
- 还支持角度单位(浏览器支持图形角度调整,很方便)
......
background: linear-gradient(90deg,red,green,purple);
......