vw的使用

最新推荐文章于 2024-08-03 23:42:00 发布

魔法少女丶蔡徐坤

最新推荐文章于 2024-08-03 23:42:00 发布

阅读量2.3k

点赞数 7

文章标签： html html5 css

本文链接：https://blog.csdn.net/IKUNofFans/article/details/125963636

版权

1.vw

vw就是视口的宽度，vw 是个相对单位。

不管在什么屏幕下，我们把屏幕分为平均的 100等份。

1vw = 1 / 100 屏幕的宽度

1vw 和 1%

width: 1vw;

width: 1%;

vw 和 1% 有没有区别：

vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px
百分比以父盒子为准。假如父盒子是 200px，则 1% 是 2px

        .box {
            width: 50vw;
            height: 53vw;
            background-color: yellow;


            /* 溢出隐藏 */
            overflow: hidden;
            /* 文本溢出换成省略号 */
            text-overflow: ellipsis;
            /* 弹性盒子 */
            display: -webkit-box;
            /* 溢出到第几行 */
            -webkit-line-clamp: ;
            /* 从上到下垂直排列子元素 */
            -webkit-box-orient: vertical;

        }