Html 为什么在使用不带文本的flex显示时忽略线高度？_Html_Css_Flexbox

Html 为什么在使用不带文本的flex显示时忽略线高度？

html css

Html 为什么在使用不带文本的flex显示时忽略线高度？,html,css,flexbox,Html,Css,Flexbox,当在flex显示中没有文本时，浏览器将忽略样式行高行高仍然被忽略，即使有其他组件，如输入或文本区域为什么要忽略行高度请参阅运行演示阿利克结果: 编辑：事实上，你的线条高度并没有被忽略。当有多行文本时，会出现行高。这是您给我们的代码的稍加修改的版本 ALIK Lorem Ipsum sit AmetLorem Ipsum sit Amet线条高度描述线条框的高度。行框不能直接存在于flex容器中-所有flex项都被块化，flex容器中的任何裸文本都存在于匿名flex项中的行框中（请

当在

flex

显示中没有文本时，浏览器将忽略样式

行高

<代码>行高仍然被忽略，即使有其他组件，如

输入

或

文本区域

为什么要忽略

行高度

请参阅运行演示


阿利克

结果: 编辑：

事实上，你的线条高度并没有被忽略。当有多行文本时，会出现行高。这是您给我们的代码的稍加修改的版本

ALIK
Lorem Ipsum sit Amet
Lorem Ipsum sit Amet

线条高度

描述线条框的高度。行框不能直接存在于flex容器中-所有flex项都被块化，flex容器中的任何裸文本都存在于匿名flex项中的行框中（请参见规范的）。在第一个示例中，

行高

应用于该匿名弹性项中的行框，并相应调整

输入

的大小

input

和

textarea

元素被替换为元素，在这种情况下，它们的固有高度根据使用（请记住，它们由于是弹性项而被阻塞）。因此，在第二个示例中，如果没有任何文本，

行高

不适用，因此将被忽略。

“当有多行文本时，会出现行高。”。。。另外，当有一行文本时，如控件示例中所示。@DJDavid98，您是对的。将

而不是Alik放置会使线条与蓝线的大小相同，而看不到任何文本。听起来像是黑客。这太含蓄了：(

<html>
  <head>
  </head>
  <body>
    <h1 style="line-height: 200px; background: blue;  display: flex"><input value="expected large line-height - success." style="width: 250px"/>ALIK</h1>
    <h1 style="line-height: 200px; background: red;  display: flex"><input value="expected large line-height - FAILURE!!!" style="width: 250px"/></h1>
  </body>
</html>