css3高度vh |css怎么写渐变加遮罩

height: 100vh;

在CSS3中，“vh”是指相对于视口高度的百分比，即1vh等于视口高度的1%。

这个特性的应用场景很多，比如在响应式设计中，使用vh来设置一个元素的高度可以确保在不同设备上显示时，该元素的高度始终保持视口高度的百分比。例如：

.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

以上代码将设置一个容器，使其高度等于视口高度，并使其内部元素水平居中和垂直居中。这种用法常常出现在全屏背景图或是全屏幻灯片banner的设计中。

除了单独使用vh来设置高度外，vh也可以与其他单位一起使用。例如：

.container {
height: calc(100vh - 40px);
padding-top: 20px;
padding-bottom: 20px;
}

以上代码将设置一个容器，使其高度等于视口高度减去40像素，并设置上下各20像素的内边距。这种用法经常出现在全局头部或底部，如全屏背景图下的导航条或页脚。

虽然vh单位的应用是非常方便的，但也需要注意一些问题，如在浏览器窗口缩小至一定程度时，页面元素可能会出现滚动条，导致视口高度发生改变，从而影响vh单位的计算结果。

综上所述，CSS3中的vh单位是一个非常有用的特性，能够使网站设计更加灵活，同时也需要注意一些细节。