CSS inline-block布局详解

因为进了新公司之后工作太忙,也可能因为自己还是职场小菜鸟,过了两个月了才算真正适应新公司的工作了。

哈哈,就像上次公司签下艾佛森当形象代言人时,台下的记着问艾佛森:有无打算来CBA打篮球,能不能适应CBA的节奏?然后艾佛森说:自己是一名职业运动员,而且是打了10多年的篮球的职业运动员了,不管什么样的比赛形式都能适应,唯一要关心的适不适应当地的风俗和文化。

当然艾佛森说回答记者这个问题是用英语的,上诉只是我的大概翻译。哈哈,作为职业前端工程师的自己,在回答类似问题时,也可以借鉴艾佛森的套路了。作为 职业的 前端工程师在哪工作不是我要考虑的问题,毕竟我是 职业的,做了那么多页面了,我唯一要关心的公司的文化和公司给我的定位是否和我想象的一样,当然还有最重要的一点….就是继续点点点,唉,你们懂得。好了,回到正题,接下来也要讲我们职业里的东西了。

在前端工作中CSS的职业(第一职业)是布局,当然其他职业也很重要,但是我觉得布局应该是最基本也是最重要的了。

在网页中布局中的布局一般用到的是 常规流、浮动和绝对定位,在看完三种定位方式以及格式化上下文详解后,我们知道常规流跟后两种定位方式(浮动和绝对定位)是有别的,虽然我从来也未在W3C官方网站上看到有说浮动是耗浏览器性能的,绝对定位更加耗的说法。但是从他们的英文名理解来看,至少还是有点区别的吧(Normal flow)。这只是我的猜测,也是困扰我的问题之一,绝对定位比较耗资源是真的有么?希望有了解的朋友能帮助我,最好是W3C官方的说法。

不过在实际工作,如果实现一个DEMO,绝对定位比其他方法 节省许多标签而且结构更加清晰的话,选择哪个方法是毋庸置疑的。

然后今天我们要讲的就是被暂时被我认为最省浏览器资源的常规流其中的 display:inline-block 属性,而且 YUI 3 也给出了非常棒的解决 inline-block 之间孔隙的方案,好了接下来我们来重新认识它吧。

inline-block属性

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as a replaced element on the line.

以上W3C对 inline-block的官方说明,意思就是说设置这个值之后对象自己呈递为内联对象,但是对象内的内容作为 block boxes 呈递。也就是说设置了这个值的元素就等于可以在一个可以包含 block boxes的 inline box元素。而话说IE6、7虽然是能支持 inline-block 的,但是在他们眼里display:inline-block只是触发
layout 的一个条件,而非W3C规定的东西。不过我们正好可以利用IE的layout来模拟实现display:inline-block的效果。

inline-block各个浏览器的兼容方案

有两种方法,都是先触发IE的layout,然后再定义 display:inline,让块元素自身呈递为内联对象,如下:

  1. 其中在所有能触发layout的属性中,排除position:absolute 和浮动以及width,height之后,能用的就只有display:inline-block了,如下:
    fn-ib{display:inline-block;}
    fn-i{*display:inline;}
    

    注意 两个display 要先后放在两个 CSS 声明中才有效果,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失。

  2. 第一种方法要放在两个CSS声明中,有时稍不注意就可能搞错了,出发IE的layout还有 zoom:value,代码如下:

    fn-ibz{display:inline-block;*display:inline;*zoom:1}
    

从上我们看出IE6、7是支持属性 inline-block的,只是没有实现W3C的效果,所以我们利用layout再display:inline来模拟inline-block属性的效果。

好了,现在有解决各个浏览器 inline-block 的方案了,接下来要解决是:在不同浏览器下看下面DEMO:

DEMO

内联元素 内联元素 内联元素 内联元素
块元素
块元素
块元素
块元素
inline-block元素在不同浏览器下有间隙是inline自身的性质,不是bug

然后我们发现在支持display:inline-block属性的浏览器中 inline 和 block 元素 display:inline-block 后均会产生水平空隙;而在IE67以及IE(Q)模拟 display:inline-block 后分两种情况:模拟之后的块元素没有间距,而内联元素有间隙。为什么?这里再补充一个知识点:inline元素在默认状态下排列都是有间隙的。所以以上现象就又如下解释了:

支持display:inline-block属性的浏览器,其元素本身就相当于inline元素,所以现代浏览器中都有间隙;而模拟的方案中,因为虽然将块元素设置 display:inline 能使其想行内元素一样水平排列,但是block 元素还是block 元素,不会真的变成inline 元素,所以就没有空隙。

而产生空隙的根本原因是 HTML 中的换行符、空格符、制表符等字符产生了空白符。

inline-block之间的水平间隙问题解决方案

以上我们知道产生间隙的根本原因是HTML 中的换行符、空格符、制表符等字符,俺么我们把标签与标签之间的空格去掉,就不会有问题了么?所以代码如下:

HTML代码如下

<div class="parent"> <strong class="fn-ibz">内联元素</strong><strong class="fn-ibz"> 内联元素</strong><strong class="fn-ibz"> 内联元素</strong><strong class="fn-ibz"> 内联元素</strong> </div> <div class="parent"> <div class="fn-ibz">块元素</div><div class="fn-ibz"> 块元素</div><div class="fn-ibz"> 块元素</div><div class="fn-ibz"> 块元素</div> </div>

DEMO如下

内联元素 内联元素 内联元素 内联元素
块元素
块元素
块元素
块元素
改变DOM结构来解决inline-block之间的间隙问题

以上DEMO代码我是做了处理的,所以我们就看不到间隙。但是问题由来了:

如果是静态的话我们这么做确实没多大问题,假如是后台直接生成的呢?或者以后维护同事看到这代码怎么这么写的,改回来了呢。所以用CSS解决还是最好的途径。我第一次看到这个情况第一反应就是用margin负值来解决,后来知道产生空隙的根本原因之后,觉得margin负值方法虽然能够解决,但是没有对症下药,间隙产生原因的是HTMl间的换行符、空格符、制表符等字符,而间隙会随着字体大小等属性变化而变化。所以就可以用CSS控制字符大小来找出一个。所以参考YUI3中解决的方案,我得到如下代码:

CSS代码

.f-w-p-parent{
    font-size:0;
    letter-spacing:-4px;
    *letter-spacing:normal;
    *word-spacing:-1px;
}
.f-w-p-inner{
    font-size:12px;
    letter-spacing:normal;
    *word-spacing:normal;
    vertical-align: top;
}

DEMO

内联元素 内联元素 内联元素 内联元素
块元素
块元素
块元素
块元素
CSSinline-block的间隙的方案

然后我们分析每一行代码的作用:

  1. font-size的作用:既然是字符引起的,当然是把他们的font-size设置为0,然后再元素内font-size大小设回原来的大小。除了IE6、7以及低版本的chrome和 Safari的其他浏览器inline-block间隙到这一步就没了(低版本的chrome因为设置font-size:0之后,不能让文字自由伸缩,所以不推荐)
  2. word-spacing的作用:在IE6、7以及IE(q)模式下,始终有1px的间距,然后我们就利用word-spacing:-1px来解决(单词之间的距离,只对英文有用,中文没有单词这概念),然后再元素内设回normal。当然使用margin:0 0 0 -1px;也是可以的(貌似代码还少了…)
  3. letter-spacing的作用:剩下就只有低版本的chrome和 Safari了,letter-spacing是调整文字之间的间距,因为letter-spacing跟font-size和font-family甚至不同浏览器都是有差别的,所以按照 《letter-spacing与字体大小/字体关系的数据表》上面的数据来设置,就能将间隙取消。然后因为letter-spacing和word-spaacing在一起容易出事,所以加了 *letter-spacing:normal; 这句代码。
  4. vertical-align:top的作用:最后讲的这个跟间隙无关,设置vertical-align:top是为了让 inline-block 元素以top基线对齐。vertical-align 属性只在 inline、inline-block 元素有效 。而不设置vertical-align:top会出现什么情况?点击CSS详解vertical-align继续了解

inline-block的引用案例

应用明天写。凌晨1点点半了。。。明天继续

inline-block的优点

这里不说inline-block布局比浮动布局节省浏览器资源,我们就得抛弃浮动布局,投向inline-block布局的怀抱(而且官网也没这个说法),毕竟一个事物的出现毕竟有它存在的意义的,而且浮动布局也是认识度最高的布局方法。所以还是那句话,具体情况具体分析,明明使用浮动布局结构更清晰的,你非得用 inline-block而增加了大量亢余代码,就算 inline-block布局 真的像传说中的那样最不耗资源,但是你html代码增加了不也是耗资源了么。

就算有,我也觉得不大。所以改用绝对定位就用绝对定位,改用浮动就用浮动,如果碰到一个情况使用 inline-block 能更好的解决问题,那就大胆的用吧。毕竟inline-block相较与浮动和绝对定位还是有一些有点的。

  1. 能使用vertical-align和text-align实现垂直、水平、两边、基线等等对齐,而且还是自适应的哦。
  2. 因为自身原因,所以特别适合流体布局。高度和宽度不用定死。
  3. 明天继续。。。。
  4. 优点n+1:传说的不耗资源,(哈哈,多多益善)

上面改变DEMO结构来解决间隙问题大家也看到了,他还是有间隙的,不是我骗人啊,是后台自己给我变了。本文章所有实验DEMO

本文源链接:http://www.html5jscss.com/css-inline-block.html

转载请注明《CSS inline-block布局详解》| html5jscss

评论关闭了.