vertical-align属性

2015年05月10日

起因

  最近被问到vertical-align有多少属性,只能举出工作中常用的,查了一下发现属性好多。

  然后基础被秒==,太弱了==,还有种六级白过了的赶脚==

  还有一点,发现公司有两种,一种是拉进去能干活就行的,一种是很看重基础(不要埋坑的么😂),比如只会用框架原生js了解泛泛的真心跪了==

关于vertical-align

  w3c上说明vertical-align的属性有一下几个:详细的说明还是看例子里的吧。

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | % | inherit | 数值

  上周看到了codepen这个工具,试了一把还蛮好用的。例子在这里访问

  例子里面看出的几个问题如下:

  1. top、middle、baseline、bottom这四个属性是怎么来的?

  2. 文本的上标和下标什么意思?原本将我的女侠头像放的一样大,看不出来,发现缩小后,上标和下标的意思就比较明显了,角标的意思吧

  3. top和text-top,bottom和text-bottom看起来好像一毛一样?

  4. 百分比的那个属性是按什么算的?’0%’等同于’baseline’。但是这个百分比增大或者缩小整个图片像在上下震动。不甚理解。

  5. 数值那个属性是怎么算的?通过距离升高(正值)或降低(负值)元素。’0cm’等同于’baseline’,所以我可以看到图11和图1是一样一样的。

行高

  看了一些博文,vertical-align与line-height好像有密不可分的关系,首先我得了解一下什么叫行高。可耻的盗图一张: css中的行高

  行高跟四条线有关,顶线,中线,基线(一般在文字底部四分之一的地方)和底线。

  行高:指两行文字基线之间的距离(那么问题来了,一行文字怎么算行高?);

  行距:(行高-字体尺寸)/ 2 所以文本之间的行距是受行高及字体大小影响的

  现在我可以看看上面的问题

  1. 问题1:四个属性看起来找到对应的关系了,line-height的四条线。但是这四条线具体是怎么分的?而且图片内容已经将行高撑开了?

  2. 问题2:关于text-top,看了张鑫旭css-vertical-align的深入理解(二)之text-top篇/后发现这个问题深了去了,下面应该去看看行内框及line-height相关的一些内容了==

参考链接

张鑫旭大神写了很多这方面的博文 访问 访问