使用viewport坐标对齐div
我正在学习CSS，我是这个领域的新手。如果我的问题太天真，请原谅。
我有一个简单的HTML，包含一个div。
.square {
background-color: blue;
width: 90vw;
height: 90vh;
margin-left: 5vw;
margin-right: 5vw;
}<!doctype html>
<head>
<link href="viewport-cord.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='square'></div>
</body>
我期望在div的两边有5%的视口宽度。然而，与右侧相比，我们在div的左边似乎有更大的差距。我不知道这些额外的利润是从哪里来的。
回答 2
Stack Overflow用户
发布于 2020-02-12 15:06:38
你可以这样做:给最大值，然后减去10% (每边5%)，然后中间正方形与边缘自动。
CSS
.square {
background-color: blue;
width: calc(100vw - 10%);
height: 100vh;
margin: 0 auto;
}Stack Overflow用户
发布于 2020-02-12 15:34:48
既然您说您是HTML & CSS的新手，那么让我简要介绍一下如何根据viewport添加元素的宽度。
视口
视图是浏览器中的区域，实际内容显示为，换句话说，您的浏览器没有工具栏和按钮。单位是vw，vh，vmin和vmax。它们都代表了浏览器(viewport)维度的百分比，并相应地调整了窗口大小。
假设我们有一个1000 we (宽度)乘以800 we(高度)的视口：
- 大众-代表1%的视口宽度。在我们的例子中，50 In =500 In。
- vh -窗口高度的百分比。50=400。
- vmin -两者中最低的一个百分比。
在我们的示例中，50vmin =400 we，因为我们处于景观模式。vmax -较大维数的百分比。50 50vmax =500。
您可以在任何可以指定以像素为单位的值的地方使用这些单位，例如在width、height、margin、font-size和more中。它们将在窗口调整大小或设备旋转时由浏览器重新计算。
案例1
现在考虑到您的问题，我没有看到任何宽度的变化，因为如果您看到您的检查器->布局->边距，我可以看到两边显示64在您提供的屏幕截图。
案例2
如果你真的再次看到你的系统的变化。尝试删除您提到的外部CSS，看看是否会导致任何问题，然后将margin:0px放在html和body中。
希望你能得到帮助..。
https://stackoverflow.com/questions/60191211
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号