cssjshtml css之display:inline-block布局

1.解释一下display的几个常用的属性值,inline , block, inline-block

  • inline(行内元素):
    1. 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 
    2. 不能更改元素的height,width的值,大小由内容撑开. 
    3. 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行.
  • block(块级元素):
    1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度. 
    2. 能够改变元素的height,width的值. 
    3. 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
  •  inline-block(融合行内于块级):
    1. 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
    2. 用通俗的话讲,就是不独占一行的块级元素。如图:

图一:

图二:

两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block的效果几乎和浮动一样,但也有不同,接下来讲一下inline-block和浮动的比较。

2.inline-block布局 vs 浮动布局

    a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果

    b.相同之处:能在某程度上达到一样的效果

  我们先来看看这两种布局: 图一:display:inline-block

图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下:

>>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲)

  c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果: 图三: 

图四: 

>>从图3,4可以看出浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,不然就会出现图三的效果,而inline-block就不会。

3.inline-block存在的小问题:

  a.上面可以看到用了display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

  b.去除空隙的方法:   1.对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙   现在这种方法已经可以兼容各种浏览器,以前chrome浏览器是不兼容的 图一:

  c.浏览器兼容性:ie6/7是不兼容 display:inline-block的所以要额外处理一下:   在ie6/7下:   对于行内元素直接使用{dislplay:inline-block;}   对于块级元素:需添加{display:inline;zoom:1;}

4.总结:

  display:inline-block的布局方式和浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的:   a.对于横向排列东西来说,我更倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。   b.对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给inline-block了。

作者:Ry-yuan

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C++开源框架源码分析

GRPC-C++源码分析(十)--Register

33030
来自专栏量子位

用三维Demo看懂各种优化算法,还有C++程序员福音

机器学习里的优化算法很多,比如SGD、Adam、AdaGrad、AdaDelta等等,光是它们的迭代公式就已经够让人头疼。

8830
来自专栏王沛文的专栏

kotlin的reified

对于我这种写惯了C++的人来说Java的泛型真的很难用。运行时没有类型信息,进一步导致像是jackson之类的库在做convertValue之类的操作时,方法虽...

19510
来自专栏ccf19881030的博客

有关Java中两个整数的交换问题

  在程序开发的过程,要交换两个变量的内容,是一种比较常见的事情。在排序算法中,就有一种就叫做“交换排序法”。在所有的排序算法,交换要排序的集合中的两个元素,几...

18520
来自专栏ccf19881030的博客

关于计算机工作方向的几点想法

   都快毕业一年了,呆在现在的公司很闲,没做过多少实际的项目, 最近在做系统软件集成方面的东西,涉及到编程的东西很少,有做别的想法。

16440
来自专栏量子位

好消息!C++程序员也能用上NumPy了

假如你很“不幸”是一名从事机器学习开发的C++程序员,一定很羡慕Python,因为很多热门的软件包都是专门为Python开发。C++程序员只能看着眼馋,甚至包括...

13020
来自专栏量子位

81个关键点,帮你紧密追踪女神的脸,比Dlib还多了13点 | 有代码

Niko说,他在Dlib库68个关键点的基础上加了13个,把前额也包含在追踪范围里。

13930
来自专栏程序员的成长之路

实地探访:月薪 12K 的北京程序员是怎么工作生活的?

在当今社会,有网络的地方就有江湖,有江湖的地方就有程序员。我给大家在这里讲一个生活在北京的程序员,也就是生活中时常被提起的爱受伤的傻小子——白公子。

10050
来自专栏ccf19881030的博客

Java中接口和抽象类的区别

简单来说, 接口是公开的,里面不能有私有的方法或变量,是用于让别人使用的,而抽象类是可以有私有方法或私有变量的,

11640
来自专栏ccf19881030的博客

VC++ UDP网络控制台程序

先启动服务端UDPServer程序,再启动客户端UDPClient程序,运行结果如下:

10930

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励