小编给大家分享一下CSS中如何使用显示:inline-block,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
<强>迷之间隙
我们创建一个导航列表,并将其列表项设置为inline-block,主要代码如下:
效果图如下:
我们从效果图中可以看到列表项之间有一点小空隙,但是我们在代码中并没有设置利润率水平间距。那么这个空隙是如何产生的呢?
<强>这是因为我们编写代码时输入空格,换行都会产生空白符。而浏览器是不会忽略空白符的,且对于多个连续的空白符浏览器会自动将其合并成一个,故产生了所谓的间隙。
对于上面实例,我们在列表项元素之间输入了回车换行以方便阅读,而这间隙正是这个回车换行产生的空白符。
<强>同样对于所有的行内元素(内联,inline-block),换行都会产生空白符的间隙。
如何消除空白符
从上面我们了解到空白符,是浏览器正常的表现行为。但是对于某些场景来说,并不美观,而且间隙大小非可控,所以我们往往需要去掉这个空白间隙。一般来说我们有两种方法来去掉这个换行引起间隙:代码不换行和设置字体大小。
代码不换行
我们了解到,由于换行空格导致产生换行符,因此我们可以将上述例子中的列写表项成一行,这样空白符便消失,间隙就不复存在的了。其代码如下:
但考虑到代码可读及维护性,我们一般不建议连成一行的写法。
设置字体大小
首先要理解空白符归根结底是个字符,因此,我们可以通过设置字体大小属性来控制产生的间隙的大小。我们知道如果将字体大小设置为0,文字字符是没法显示的,那么同样这个空白字也没了,间隙也就没了。
于是顺着这个思路就有了另一个解决方案:通过设置父元素的字体大小为0来去掉这个间隙,然后重置子元素的字体大小,让其恢复子元素文字字符。
所以该方法代码如下:
使用该方法时需要特别注意其子元素一定要重置字体大小,不然很容易掉进坑里(文字显示不出来)。
对齐问题
由于inline-block属于行内级元素,所以vertical-align属性同样对其适用。
在正式讲解vertical-align之前,我们需要先说一些基本概念。
中线,基线、顶线,底线
中线(中间),基线(基线),顶线(text-top,底线(text-bottom))是文本的几个基本线,其对应位置如下图:
基线(基线):小写英文字母x的下端沿。
<李>中线(中线):小写英文字母x的中间。
<李>顶线(text-top):父元素字体大小大小所组成的一个内容区域的顶部
<李>底线(text-bottom):父元素字体大小大小所组成的一个内容区域的底部
<李>vertical-align的值
vertical-align只接受8个关键字,一个百分数值或者一个长度值。下面我们将看看各关键字如何作用于行内元素。
基线,,默认元素的基线与父元素的基线对齐。
<李>子,,将元素的基线与其父元素的下标基线对齐。
<李>超,,将元素的基线与其父代的上标——基线对齐。
<李>text-top,,将元素的顶部与父元素的字体顶部对齐。
<李>text-bottom,,将元素的底部与父元素的字体的底部对齐。
<李>中间,,将元素的中间与基线对齐加上父元素的x坐标的一半。
<李>最高,,将元素的顶部和其后代与整行的顶部对齐。
