css_解决浏览器显示盒子的实际像素和你设置的像素不一致的问题;

我们在学盒子模型的时候,可能会遇到这样的问题:就是浏览器显示盒子的实际像素和自己设置的像素不一致的问题;

自己设置宽高都是100px显示出来却是126px左右(不应该是102px左右吗),我也很绝望啊;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.main{height:100px; width:100px; margin:0px; padding:0px; border:1px red solid; }
</style>
</head>

<body>
	<div class="main">
		
	</div>
</body>
</html>

这个时候我们的第一感觉就是我们的margin,border,padding没有学好;

我在学习这一块的时候我就遇到了这个问题,当时我很疑惑,为什么呢,我仔细检查了盒子模型发现自己盒子模型理解的应该是没有错的;

这个时候我们就会想到浏览器的缩放问题,然后我发现自己的缩放就是100%,没有问题呀;


然后我在网上找啊找;一无所获,正当我要归结于,截屏软件的像素和浏览器的像素不一致时,我无意间在一篇帖子上看到了DPI的问题,然后我就瞬间想到了W10系统自己的缩放;

然后我在设置---显示中看到了缩放与布局,果然自己的缩放比是125%,这个是系统推荐的,所以我想大家要是用的和我同版W10就会遇到这个问题;

缩放比设置为100%之后你就会奇迹的发现设置和显示是一致的;

我把这篇博文送给那些苦苦寻求真相的人;

猜你喜欢

转载自blog.csdn.net/qq_38053395/article/details/81059134