CSS 基础系列:inline-blcok和float

1.比对:

简单比对一下div+css布局中的inline-block和float的特点,同时附上使用inline-block之后元素之间产生空隙的解决方法。 虽然设置浮动跟设置inline-block有些特征类似,但两者的区别还是非常明显的:

  • 文档流(Document flow): 浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。
  • 水平位置(Horizontal position): 很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
  • 垂直对齐(Vertical alignment): 在两个div的高度不同时,两种方式的对齐效果也不相同:

图一:display:inlne-block属性修饰的元素没有脱离文档流,当然会与在正常的文档流中的元素一样采取的底端对齐方式。 图二: float属性修饰的元素在一定程度上脱离了普通文档流的限制,只用考虑向某个方向浮动,所以会产生如图的效果。 区别来了!!!如果是使用display:inlne-block,则我们可以通过vertical-align来控制两个元素的对齐方式: 我们为两个div分别添加一个属性:vertical-align:middle

<div class="myContainer">
     <div class="div1" style="display: inline-block;vertical-align: middle">
     </div>
     <div class="div2" style="display: inline-block;vertical-align: middle">
     </div>
</div>

查看一下运行效果:

如图,div1出现在了div2的居中位置。假如使用的是float,我们是没办法使div1位于div2的中间位置的。

  • 空隙(Whitespace): inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空隙。而浮动元素会忽略空白节点,互相紧贴。

2.总结:

什么时候使用inline-block、什么时候使用float,这取决于你的设计稿跟解决方法。通常来说,当你需要控制元素的垂直对齐跟水平排列时,使用inline-block;当你需要让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空隙问题时,使用浮动。

3.如何消除inline-block带来的空隙;

3.1 思路一:

元素间的间隙出现的原因是元素标签之间的空格,把空格去掉间隙自然就会消失。来看以下几种写法:

  • 写法一/不建议使用:
<div class="demo">
    <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
</div>
  • 写法二:
<div class="demo">
    <span>我是一个span
    </span><span>我是一个span
    </span><span>我是一个span
    </span><span>我是一个span</span>
</div>
  • 写法三:
<div class="demo">
    <span>我是一个span</span><!--
    --><span>我是一个span</span><!--
    --><span>我是一个span</span><!--
    --><span>我是一个span</span>
</div>

3.2 思路二:

取消span的结束标签,这样间隙就没有了。为了兼容IE6/IE7,最后一个标签需要闭合。

<div class="demo">
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span</span>
    </div>
.demo span{
     background:#ddd;
     display: inline-block;
}

3.3 思路三:

不管是思路一还是思路二,都只适用于写静态页面的时候,一旦HTML是后台生成,就不生效了。 这时还有一个办法:在父容器上使用font-size:0。

<div class="demo">
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
</div>
.demo {font-size: 0;}
.demo span{
        background:#ddd;
        display: inline-block;
        font-size: 14px; /*要设置相应的字号*/
}

原理: 换行和回车会给各个span之间带来空格,而空格会被当成字符处理,因此通过给父元素设置字体大小为0,则空格字符大小也为0,相当于消除了其大小。需要注意的是,一定要额外设置span中的字体大小,否则会继承父元素的0大小字体。

3.4 思路四:

上面的思路其实已经很完美,但可惜不兼容Safari,以下给出终极方案,即font-size:0配合letter-space:-N px

.finally-solve {
letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px;
font-size: 0;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户6269484的专栏

C和C++混合编译,extern和extern "C"

extern的问题在于你不知道这个关键字出现的时候到底是声明还是定义。  谨记:声明可以多次,但是定义只能有一次。

14010
来自专栏中科院渣渣博肆僧一枚

Python 的 .py 与 Cython 的 .pxd .pyx .pyd 文件格式之间的主要区别

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

10430
来自专栏跟Qt君学编程

翻译 | 您没有做错(线程)

  这篇文章是关于QThread的使用的。这是对我当时的同事Brad三年前的博客帖子的回答:“您做错了”。

5410
来自专栏跟Qt君学编程

qDebug | std::cout | printf性能表现

  通过使用qDebug,std::cout,printf在1秒内打印的字符串数据。

9420
来自专栏老九学堂

Java调用native本地方法实例:控制台下的中英文字符对齐问题

小伙伴们在初学Java的时候一般都是采用Eclipse或其他IDE环境,中英文混合时的对齐问题想必都或多或少地困扰过大家。

12510
来自专栏微卡智享

Android划矩形截屏并加入OCR识别

前面文章《Android SurfaceVeiw划矩形截屏存放到RecyclerView中》已经通过手指划矩形把图片存入到RecyclerView中了,以前也加...

13510
来自专栏数据猿

什么将会替代 JavaScript 呢?

JavaScript 正在蓬勃发展。但由于 WebAssembly 的出现,它的衰落可能只是一个时间问题。

11020
来自专栏光城(guangcity)

STL 设计之 EBO(空基类优化)

本节从空类开始,到 STL 内部,到测试,再到我们自己实现一个 EBO,对比性能,最后再测试,总结。

6620
来自专栏A周立SpringCloud

Java new一个对象的过程中发生了什么?

java在new一个对象的时候,会先查看对象所属的类有没有被加载到内存,如果没有的话,就会先通过类的全限定名来加载。加载并初始化类完成后,再进行对象的创建工作。

6610
来自专栏sofu456

UE4 vscode

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

17730

扫码关注云+社区

领取腾讯云代金券

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