对css基线的理解和实验

最新推荐文章于 2024-12-19 08:05:26 发布

原创最新推荐文章于 2024-12-19 08:05:26 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

10 篇文章

订阅专栏

在使用CSS vertical-align属性时遇到困惑，通过实验发现基线始终与行内高度最高的元素一致。当最高元素vertical-align改变时，基线会随之调整。详细探讨了不同vertical-align设置对元素对齐的影响，揭示了基线动态变化的规律。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在使用vertical-align的时候遇到了一些困惑，他的对齐方式实在是让我有些琢磨不透，光看文档的描述，并不能太理解他所谓的基线到底是怎么来的，于是自己花了点时间琢磨了一下基线到底是从何而来，现在得出了以下结论：基线总是与行内高度最高的元素一致的。关于怎么来的，先看看我的一些实验吧。如果有误希望大家能够指出来?。
先来看下面这段代码的效果

<html>
<head>
<style type="text/css">
.root{
  width:200px;
  height:200px;
  border:1px solid black;
}
.root:after{
  content:" ";
  display:inline-block;
  height:80%;
  vertical-align:middle;
  border:1px solid black;
}
.item{
  display:inline-block;
  vertical-align:baseline;
  width:50px;
  height:50px;
  border:1px solid black;
}
</style>
</head>
<body>
<div class="root">
123x
<div class="item"><div>
</div>
</body>
</html>

在这里插入图片描述
最高的元素 vertical-align为middle，另外的元素 vertical-align为baseline 可以推测出现在基线的位置应该是如图所示的，那我现在改变最高元素的vertical-align为text-bottom又会出现什么效果呢

把行内最高元素的vertical-align设置为text-bottom后就变成了如下效果，但是其他元素仍是基线对齐的但是却跟着移动到了最下面可见现在基线又变化了，基线跑到了最下面。
为了验证一下基线是不是真的变化了，我再把另一个div元素的垂直对齐方式vertical-align设置为middle，效果如下。
在这里插入图片描述
可见确实基线是随着行内最高元素变化的。(ps:middle并不是让元素中部与基线对齐，而是与基线加上x-height的一半的那个位置对齐，在图中的话，就是那个x字母的交叉点那个高度关于x-height可以参考
https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css/)