登录  /  注册
首页 > web前端 > css教程 > 正文

CSS中display: inline-block的用法解析

不言
发布: 2019-01-02 10:25:56
转载
14913人浏览过

本篇文章给大家带来的内容是关于css中display: inline-block的用法解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

迷之间隙

我们创建一个导航列表,并将其列表 item 设置为 inline-block,主要代码如下:

<div>
  <div><a>我</a></div>
  <div><a>我</a></div>
  <div><a>我</a></div>
</div>
.nav {
  background: #999;
}
.nav-item{
  display:inline-block; /* 设置为inline-block */
  width: 100px;
  background: #ddd;
}
登录后复制

效果图如下:

713151134-5c2b8ef4a66fe_articlex.png

我们从效果图中可以看到列表 item 之间有一点小空隙,但是我们在代码中并没有设置 margin 水平间距。那么这个空隙是如何产生的呢?

这是因为我们编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的,且对于多个连续的空白符浏览器会自动将其合并成一个,故产生了所谓的间隙。

对于上面实例,我们在列表 item 元素之间输入了回车换行以方便阅读,而这间隙正是这个回车换行产生的空白符。

同样对于所有的行内元素(inline,inline-block),换行都会产生空白符的间隙。

如何消除空白符

从上面我们了解到空白符,是浏览器正常的表现行为。但是对于某些场景来说,并不美观,而且间隙大小非可控,所以我们往往需要去掉这个空白间隙。一般来说我们有两种方法来去掉这个换行引起间隙:代码不换行和设置 font-size。

代码不换行

我们了解到,由于换行空格导致产生换行符,因此我们可以将上述例子中的列表 item 写成一行,这样空白符便消失,间隙就不复存在了。其代码如下:

<div>
  <div>导航</div>
<div>导航</div>
<div>导航</div>
</div>
登录后复制

但考虑到代码可读及维护性,我们一般不建议连成一行的写法。

设置 font-size

首先要理解空白符归根结底是个字符,因此,我们可以通过设置 font-size 属性来控制产生的间隙的大小。我们知道如果将 font-size 设置为 0,文字字符是没法显示的,那么同样这个空白字也没了,间隙也就没了。

于是顺着这个思路就有了另一个解决方案:通过设置父元素的 font-size 为 0 来去掉这个间隙,然后重置子元素的 font-size,让其恢复子元素文字字符。

所以该方法代码如下:

.nav {
  background: #999;
  font-size: 0; /* 空白字符大小为0 */
}
.nav-item{
  display:inline-block;
  width: 100px;
  font-size: 16px; /* 重置 font-size 为16px*/
  background: #ddd;
}
登录后复制

使用该方法时需要特别注意其子元素一定要重置 font-size,不然很容易掉进坑里(文字显示不出来)。

对齐问题

由于 inline-block 属于行内级元素,所以 vertical-align 属性同样对其适用。

在正式讲解 vertical-align 之前,我们需要先说一些基本概念。

中线、基线、顶线、底线

中线(middle)、基线(baseline)、顶线(text-top、底线(text-bottom))是文本的几个基本线,其对应位置如下图:

  • 基线(base line):小写英文字母x的下端沿。

  • 中线(middle line):小写英文字母x的中间。

  • 顶线(text-top):父元素 font-size 大小所组成的一个内容区域的顶部

  • 底线(text-bottom):父元素 font-size 大小所组成的一个内容区域的底部

  • vertical-align 的值

vertical-align 只接受8个关键字、一个百分数值或者一个长度值。下面我们将看看各关键字如何作用于行内元素。

  1. baseline    默认元素的基线与父元素的基线对齐。

  2. sub    将元素的基线与其父元素的下标基线对齐。

  3. super    将元素的基线与其父代的上标 - 基线对齐。

  4. text-top    将元素的顶部与父元素的字体顶部对齐。

  5. text-bottom    将元素的底部与父元素的字体的底部对齐。

  6. middle    将元素的中间与基线对齐加上父元素的x-height的一半。

  7. top    将元素的顶部和其后代与整行的顶部对齐。

  8. bottom    将元素的底部和其后代与整行的底部对齐。

  9.    将元素的基线对准给定长度高于其父元素的基线。

  10.    像值,百分比是line-height属性的百分比

以上就是CSS中display: inline-block的用法解析的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:segmentfault.网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号