Html 意外的CSS行为？_Html_Css

Html 意外的CSS行为？

html css

Html 意外的CSS行为？,html,css,Html,Css,在玩分隔线时，我无意中发现了下面的场景，分隔线占据了容器的整个高度，而没有父母的高度。任何人都能理解为什么将分隔符设置为position:absolute和display:inline block不会导致它们像预期的那样一直浮动到父容器的左侧？为什么它们实际上是内联的 HTML 这是因为左和右都是自动那么根据, [如果]“左”和“右”是“自动”而“宽度”不是“自动”，那么如果确定静态位置的元素的“方向”属性] 包含块的“ltr”设置为“左”，否则为将“右”设置为“右”。然后求解“左”（如果

在玩分隔线时，我无意中发现了下面的场景，分隔线占据了容器的整个高度，而没有父母的高度。任何人都能理解为什么将分隔符设置为

position:absolute

和

display:inline block

不会导致它们像预期的那样一直浮动到父容器的左侧？为什么它们实际上是内联的

HTML

这是因为

左

和

右

都是

自动

那么根据,

[如果]“左”和“右”是“自动”而“宽度”不是“自动”，那么如果确定静态位置的元素的“方向”属性] 包含块的“ltr”设置为“左”，否则为将“右”设置为“右”。然后求解“左”（如果 '方向为'rtl'）或'right'（如果'direction'为'ltr'）

其中，静态位置定义为

“left”（左）的静态位置是指与左边缘的距离假设框左边距边缘的包含块如果元素的“位置”为属性为“静态”，而“浮动”为“无”

如果不需要，请指定一个值：

.divider{
左：0；
}

这是因为

左

和

右

都是

自动

那么根据,

其中，静态位置定义为

“left”（左）的静态位置是指与左边缘的距离假设框左边距边缘的包含块如果元素的“位置”为属性为“静态”，而“浮动”为“无”

如果不需要，请指定一个值：

.divider{
左：0；
}

如果希望所有分隔符都位于其父分隔符的左侧，请更改其显示样式

而不是：

display: inline-block;

使用：

如果希望所有分隔符都位于其父分隔符的左侧，请更改其显示样式

而不是：

display: inline-block;

使用：

任何人都能理解为什么将分隔符设置为

position:absolute

和

display:inline block

不会导致它们像预期的那样一直浮动到父容器的左侧

因为您没有指定

left

值，所以它是隐式的

auto

，这意味着如果它们不是绝对定位的，它们的左边缘将定位在正常流中的位置

此处描述并指定了此行为：

顺便说一句，设置

display:inline block

在此不起作用，

display

的计算值将自动变为

block

，请参阅

display:inline block

首先需要使元素在框之间处于静态位置，因此观察到的效果必须起作用。（仅在应用“

position:absolute

后，计算值将变为

block

）

您选择的在此处放置这些分隔符的技术可能不是最佳选择，至少如果您的布局是流动的-将小提琴的结果窗口缩小到三个红色框不能全部放在一条线上，您将看到我的意思