为什么当宽度为 100vw 时 x 轴上有一个滚动条?
Why there is a scroll on x-axis when width is 100vw?
我已经编写了该代码,它在 x 轴上显示了一个滚动条。
nav{width:100vw;}
但是当我将值从 vw 切换到 % 时,它才开始正常工作。
那为什么会有vw的卷轴?
因为将宽度设置为 100vw
将为元素提供 100vw
宽度 + 任何导致溢出的填充或边距
100vw element = 100vw width + padding + margin
100% 并非如此;
100% element = 100% width inclusve of margin + padding
主要是body
保证金。所以将 body -> margin
设置为 0
并看到它以 100% 的速度工作。
% 是相对于父元素的。所以100%会取父元素的100%面积。
但是vw是直接相对于viewport的。视口是网页的可见区域。 100vw 占用整个视口宽度。
我已经编写了该代码,它在 x 轴上显示了一个滚动条。
nav{width:100vw;}
但是当我将值从 vw 切换到 % 时,它才开始正常工作。
那为什么会有vw的卷轴?
因为将宽度设置为 100vw
将为元素提供 100vw
宽度 + 任何导致溢出的填充或边距
100vw element = 100vw width + padding + margin
100% 并非如此;
100% element = 100% width inclusve of margin + padding
主要是body
保证金。所以将 body -> margin
设置为 0
并看到它以 100% 的速度工作。
% 是相对于父元素的。所以100%会取父元素的100%面积。
但是vw是直接相对于viewport的。视口是网页的可见区域。 100vw 占用整个视口宽度。