时间戳

首页 > 解决方案 > 做

元素有预设宽度？

html - 做
元素有预设宽度？

问题描述

我是 HTML/CSS 初学者，我对<div>元素的宽度有疑问。

这是我的代码：

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(IMAGES/hero.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-text-box {
  position: absolute;
  width: 1140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<body>
  <header>
    <nav>

    </nav>
    <div class="hero-text-box">
      <h1>Goodbye junk food. Hello super healthy meals.</h1>
      <a href="#" class="btn btn-full">I'm hungry</a>
      <a href="#" class="btn btn-ghost">Show me more</a>
    </div>
  </header>
</body>

结果如下所示：

格式正确的标题

但是，如果我注释掉 CSS 中的“宽度”命令，如下所示：

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(IMAGES/hero.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-text-box {
  position: absolute;
  /*width: 1140px;*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<body>
  <header>
    <nav>

    </nav>
    <div class="hero-text-box">
      <h1>Goodbye junk food. Hello super healthy meals.</h1>
      <a href="#" class="btn btn-full">I'm hungry</a>
      <a href="#" class="btn btn-ghost">Show me more</a>
    </div>
  </header>
</body>

然后图像变为：

在此处输入图像描述

我想知道为什么第二张图片看起来像它的样子？例如，为什么浏览器选择在“食物”一词之后放置一个换行符，而在“健康”之后放置另一个换行符？为什么每个单词后面没有换行符？还是每封信？

自从我开始学习 HTML/CSS 以来，我一直很难理解围绕元素间距和定位的规则。他们似乎是武断的。当我从 CSS<div>中删除属性时，我的文本默认为这个特定宽度是否有原因？看起来包含标题和'width: 1140px'我的链接有某种我不知道的预设宽度，但这似乎不正确。<div>

标签： htmlcsspositioning

解决方案

<div>元素是“块级”元素。

如果您<div>没有添加 CSS，并在浏览器的 Web 检查器中检查它，您将看到浏览器显示以下样式：

div {
  display: block;

  /* ... other default properties ... */
}

块级元素隐含的值为width: 100%，占据其父元素的整个宽度。


这里发生的事情是应用绝对定位的结果。

当您设置position: absolute时<div>，它具有隐含left和right的值0。

div {
  position: absolute;

  /* implicit values:
  left: 0;
  right: 0;
  */
}

当您将属性显式设置left为 时50%，该right属性仍被隐式设置为0，因此现在您实际上<div>只设置了其原始宽度的 50%。

您transform用于将整个元素拉回中心，但这样做会改变位置，而不是宽度，因此宽度缩小的后果left: 50%仍然存在。

推荐阅读