| 学习css时遇到的坑 | 您所在的位置：网站首页 › 我设置的是什么 › 学习css时遇到的坑 |
学习css时遇到的坑
|
最近在仿写页面的时候遇到一件奇怪的事情！ 那就是网页截图的宽度和盒子实际的宽度不一致 结论下面进行案件重演
面对这个问题，在我有限的知识里我想到了 em单位 和 rem单位。。。（为啥会想到这两个单位呢。。就知识有限-。-。） em单位和rem单位 em-rem .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); } em的基准是父盒子的字体大小 现在粉盒子字体大小为10px 子级（下面橙色的小盒子）大小设置为2em，则她的宽长是2*10px=20px！ rem的基准是相对于html元素的字体大小 当前html的font-size: 20px; 这个绿盒子长宽都为 10rem 即是 10*20=200运行效果： 我在无意间发现，可能和电脑里的显示-缩放有关,电脑显示里的缩放与布局调成100%可以啦！就是不缩放。。 |
如图用snipaste测得高度为303px，接下来根据这个高度写个盒子（宽度我随便写的，不碍事） –看起来就感觉仿写的高度不一样，不过还是测测吧
和测量值一样高度为 303px，但是！奇怪的事情发生了 
用snipaste 测测，发现咋变成380px，我明明是按照测量值设定的高度，为啥现在又不一样了。
结论就是。。和em和rem没有半毛钱关系。。。
然后就可以正常截图测量啦【本文地址】
公司简介
联系我们