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);
......