当前日期:2020年11月24日 星期二
Hi 你好,欢迎访问!登录
搜索 导航

豆芽笔记-电商运营、电商基础知识的独立个人博客!

当前位置:首页 - 学习进阶 - WEB前端 - 正文
阅读模式

对vertical-align的粗浅认识(算是对web前端的520表白?)

2018-05-19 | WEB前端 | 欧阳七仔 | 874°c

  明天5.20了,祝天下有情人终成眷属;算是第一次正式写web前端的东西,挑了这么一个日子,姑且算是从系统学习前端来的一个表白了……

  步入正题,聊聊vertical-align,这是在学习过程中,七仔最头疼的一个属性,用张鑫旭大神的话说,这就是一个臭虫满窝的属性。不一定讲得好,简单记录下方便以后自己再次总结,再次反思之用。

  大家是否对这一幕很熟悉?div里边有图片的时候,无论你怎么清除border/padding/margin,图片的下方,总是会出现一个缝隙?

  (照片源于网络,侵权请联系网站底部QQ进行删除。至于为何选这照片,则源于女性衬衫装扮的干练,性感...nice!)

缝隙展现.jpg

(图1:前端展示)

测试源码01.jpg

(图2:html代码)

css测试源码01.jpg

(图3:CSS代码)

  在很多时候,其实我们是不容易发现图片和文字对齐的细小差别的,特别是初学者,很容易误认为图片是和文字底部进行直接对齐。当出现图1情况,并且在清除border/padding/margin仍然得不到解决的时候,就不知如何是好了。

  这里先讲一讲解决这个缝隙的方法:

  一、将图片display属性设置成block;

  优势:设置简单,但是如此一来,img的display属性则由原来的inline-block变成block,展示形式独占一行。图片本来就独占一个区块(div/section)的时候操作起来则比较方便。

  缺点:要是还有其他元素和img在同一个区块(div/section),则需要通过一些浮动来让区块内的元素重新排布在同一行,增加代码难度。

(图4)

(图5)

(图6)

  二、设置img的vertical-align属性达到目的;

bottom.jpg

(图7)

  三、将包含图片元素的区块,字号大小设置成0;

字号设置成0.jpg

(图8)

  vertical-align属性设置前后展现样式,请见图4、图5;目的达到,完美收官?

  NO,凡是探寻一个究竟。

  为何会出现这样一条缝隙?追究为何会出现这样的一个情况就需要探究下文字对齐方式。

  学汉字,大家都靠田字格;而英语则是靠四线三格的书写格式来练习的。

四线三格.png

(图9)

  其中a/c/z/x等字母,都是以基线(base line)为底部进行排列的;j/g/y/q等字母,则是和底线(bottom line)对齐。而img标签对齐方式,恰恰也是以基线(base line)为底部进行对齐,这样就造成了多出了一条缝隙(基线和底线的距离)

  以上三种方法,将img标签display属性设置成block以及将区块字号大小font-size设置成0,都是破坏了图片以base line对齐的规则;直接设置成bottom line对齐,则更不用说了。至于具体运用的时候,是选哪一种方式进行调配更方便,就看特定的运用场合了。

  前端知识博大精深,前路漫漫,还需继续求索。张鑫旭大神用了十年啃css尚且说自己是新手,更不用说咱这真的前端新手了。欢迎勘误!

记于广州仑头---2018.05.19

版权声明

凡注明为豆芽笔记原创文章,转载请注明出处,谢谢合作!如果文章中图片、文字侵犯到您的权益,请留言联系博主进行处理或者删除!

分享:
如果您觉得这篇文章对您有帮助,请分享到朋友圈或者添加到收藏夹哦!
QR:  对vertical-align的粗浅认识(算是对web前端的520表白?)

扫一扫,用手机打开吧

TAGS:未定义标签
下一篇: 意兴阑珊
上一篇: 楼外楼

共1条评论

访客  2018-05-20 18:17:51 @Ta

有前途

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

用户登录×
用户名:
密    码: