学习css时遇到的坑-测量值和盒子实际值不同

最新推荐文章于 2022-09-12 22:37:10 发布

香水柠檬咖啡

最新推荐文章于 2022-09-12 22:37:10 发布

阅读量2.3k

点赞数 12

分类专栏：遇到的问题文章标签： css

本文链接：https://blog.csdn.net/lanlanrui/article/details/109904217

版权

遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在仿写页面的时候遇到一件奇怪的事情！

那就是网页截图的宽度和盒子实际的宽度不一致

结论

下面进行案件重演
在这里插入图片描述

在这里插入图片描述
如图用snipaste测得高度为303px，接下来根据这个高度写个盒子（宽度我随便写的，不碍事）
–看起来就感觉仿写的高度不一样，不过还是测测吧
和测量值一样高度为 303px，但是！奇怪的事情发生了

用snipaste 测测，发现咋变成380px，我明明是按照测量值设定的高度，为啥现在又不一样了。

面对这个问题，在我有限的知识里我想到了 em单位和 rem单位。。。（为啥会想到这两个单位呢。。就知识有限-。-。）

em单位和rem单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em-rem</title>
    <style>
        .main {
            margin: 100px auto 0px;
            width: 1000px;
            height: 500px;
            background-color: #f6f6f6;
            box-shadow: 2px 2px 5px rgb(131, 131, 131,.3);
        }

        .em {
            font-size: 10px;

            width: 200px;
            height: 200px;
            background-color: pink;
            display:inline-block;
            text-align: center;
            margin-bottom: 10px;
        }
        .em .txt {
            width: 2em;
            height: 2em;
            /* 2em即使两倍父盒子字体大小  即是2em=2*10px=20px */
            background-color: rgb(248, 121, 98);
        }
        /* --------------------------------------------------------------------- */
        html {
            font-size: 20px;
        }
        .rem {
            width: 10rem;
            height: 10rem;
            font-size: .7rem;
            background-color: rgb(160, 250, 199);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="em">
            em的基准是父盒子的字体大小                                            <br>
            现在粉盒子字体大小为10px                                              <br>
            子级（下面橙色的小盒子）大小设置为2em，则她的宽长是2*10px=20px！
            <div class="txt"></div>
        </div>
        <div class="rem">
            rem的基准是相对于html元素的字体大小                                    <br>
            当前html的font-size: 20px;                                           <br>
            这个绿盒子长宽都为 10rem                                              <br>
            即是 10*20=200
        </div>
    </div>
</body>
</html>

运行效果：在这里插入图片描述
结论就是。。和em和rem没有半毛钱关系。。。

最终！

我在无意间发现，可能和电脑里的显示-缩放有关,电脑显示里的缩放与布局调成100%可以啦！就是不缩放。。在这里插入图片描述
然后就可以正常截图测量啦

香水柠檬咖啡

关注

12
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
学习css时遇到的坑-测量值和盒子实际值不同

最近在仿写页面的时候遇到一件奇怪的事情！那就是网页截图的宽度和盒子实际的宽度不一致结论下面进行案件重演如图用snipaste测得高度为303px，接下来根据这个高度写个盒子（宽度我随便写的，不碍事）–看起来就感觉仿写的高度不一样，不过还是测测吧和测量值一样高度为 303px，但是！奇怪的事情发生了用snipaste 测测，发现咋变成380px，我明明是按照测量值设定的高度，为啥现在又不一样了。面对这个问题，在我有限的知识里我想到了 em单位和 rem单位。。。（为啥会想到这两个单位呢
复制链接

扫一扫