既爱又恨的inline-block

原创 2016年09月15日 20:59:22

今天被inline-block坑了

初出茅庐,第一天实习的我就被inline-block坑了,在平时的练习中从未碰到这个坑,幸亏公司的一个热心的小伙伴指点,我才解决。也怪我学艺不精啦。好了,来说说我是怎么被坑的吧。

OK,模拟一下场景,怎么调都不对,愚蠢的我居然没有去想inline-block的锅。
这里写图片描述 图(1)
我们从图中可以看到中间黄色方块的底部是和旁边红色方块的英文字对齐的,和蓝色方块的中文字到倒是不对齐。
这里写图片描述图(2)。
此时愚蠢的我会问,为啥排列的这么奇怪,第一,红色和蓝色对齐,黄色在父盒子的顶部;第二,黄色盒子的底部和黄色盒子的英文字的底部居然是对齐的;第三,我明明没有给盒子至今设置行距,为啥行距存在?带着这三个问题,我查看资料,亲自demo,进行总结和补全。

baseline

热心的网友为我们分享了baseline的文章。原来baseline是这样的,在我们的英文作业本上是一行有四道杠,每个英文字呢都是基于第三道杠写的,这道杠就成为基线,在我们的前端中,网页显示文字的时候也一样,默认是以baseline对齐。比如我们写“hj吃饭了没有”,“h”的底部就是baseline的位置,‘j’和“吃饭了没有”都要以baseline进行显示。
浏览器的文字以baseline为基准对齐,当然可以设置其他对齐方式,如vertical-aling。vertical-align只在inline和inline-block元素上应用,因为为这些元素需要排列在一行。现代浏览器几乎都按baseline来对齐inline-block元素,但是IE6/7对inline-block并不 以baseline对齐,它以文字最底端对齐,和img不一样。
这个baseline就解释了第一和第二个问题,三个盒子都是inline-block元素,他们的基线是红盒子的文字”ID”的底部,所以,黄盒子才会要和”ID”的底部对齐,既然要和这根基线对齐,那么势必要将两个不同颜色的盒子挤下去啦。 使用vertical-align就可以改变这种排列,当然也可以将display:inline-block换成float:left.

inline-block元素的间隙

都可以看到inline-block元素之间有间隙,那是因为inline-block包含html空白节点,如果html元素都进行换行,并且inline-block就会垂涎html空白节点,那么如何去除这个空白节点呢?

删除html空白节点

不换行:
这里写图片描述

使用负边距

margin-left或者margin-right,当然有些文章介绍使用”-0.25em”来解决,这也是跟元素的字号有极大的关系。所以我个人建议不使用负的margin来解决这样的问题。

设置父元素字体为0

设置父元素的字体为“0”,然后在“inline-block”元素上重置字体需要的大小,这样处理在Firexfox,chrome等浏览器下是达到了效果,可是在Safari下可问题依然存在。

丢失结束标签

这里写图片描述
这种方法虽然能达到各浏览器的兼容,但还是有一个前提,那就是“DOCTYPE”要选择对,在“XHTML”下可就问题又出来了。个人非常非常不推荐。

jquery方法

这里写图片描述

全兼容的样式解决方法

这里写图片描述
好吧,到这里结束了,我所讲的也是不够准确和全面的。

版权声明:本文为博主原创文章,未经博主允许不得转载。

为什么我们批评C++?又爱又恨的垃圾回收机制

1.前言 Java的爱好者们经常批评C++中没有提供与Java类似的垃圾回收(Gabage Collector)机制(这很正常,正如C++的爱好者有时也攻击Java没有这个没有那个,或者这个...
  • shenziheng1
  • shenziheng1
  • 2016年12月06日 13:49
  • 542

又爱又恨

亲爱的聂大夫:         你好!三周不见,打扰您了。我最近感觉不太正常,所以想看看病。          我先把我的症状描述一下:                   一听到来短信的滴声,或者一...
  • yqxx
  • yqxx
  • 2008年05月11日 15:33
  • 371

当时若爱韩公子,埋骨成灰恨未休

这是李商隐的诗,出自旧版的《笑傲江湖》,我每天练字都要把这首诗抄一遍。小师妹死了以后,令狐冲忍痛回到华山岳灵珊旧居,发现抽屉里都是当年令狐冲为她打造的手工玩具,难为她整整齐齐,尽数好好的收在这里。睹物...
  • u013111221
  • u013111221
  • 2017年08月30日 20:51
  • 469

又爱又恨字符串

我很喜欢操纵字符串.因为这样你可以得到自己想要的字符串,所以我很爱它.但是我又很多时候不能够完全操纵它,因为C语言,C++语言,VB乃至MFC中操纵字符串的方法都不一样,复杂度,可操作性,便捷性都不一...
  • huyoo
  • huyoo
  • 2004年10月12日 17:13
  • 1162

大整数的乘法-列表法

大整数的乘法          在计算机中,长整形(long int)变量的范围是-2147483648至2147483647,因此若用长整形变量做乘法运算,乘积最多不能超过10位数。即便用双精度...
  • zxasqwedc
  • zxasqwedc
  • 2013年10月07日 18:59
  • 2044

又爱又恨的Python

刚才同一高手交流,被告之,Python无任何可用的工具能自动导出C++的类。即使有,也只能导出很初级的类。 看来,我想尝试做引擎封装的工作量又会变得很大了。郁闷极了。...
  • baickl
  • baickl
  • 2006年06月05日 13:19
  • 1057

又爱又恨的家伙

11年3月开始使用Android手机和3G网络,感受到了Android魅力,更加卖劲学习Android开发了。5月份,因为Android迎来实习的机会,但是,后来因为算法不过关吹了。 后来反省,...
  • zhaorihe
  • zhaorihe
  • 2012年02月14日 17:13
  • 90

令人又爱又恨的const

关于C的关键字——const的理解和用法    const在C中的用法很灵活(相信C++中也一样),个人感觉对之既爱又恨,有时候感觉const很好用,同时又经常会因为它的优点而犯错,犯错的原因除了粗心...
  • dyd653996724
  • dyd653996724
  • 2010年03月20日 08:51
  • 185

MySQL数据库 CEO 对甲骨文既爱又恨

  • zgqtxwd
  • zgqtxwd
  • 2008年04月30日 16:50
  • 131

MySQL CEO对甲骨文既爱又恨

  • zgqtxwd
  • zgqtxwd
  • 2008年04月30日 14:15
  • 85
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:既爱又恨的inline-block
举报原因:
原因补充:

(最多只允许输入30个字)