<div>元素有预设宽度吗？

问题描述 投票：0回答：2

我是一个HTMLCSS初学者，我有一个关于以下元素宽度的问题 <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>

这就是结果的样子

Correctly formatted header

然而，如果我在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>

图像就会变成这样

enter image description here

我想知道为什么第二张图片看起来是这样的？ 例如，为什么浏览器选择在 "食物 "一词之后换行，而在 "健康 "之后又换行？ 为什么不是每个单词后都有一个换行符？ 或者说，每一个字母后面都有换行符？

自从我开始学习HTMLCSS以来，我对元素的间距和位置规则的理解就非常困难。 它们看起来很随意。 有什么原因导致 <div> 我的文字默认为这个特定的宽度，当我删除了 'width: 1140px' 从CSS的属性？ 它 样子 喜欢 <div> 包含标题和我的链接有某种我不知道的预设宽度，但这似乎不对。

html css positioning
2个回答
2
投票

<div> 元素是 "块级 "元素。

如果你有一个 "块级 "元素。<div> 在没有添加CSS的情况下，你在浏览器的网页检查器中检查它，你会发现浏览器会显示这种样式。

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% 留。

0
投票

div 默认情况下，需要 auto (usaly 100%)的宽度。第二张图片看起来是这样的，因为 div 在绝对位置上，占据剩余的空间。所以你是将div偏移了50%。

top: 50%;
left: 50%;

容器中的剩余空间是50%，所以这个div的大小被调整为占用父空间的50%。然后，你正在转换 div 以50%的比例居中 transform: translate(-50%, -50%); 所以它把div放在中间，宽度为50%。

0
投票

是的，是的 <div> 是一个 block 级别的元素。所有的块级元素都默认继承其父元素的宽度，或者我们可以说是 <div> 将具有 100% 的宽度，也就是说，如果父代的宽度为 500px 那么宽 <div> 将被设置为 100% 即 500px 默认情况下。

但是 height 将是 0 和高度取决于 height 的 content.

而这一切的发生都是因为 absolute positioning...

其余的已经由Simmer先生解释过了!

-1
投票

div作为一个容器，可以容纳里面的任何东西。设置宽度：1000px，就可以给里面的h1、a等标签一个1000px的空间。当你把宽度去掉的时候，你的div就可以容纳里面的任何东西了。我不是很会解释。希望你能明白一点。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.