【前端学习笔记】100%px和100vw的区别

区别在于是否包含滚动条

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            width: 100vw;
            height: 300px;
            background-color: yellow;
        }
        
        .box2 {
            width: 100%;
            height: 300px;
            background-color: red;
        }
    style>
head>

<body>
    <div class="box1">div>
    <div class="box2">div>
    
body>

html>

没有滚动条时

100%px == 100vw
【前端学习笔记】100%px和100vw的区别_第1张图片

有滚动条时

100vw为包含滚动条和窗口的大小
100%px为刨除滚动条,剩余窗口的大小

【前端学习笔记】100%px和100vw的区别_第2张图片
【前端学习笔记】100%px和100vw的区别_第3张图片

【前端学习笔记】100%px和100vw的区别_第4张图片

欢迎关注

掘金:https://juejin.cn/user/4156573190724030
Github:https://github.com/zhubingran
CSDN:https://blog.csdn.net/qq_43118757
QQ:1330022055

你可能感兴趣的:(前端,前端,学习,css3)