CSS:元素具有"display:block"并且不会开始新行 [英] CSS: element has 'display: block' and doesn't start a new line

问题描述

请查看以下代码:

.header {
  display: flex;
  width: 100vw;
  height: 20vh;
}

div {
  border: solid;
}

#first {
  flex: 1
}

#second {
  flex: 1
}

#third {
  flex: 1
}

<header class="header">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</header>

这段代码给出了三个矩形，它们彼此相邻.
但是，如果您检查每个矩形，就会在开发工具中看到

This code gives three rectangles that lie one next to the other.
However, if you inspect each rectangle, you'll see in dev-tools

这些矩形具有 display:block .

但是，我知道当一个元素具有 display:block 属性时，这意味着该元素开始了新的一行.如您所见，事实并非如此.所有三个矩形都放在同一行中.

However, I know that when an element has a display: block property, it means that the element starts a new line. As you can see, it's not the case. All three rectangles are placed in the same line.

你怎么解释呢?

推荐答案

但是，我知道当一个元素具有display:block属性时，它意味着该元素开始新的一行.

However, I know that when an element has a display: block property, it means that the element starts a new line.

您的信息是错误的，因为仅display属性不会告诉我们是否要换行.

Your information is wrong because the display property alone never tells us if we will have a new line or not.

让我们再举一个没有flexbox的例子:

Let's take another example without flexbox:

.box {
  width:200px;
  height:200px;
  border:2px solid;
  float:left;
}

<div class="box">

</div>
<div class="box">

</div>

您可以清楚地注意到，元素的 display 计算值等于block，但由于float属性，它们并未从新行开始.flexbox，CSS网格，position:absolute和许多其他属性组合也会发生同样的事情.

You can clearly notice that the elements have the computed value of display equal to block but they don't start on a new line due to the float property. Same thing happen with flexbox, CSS grid, position:absolute and many others combination of properties.

所有这些都在规范中定义.

All this is defined in the specification.

对于浮点元素: https://www.w3.org/TR/CSS21/visuren.html#floats

如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动的框，那么对于每个这样的较早框，当前框的左外边缘必须在右侧较早的盒子的右外边缘的高度，或者它的顶部必须低于较早的盒子的底部.类似的规则适用于向右浮动的框.

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

对于flexbox: https://www.w3.org/TR/css-flexbox-1/

For flexbox: https://www.w3.org/TR/css-flexbox-1/

弹性项目的显示值已被阻止:...

flex-direction属性通过设置flex容器主轴的方向来指定 flex物品在flex容器中的放置方式.这确定了弹性项目的布置方向.

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

默认方向是行

您只需要查找规范中与属性有关的部分，以查找元素在文档中的放置方式，您将清楚地看到仅 display 是不够的对此进行定义.

You simply need to find the part of the specification dealing with the properties you are using to find how your elements will be placed in the document and you will clearly see that display alone isn't enough to define this.

这篇关于CSS:元素具有"display:block"并且不会开始新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！