vertical-align
属性主要用于改变行内元素的对齐方式,对于行内布局影响很大,如果不了解的话,我们开发调整样式的时候很容易出错。
网上关于这个属性的原理说得很是复杂,看一眼就让人觉得望而生畏,而且大可不必完全理解其原理,只要懂得其规律,我们足够使用即可,下面把我的理解分享给大家:
基线
要了解vertical-align属
性,必须懂得基线,怎么理解基线呢?
1、我们写网页是在一个矩形的显示屏上,经常是一行一行来布局,不可避免的是一行中会有多个内容,那么这行内容是如何上下对齐的呢?答案就是默认让他们的基线对齐。
2、各种字体、图片、行内html元素等可展示的内容都有各自的基线,要想知道具体内容的基线我们可以找一个简单的参照物:小写字母“x”,为什么找它呢?因为英文字母的基线恰好就是小写"x"的最下方,比较容易看出。
知道了以上两点我们就可以很容易知道其他内容元素的基线位置了,把其他元素和小写“x”放在一行展示一下就一眼可以看出了:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border: 1px solid cyan; font-size: 30px; } div .span1 { display: inline-block; background-color: green; } div .span2 { display: inline-block; overflow: hidden; background-color: green; } </style> </head> <body> <div> x <img src="./demo.jpg" alt=""> 汉字 <input type="text"> <button>按钮</button> <span class="span1">span1</span> <span class="span2">span2</span> </div> </body> </html>
如上图红色为该行元素基线,可以发现图片和overflow:hidden
样式的元素的基线位置是最下方,中文、输入框和button
按钮的基线位置都在中下方的位置。可以看出,这些行内元素的排列是先按基线上下对齐,然后把父元素撑开。
值得注意的一点是,如果我们直接往div中放入一个图片,会发现图片底部距离div的下方有一个空隙;这是因为 行内元素各自基线对齐以后还要和父元素的字体基线保持一致, 换句话说: 每个行内元素的基线都要向父元素字体基线看齐。 但当父元素的行高和字体大小样式改变的时候,会使得父元素字体基线位置改变,从而使得行内元素的位置整体上下移动。虽然我们只看到了一个图片没有看到字,但是父元素有默认的line-height
和font-size
,也会悄悄地影响布局,你会发现再往div中放入了一个小写字母“x”,如下图,它的下方刚好占据了空隙的位置。所以知道了这个原因,想去掉这个空隙的话,只需要把父元素的line-height
和font-size
设置为0,或者把图片设置成块级元素,让它独占一行就可以了。同样的,如果div中直接放入一个input输入框,输入框上方也会有个空隙,与此类似,只是图片和输入框的基线位置不同罢了。
vertical-align属性
了解了上述行内元素的排序原则,我们可能会有个疑问:如果我们需要某些行内元素不按照基线排列怎么办?答案就是使用vertical-align
属性。
首先,vertical-align属性是针对行内元素才有效果,它改变了当前行内元素和父元素字体两者之间的对齐方式,默认值是baseline
,即两者基线对齐,如上面我们测试的一样。
关于各个属性值可参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align ,可简单在div中加入小写字母“x”和一张图片分别切换属性进行验证即可。
有两个属性稍作解释:
1、当设置属性为"%"的时候,指的是当前行内元素的line-height属性值的占比,可以设置成正负值,行内元素基线相对父元素字体基线上下移动这个百分比的距离。如下图,设置图片vertical-align: 50%; line-height: 30px
; 本来图片最下方应该和"x"底部对齐的,现在上移了15px,如果是-50%,就会相对下移15px。当然也可以直接设置为length,vertical-align:15px;
效果也是一样的。
2、当设置属性为“middle”的时候,行内元素中间位置会和父元素字体基线上方1/2"x-height"位置对齐,“x-height”其实就是父元素中小写字母“x”的高度,简单来说,就是行内元素的中间位置会和父元素中的小写字母“x”的中间位置(x的交叉点)对齐,就相当于两者中间对齐了。
总结
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]