作者：cxl | 来源：互联网 | 2023-01-29 17:24
我使用flexbox得到了一个表,并注意到一个有趣的特性:br元素在flexbox中无法做任何事情.
例:
.flexbox {
display: flex;
flex-wrap: wrap;
border: 2px solid red;
padding: 2px;
}
.item {
width: 50px;
height: 50px;
margin: 2px;
border: 2px solid blue;
}
.new-row, br {
display: block;
width: 100%;
height: 0px;
}
Line break using div:
Line break using br:
在示例中,div并br共享相同的属性,但div将元素传递给新行,而br不是.
为什么？
1> BoltClock..：
br众所周知,CSS中元素的实现非常神秘.不同的浏览器支持元素上的不同属性集,具有不同程度的效果(尽管它们都支持设置display: none以至少从布局中删除它).CSS本身早在CSS1就承认了这种奇怪之处,它已经专门为它准备了整个小节,即使现在在CSS3中它仍然严重不足.
涉及flexbox的这种特性并不新鲜; 它自2014年以来就已为人所知.基本上,在当前的实现br中,不会生成主框,而是将其视为Flexbox规范第4节中所述的连续文本运行的一部分,生成无法设置样式的匿名Flex项(因为它是匿名的).这类似于一个孤立display: table-cell元素导致在它周围创建一个匿名表框,除了你至少仍然可以设置display: table-cell元素的样式- 在元素的情况下,br你应用的样式属性没有效果,并且匿名的flex项是用默认值布局.
在这种情况下,由于br它本身(大部分)是空的并且没有伴随Flex容器中的任何其他裸文本,这导致匿名的flex项目没有维度,使得它看起来好像br元素已经完全消失.
早在2014年,CSSWG就不是通过改变Flexbox规范来解决这个"谜",而只是br为css-display-3 添加一个特殊的元素定义来解释这里看到的行为.但是该规范的当前版本中没有这样的定义,也没有FPWD(在解决方案之后发布!),也没有HTML规范,也没有其他地方.然而,根据当前的css-display-3规范(没有定义任何新属性,只是更改定义display),定义看起来像这样:
br {
content: '\A';
display: contents;
white-space: pre;
}
...这意味着该br元素不会生成主框,而只是一个包含单个换行符的匿名内联框.
因为css-display-3中仍然缺少这个定义,所以我不会立即认为它是正常的.即便如此,这里看到的行为极不可能改变,因为这是该br元素长期存在的方式.
京公网安备 11010802041100号