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

问题描述

请看下面的代码:

.header {显示:弹性；宽度:100vw；高度:20vh；}div {边框:实心；}#第一的 {弹性:1}#第二 {弹性:1}#第三 {弹性:1}

<div id="第一个"></div><div id="第二个"></div><div id="第三个"></div></header>

这段代码给出了三个相邻的矩形.
但是，如果您检查每个矩形，您会在 dev-tools 中看到

这些矩形有display: block.

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

你怎么解释这个?

解决方案

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

您的信息是错误的，因为单独的 display 属性不会告诉我们是否会有新行.

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

.box {宽度:200px；高度:200px；边框:2px 实心；向左飘浮;}

<div class="box">

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

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

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

<块引用>

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

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

<块引用>

弹性项目的显示值是块化:...

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

默认方向为row

<小时>

您只需要找到规范中处理您使用的属性的部分，以找出您的元素将如何放置在文档中，您将清楚地看到仅 display 是不够的来定义这个.

Please take a look on the following code:

.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

that these rectangles has 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.

How can you explain this?

解决方案

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

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

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>

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.

For float elements: 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.

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

The display value of a flex item is blockified: ...

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.

The default direction is row

---

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:元素具有“显示:块"并且不开始新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！