Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

文本节点的vertical-align问题

  一开始我用这个代码测试 <!DOCTYPE html>
<style>
div {border:1px solid red;}
div * {font-size:64px;color:red;vertical-align:middle;}
</style>
<div>次<b>碳酸</b>钴</div>

  感觉十分奇怪为什么文本节点居中了,我以为是通配选择器影响了文本节点。后来,我换成了 <!DOCTYPE html>
<style>
div {border:1px solid red;}
div * {font-size:64px;color:red;}
div b {vertical-align:middle;}
</style>
<div>次<b>碳酸</b>钴</div>
  发现运行结果和上面一样,那就说明不是通配选择器搞的鬼。那么是什么情况呢? 于是我有测试了下面这个代码。 <!DOCTYPE html>
<style>
div {border:1px solid red;}
div * {font-size:64px;color:red;}
div b {vertical-align:baseline;}
div i {vertical-align:middle;}
</style>
<div>次<b>碳酸</b>钴 次<i>碳酸</i>钴</div>
  得到了更诡异的结果

  不过这个看似诡异的结果,逻辑却很严密。稍微研究了下,得到这个结论:其实这个vertical-align属性的值有两套,一套是text版本,一套是普通版本。
    普通版本
      top
      bottom
      直接设置数值
    text版本
      text-top
      text-bottom
      middle
      baseline
      super
      sub
  元素设置上普通版本的vertical-align以后,它的行高作用就不再对文本节点生效了,而设置成text版本的话,它的行高就会对文本节点生效。看上面的例子,B标签和I标签都是text版本的,所以他们的行高都对文本节点生效。由于文字的默认位置是baseline,所以第一个B标签生效后行高就变的很高,所以文本节点就下沉到这个高度相对的baseline位置。而I标签是垂直居中的,这也是个text版本,可是I标签的行高和B标签是一样的,文本节点已经因为baseline向下移动了,如果再回移动就不匹配baseline了,所以它只能自己向下移动去匹配文本节点的位置,而它向下移动产生的高度,就不再加入行高计算了。
  这个描述应该没有什么问题了,如果有问题以后会再完善。果然还是有点乱,我以后一定会好好话点篇幅说说这个vertical-align的,现在先这样了解就好了。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^