对vertical-align的“整容式”再理解

原创 小枝节KKW 随笔 CSS 339阅读 2017-06-17 15:45:02 举报

[table=100%,#ffffff,#dddddd,1,0,left]
[tr]
[td=1,1,30.00%][/td]
[td=1,1,70.00%]描述[/td]
[/tr]
[tr]
[td=1,1,30.00%]baseline[/td]
[td=1,1,70.00%]元素的基线与父元素的基线对齐,默认[/td]
[/tr]
[tr]
[td=1,1,30.00%]值[/td]
[td=1,1,70.00%]元素相对于基线上下偏移一定px[/td]
[/tr]
[tr]
[td=1,1,30.00%]百分比[/td]
[td=1,1,70.00%]相对于该元素的line-height值的百分比[/td]
[/tr]
[tr]
[td=1,1,30.00%]top[/td]
[td=1,1,70.00%]把对齐的子元素的顶端与行框顶端对齐[/td]
[/tr]
[tr]
[td=1,1,30.00%]bottom[/td]
[td=1,1,70.00%]把对齐的子元素的底端与行框底端对齐[/td]
[/tr]
[tr]
[td=1,1,30.00%]middle[/td]
[td=1,1,70.00%]元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐[/td]
[/tr]
[tr]
[td=1,1,30.00%]text-top[/td]
[td=1,1,70.00%]元素的顶端与父元素内容区域的顶端对齐[/td]
[/tr]
[tr]
[td=1,1,30.00%]text-bottom[/td]
[td=1,1,70.00%]元素的底端与父元素内容区域的底端对齐[/td]
[/tr]
[tr]
[td=1,1,30.00%]super[/td]
[td=1,1,70.00%]升高元素的基线到父元素合适的上标位置[/td]
[/tr]
[tr]
[td=1,1,30.00%]sub[/td]
[td=1,1,70.00%]降低元素的基线到父元素合适的下标位置[/td]
[/tr]
[tr]
[td=1,1,30.00%]inherit[/td]
[td=1,1,70.00%]从父元素继承[/td]
[/tr]
[/table]

html 代码

看出有什么区别了吗,下边来一一分析各个属性值
分析之前,做个补充,vertical-align很挑剔,它不是在任何情况下都会起作用的,只有在元素为“inline-block”和一些可替换元素(img/button/radio等)的情况下才会有效果,这一点值得注意!!!
1.数值/百分比的情况

2.top/text-top
单纯看上边的例子,好像top和text-top并没有什么区别啊,所以还是看一下下边这个对比明显的吧
html 代码

3.top/middle/bottom
这3个应该是用的比较多的吧,可这3个值究竟指什么呢,网上找了一张图

对vertical-align的“整容式”再理解
其实就是英文当中的四线三格,分别对应top line/middle line/base line/bottom line,知道这个也就好理解了
top : 对齐元素的顶端与行内框的top line对齐
bottom: 对齐元素的底端与行内框的bottom line对齐
middle :对其元素的中垂点与base line以上文字的二分之一高度对齐(注意不是middle line啊,中垂点数学当中学过)
4.super/sub
这两个值我从来没有用过,个人见解它适用于一些数学公式中,比如平方/对数当中

暂且以上吧,以后有什么新发现在继续补充

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复