[分享]css中 vh是什么意思

CSS中的vh是什么意思？　　vh是viewport height的缩写，意为视窗高度。在CSS中使用vh值可以很方便地根据视口大小（即浏览器窗口大小）设置一个元素的高度。例如，设置一个元素的高度为5...

CSS中的vh是什么意思？

　　vh是viewport height的缩写，意为视窗高度。在CSS中使用vh值可以很方便地根据视口大小（即浏览器窗口大小）设置一个元素的高度。例如，设置一个元素的高度为50vh，就表示这个元素的高度是当前视口高度的一半。

vh的值是相对于视口高度而言的，而不是相对于文档流中父元素的高度。这意味着，即使父元素没有明确设置高度，使用vh也可以准确地控制子元素的高度。

　　下面是使用vh设置元素高度的代码示例：

　　<div style="height: 100vh;">
　　　　<p style="height: 50vh;">这是一个高度为视口高度一半的段落。</p>
　　　　<p style="height: 25vh;">这是一个高度为视口高度四分之一的段落。</p>
　　</div>

　　在上述代码中，父元素的高度为100vh，因此包含的两个段落元素的高度分别为50vh和25vh，即视口高度的一半和四分之一。

总之，CSS中的vh值可以很方便地根据视口大小自适应元素高度，对于响应式网站的开发尤为实用。