为什么
为什么
我很困惑这是怎么回事——有人能告诉我到底发生了什么吗？
body,
html {
padding: 0;
margin: 0;
height: 100vh;
width: 100%;
}
.chat-break {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.chat-break .line {
border-bottom: 1px solid #ddd;
width: 100%;
}
.chat-break .date {
color: #B5B5B5;
position: absolute;
background-color: #fff;
padding-left: 8px;
padding-right: 8px;
}<div class="chat-break">
<div class="line">
</div>
<p class="date">Today</p>
</div>
我的理解：
.chat-break柔性盒具有两个元件.line和.date- 。。。但在CCD_ 5上使用CCD_
- 那么为什么是"；今天"以直线为中心
前言：
top、right、bottom和left属性统称为"；方框插入"；属性- 请记住，所有未明确设置的CSS属性都将具有默认值；CCD_ 10"；值或继承的值。
- 因此，除非另有明确指定，否则每个元素都有
position: static; - 所有长方体插入属性的
initial值都是auto，，而不考虑其元素的position和display属性。- 但是
auto值的行为确实取决于元素的position和/或格式化上下文
- 但是
- 因此，除非另有明确指定，否则每个元素都有
- CSS有很多令人惊讶和违背直觉的行为。
- 这不是故意的，而是CSS在过去25年中随着时间的推移而演变的结果。
- 最初CSS根本不能进行任何布局控制，它只对字体和文本样式等有用
- 事实上，CSS的主要布局功能(如
flex、grid等(直到2010年代才被添加(更不用说浏览器支持了(。- 例如，2008年flex的原始规范被放弃了。它在2011年被重新发明，直到2014年才得到广泛支持
- 这不是故意的，而是CSS在过去25年中随着时间的推移而演变的结果。
为什么<div class="line">填充页面宽度：
<div class="chat-break">具有display: flex;，这使其成为灵活的父级。具有
position: static的flex父元素的所有直属子元素(除某些例外(都是flex项。因此
<div class="line">是一个弹性项目。因此
<p class="date">是而不是弹性项，因为它具有position: absolute;。- (一般来说(具有
position: absolute;的元素不受其布局容器的布局规则的约束，并且使用绝对坐标重新定位，其中原点在中，而不具有-position: static;的它们的壁橱祖先元素(是的，这很难(。- 这就是
position: relative;应用于<div class="chat-break">的原因
- 这就是
- (一般来说(具有
- 因此，
<div class="chat-break">是一个只有一个弹性项的弹性父项，尽管它有两个元素子项。- 因为它有
justify-content: center;，这意味着它的单个弹性项(<div class="line">(将居中
- 因为它有
-
同样，因为
<div class="chat-break">有display: flex;(而不是display: inline-flex(，这意味着<div class="chat-break">是块级元素，所以它填充其容器的宽度，即<body>，它填充视口的宽度。- 因为
<div class="line">也有position: absolute0(变成flex-basis: 100%;(，这意味着<div class="line">将填充<div class="chat-break">的宽度 - 因此，
<body>、<div class="chat-break">和<div class="line">(按顺序(将填充视口的宽度
- 因为
为什么<p class="date">居中：
- 由于
<p class="date">将auto用于其所有框嵌入属性(即.date0、right等(和position: absolute;，因此这些属性的计算值与<p class="date">为position: static;相同。- 但是，如果
<p class="date">是position: static;，那么它将是一个灵活项，并将与<div class="line">共享其灵活行，这意味着它将位于行右侧的某个位置(由于justify-content: center;(。但它实际上是居中的，因为这是一个特殊的情况，在规范中特别指定。。。
https://www.w3.org/TR/css-flexbox-1/#abspos-项目
4.1.绝对位置灵活的儿童
由于它不在流中，flex容器的绝对定位的子级不参与flex布局。
flex容器的位于absolute的子对象的static位置被确定为使得该子对象被定位为就好像它是柔性容器中的唯一柔性项目一样，假设该子对象和柔性容器都是其使用大小的固定大小的盒子。为此，自动边距被视为零。
- 但是，如果
值得阅读本节的其余部分，因为它还涵盖了其他大脑拉伸场景，如"；如果使用align-self: center;怎么办；？