Question

我无法理解这是如何工作的以及为什么它的中心。为什么宽度：70％; 而不是50％/ 25％？

我无法理解这一点。我只是想学习web开发的基础知识。我完全被击败了。

body,
html {
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 0 auto;
  width: 70%;
}

.top-header {
  background-color: yellow;
  width: 100%;
  height: 100px;
}

.main-content {
  background-color: red;
  width: 100%;
  height: 25px;
}

<div class="wrapper">
  <div class="top-header">
  </div>
  <div class="main-content">
  </div>
  <div class="bottom-footer">
  </div>
</div>

Answer 1

width: 70%只是一个选项，很可能是50％或25％。没关系。重要的是使用width时margin: auto。将边距设置为自动将自动计算元素与其容器的距离，并相应地调整中心元素

Answer 2

在CSS中将元素设置为中心，例如div，我们使用属性margin: auto;的宽度只能确保它不会占据整个页面并延伸到其容器的外部。您还可以显式指定边距值。我还建议您改用max-width，因为当您想在移动设备上使用它时，它将改善您网站上的大小。
另一件事，如果要在div中居中放置文本，请使用text-align: center;

Answer 3

为什么宽度：70％；而不是50％/ 25％？

这纯粹是作者的喜好。可以是任何宽度，也可以是最大宽度。

重要的是，不是100%或auto会导致元素填充整个宽度并使居中的想法毫无意义。

div {
  height: 1em;
  border: 1px solid black;
  background: #aaa;
  margin: 1ex auto;
  width: 70%;
}

div+div {
  width: 50%;
}

div+div+div {
  width: 25%;
}

div+div+div+div {
  width: 100px;
}

div+div+div+div+div {
  max-width: 80ex;
}

div+div+div+div+div {
  max-width: 20px;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

在CSS中居div - 这是如何工作的？

3 个答案: