菜单

CSS魔法堂:”那非是bug,是若莫亮堂我!” by inline-block

2018年11月16日 - CSS/CSS3

CSS魔法堂:”那不是bug,是你切莫了解我!” by inline-block

2016/05/10 · CSS ·
inline-block

正文作者: 伯乐在线 –
^-^肥仔John
。未经作者许可,禁止转载!
迎接加入伯乐在线 专栏撰稿人。

1、诸如span的inline元素在叫一个flex的时节会默认变成block元素。
2、如果无安装flex-wrap:wrap的言辞,宽度再不行之子元素,即使flex-basis:100%;也会见挤在一行内。
3、以上之疑云总结自
季型之老二个例证
4、flex一方始默认的主轴是程度方向,侧轴是直方向,但是如果下flex-direction:column;以后主轴方向虽成为了僵直方向,侧轴就变成了档次方向,这同样点使铭记。
5、flex的align-content针对的几近条主轴进行的操作。
6、关于flex-shrink,它的默认值是1,即当子元素总宽度超过父元素宽度的时,不设置换行的言语都见面挤在一行内,并且平分宽度,如果想只要让子元素宽度不抽,设置flex-shrink:0;这样见面漫起,但是子元素保持了原先的涨幅。思同一相思轮播当中view的做法。
7、inline-block会冒出有的纪念不知底的bug,将一个span元素设置也inline-block以后撑起来父元素,但哪怕是体制重置了后来尽然会多发生5px的莫大,不理解原委。
8、href、url和src的分别:href和url只是起平等种植连接,它们同链接的因素保持在同栽线一样的涉及,这种链接是绵绵的,即使是将对方解析完成后仍然这样,所以若及时等同连中断以后或是因元素复制以后,会面世浅之双重连接过程,复制的新因素会发生浅之不论是内容时;但是src不一样,一旦src后面的资源加载与分析了,它只内容就一定给下充斥到了dom上,所以即便复制移动是元素,也未需要还还链接,所以呢非会见发浅之不论是内容。心想环形轮播的图纸克隆问题。
9、通过flex-basis设置主轴上倾向,通过order设置排列位置,看阮一峰关于圣杯布局之代码。
10、如果假定当一屏上一定底栏的说话,只待将footer和header高度固定,整个页面flex-direction:column;然后以重点的content内容装flex:1;即可。

前言

于来个待既要水平排版又如设置一定高宽时,我虽会回忆display:inline-block,还有为支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发现盒子中无端端多了单不得选择的空白符,于是想尽办法修复这个bug。

直至一上拜读了@一丝姐、@HAX等圣贤的秘笈后才醒,原来自己错了。那不是bug,是我不懂而已。

先行者——IE5.5中的inline-block

当我们吧永葆IE5.5/6/7只要弥加这段hack时*display:inline;*zoom:1,总以为于IE8开始才支撑display:inline-block属于性值。其实从IE5.5开始已支撑了,只是IE5.5/6/7支撑之是IE的自定义标准,而自从IE8开始则是永葆CSS2.1正规而已。
https://msdn.microsoft.com/library/ms530751%28v=vs.85%29.aspx

The inline-block value is supported starting with Internet Explorer
5.5. You can use this value to give an object a layout without
specifying the object’s height or width.

XHTML

<style type=”text/css”> .bk1{ background: #06F; } .bk2{
background: #F60; } .item{ width: 100px; height: 100px;
display:inline-block; } </style> <div class=”bk1
item”></div> <div class=”bk2 item”></div> <span
class=”bk1 item”></span> <span class=”bk2
item”></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
.bk1{
  background: #06F;
}
.bk2{
  background: #F60;
}
.item{
  width: 100px;
  height: 100px;
  display:inline-block;
}
</style>
<div class="bk1 item"></div>
<div class="bk2 item"></div>
<span class="bk1 item"></span>
<span class="bk2 item"></span>

图片 1

经过CSS2.1雪礼的我们对上述内容未禁会发出少独谜:

  1. 为啥block-level
    element设置了display:inline-block继要么垂直方向排列呢?
  2. 为啥inline-level
    element设置了display:inline-block晚里无好奇的间隙为?

尚记杨过是哪成为神雕大侠的吧?不就是是被断右臂后发现左才是真正好啊:)
哼了,其实自己的意思是丢弃过去对display:inline-block的体会,重新来喻IE5.5/6/7下蛋之它才是强项道理啦。

对问题1,首先上面的援很直白地报我们——display:inline-block会触发hasLayout,然后就是从未了。所以block-level
element依然是block-level element,不见面一如既往夜成为了inline-level
element的。结论:display:inline-block只会触发hasLayout,而要素本该怎么排版还是怎么排版。关于hasLayout的始末而参看《CSS魔法堂:hasLayout原来是这样!》

对问题2,我们先看是不是真没余吧!

XHTML

<style type=”text/css”> .bk1{ background: #06F; } .bk2{
background: #F60; } .item{ width: 100px; height: 100px;
display:inline-block; } </style> <span class=”bk1
item”></span> <span class=”bk2 item”></span>
<br/><br/> <span class=”bk1 item”>bk1</span>
<span class=”bk2 item”></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
.bk1{
  background: #06F;
}
.bk2{
  background: #F60;
}
.item{
  width: 100px;
  height: 100px;
  display:inline-block;
}
</style>
<span class="bk1 item"></span>
<span class="bk2 item"></span>
<br/><br/>
<span class="bk1 item">bk1</span>
<span class="bk2 item"></span>

图片 2

呈现不善了,在前面一个盒子内补充加些文本就起余了?其实就确实跟display:inline-block无关的,大家就是放大了他吧!来达成上堂证供!

XHTML

<style type=”text/css”> .bk1{ background: #06F; } .bk2{
background: #F60; } <span class=”bk1″>no line break</span>
<span class=”bk2″> has line break </span>

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.bk1{
  background: #06F;
}
.bk2{
  background: #F60;
}
<span class="bk1">no line break</span>
  
  
<span class="bk2">
has line break
</span>

图片 3

可以看出蓝色块k和革命块h间存在一个空格,而红块k后也存在一个空格。可是代码中我们来看蓝红色块间有4单&#x20HTML实体,为底就来一个空格呢?而红色块被只是转移了行而已,怎么就发生只空格呢?

先丢结论:上面两端代码都是white space、white space
collasping再作祟。

White space不仅是空格符那么粗略

初看之下以为就是是空格键,其实white
space是平组空白字符和换行符组成。查看unicode字符集我们见面发现出一样十分堆空白字符(如NO-BREAK
SPACE等),但HTML只把ASCII space( )ASCII tab( )ASCII form feed(&#x000C)Zero-width space(​)纳入white
space囊中,另外还拿line
break(换行符)carriage return(
)
line feed( )同它俩的组成纳入white
space中。

inter-word space——White space的用途之一

西文是因空格来分隔单词的,而汉字中则无需空格分隔,但为统一西文、东亚跟CJK的排版,于是抽象出一个称作吧inter-word
space的定义用于分隔词义单元,white space则当inter-word
space的值域,而定义域就是言语信息。如西文以ASCII SPACE作为inter-word
space,而泰文则因Zero-width space作为inter-word
space,汉语则无inter-word
space,所以word-spacing属性不影响汉字中的去,本来无一致东西何处惹尘埃呢。字形、单词里的程度距离

White space collapsing的玩法

兼容性问题又来了,因为各浏览器的兑现清一色不尽相同。

XHTML

<style type=”text/css”> span{background:#F60;} </style>
<div><span> before</span></div>
<div><span> before</span></div>
<div><span>after </span></div>
<div><span>after </span></div>
<div><span>after </span></div>
<div><span>one two</span></div>
<div><span>one two</span></div>
<div><span> </span></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
  span{background:#F60;}
</style>
<div><span>
 
before</span></div>
<div><span>
 
before</span></div>
<div><span>after
 
</span></div>
<div><span>after
 
</span></div>
<div><span>after
</span></div>
<div><span>one
two</span></div>
<div><span>one
two</span></div>
<div><span> &#x000C;
</span></div>

** chrome43 **

  1. 对此起始标签以及第一单non-white-space字符间的white-space字符串,以carriage return(
    )
    作white-space合并单元的起始符,最后保留各合并单元的合并结果。
  2. 终结标签及终极一个non-white-space字符间的white-space字符串,以carriage return(
    )
    用作white-space合并单元的结符,最后保留各合并单元的联结结果。
  3. 词义单元内的white-space字符串,以carriage return(
    )
    用作white-space合并单元的分界符,最后保留各合并单元的统一结果。
  4. 签内就含white-space字符串,那么这些white-space字符串将吃忽视。

图片 4
** FF5.0 **

  1. 对起始标签及第一独non-white-space字符间和了标签以及最终一个non-white-space字符间的white-space字符串将被忽视。
  2. 词义单元内的white-space字符串,以carriage return(
    )
    作white-space合并单元的分界符,最后保留各合并单元的汇合结果。
  3. 签内仅含white-space字符串,那么这些white-space字符串将被忽视。

图片 5
** IE8+ **

  1. 对此起始标签和第一单non-white-space字符间和终止标签及终极一个non-white-space字符间的white-space字符串将于忽视。
  2. 词义单元中的white-space字符串,合并为1单(ASCII space)字符。
  3. 标签内单包含white-space字符串,那么这些white-space字符串将让忽略。

图片 6

** IE5.5/6/7 **

  1. 对此起始标签以及第一单non-white-space字符间的white-space字符串将于忽略。
  2. 央标签及终极一个non-white-space字符间的white-space字符串,合并为1单(ASCII
    space)字符。
  3. 词义单元中的white-space字符串,合并为1独(ASCII space)字符。
  4. 标签内单包含white-space字符串,那么这些white-space字符串将于忽视。

图片 7
合并单元:合并单元包含0到N个white-space字符串,最终合并为0到1单white-space字符
SGML描述B.3.1 Line
breaks

specifies that a line break immediately following a start tag must be
ignored, as must a line break immediately before an end tag. This
applies to all HTML elements without exception.

XHTML

<A>My favorite Website</A> <A> My favorite Website
</A>

1
2
3
4
<A>My favorite Website</A>
<A>
My favorite Website
</A>

望文生义翻译法:标签以及正文间的line
breaks要被忽视掉!也便是上下两种HTML格式的渲染效果应同样。实际上除了IE5.5/6/7客其余浏览器都遵守之一规定的。也许你晤面说点的试验不是已经说明chrome43免信守这法虽也?其实

XHTML

<A> My favorite Website </A>

1
2
3
<A>
My favorite Website
</A>

HTML格式等价于<A>#x000A;My favorite Website#x000A;</A>而不是<A>#x000D;#x000A;My favorite Website#x000D;#x000A;</A>。现在大家都知了咔嚓:)

纠缠到此地自己怀念大家都起点晕了,到底这与问题2来吗关系吧?先不用急嘛,我们先行记住两沾:

  1. IE5.5/6/7面临”结束标签和最终一个non-white-space字符间的white-space字符串,合并为1单(ASCII
    space)字符”;
  2. IE5.5/6/7受到特字符(串)可以看做词义单元,而IE8+中inline-level
    element也当作词义单元。
XHTML

&lt;span class="bk1 item"&gt;&lt;/span&gt; &lt;span class="bk2
item"&gt;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt; &lt;span class="bk1
item"&gt;bk1&lt;/span&gt; &lt;span class="bk2 item"&gt;&lt;/span&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d17e73c7306787940-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73c7306787940-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d17e73c7306787940-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73c7306787940-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d17e73c7306787940-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d17e73c7306787940-1" class="crayon-line">
&lt;span class=&quot;bk1 item&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f6d17e73c7306787940-2" class="crayon-line crayon-striped-line">
&lt;span class=&quot;bk2 item&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f6d17e73c7306787940-3" class="crayon-line">
&lt;br/&gt;&lt;br/&gt;
</div>
<div id="crayon-5b8f6d17e73c7306787940-4" class="crayon-line crayon-striped-line">
&lt;span class=&quot;bk1 item&quot;&gt;bk1&lt;/span&gt;
</div>
<div id="crayon-5b8f6d17e73c7306787940-5" class="crayon-line">
&lt;span class=&quot;bk2 item&quot;&gt;&lt;/span&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


IE5.5/6/7下等价于  


XHTML

&lt;span&gt; &lt;/span&gt; &lt;br/&gt;&lt;br/&gt; &lt;span&gt;bk1
&lt;/span&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d17e73ca280682483-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73ca280682483-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d17e73ca280682483-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73ca280682483-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d17e73ca280682483-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d17e73ca280682483-1" class="crayon-line">
&lt;span&gt;
</div>
<div id="crayon-5b8f6d17e73ca280682483-2" class="crayon-line crayon-striped-line">
&lt;/span&gt;
</div>
<div id="crayon-5b8f6d17e73ca280682483-3" class="crayon-line">
&lt;br/&gt;&lt;br/&gt;
</div>
<div id="crayon-5b8f6d17e73ca280682483-4" class="crayon-line crayon-striped-line">
&lt;span&gt;bk1
</div>
<div id="crayon-5b8f6d17e73ca280682483-5" class="crayon-line">
&lt;/span&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


对比一下上面的规则,空隙自然就有了。  
IE8+下等价于  


XHTML

&lt;span&gt;&nbsp; &nbsp;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;
&lt;span&gt;&nbsp; &nbsp;&lt;/span&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d17e73cd347104087-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73cd347104087-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d17e73cd347104087-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73cd347104087-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d17e73cd347104087-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d17e73cd347104087-1" class="crayon-line">
&lt;span&gt;&amp;nbsp;
</div>
<div id="crayon-5b8f6d17e73cd347104087-2" class="crayon-line crayon-striped-line">
&amp;nbsp;&lt;/span&gt;
</div>
<div id="crayon-5b8f6d17e73cd347104087-3" class="crayon-line">
&lt;br/&gt;&lt;br/&gt;
</div>
<div id="crayon-5b8f6d17e73cd347104087-4" class="crayon-line crayon-striped-line">
&lt;span&gt;&amp;nbsp;
</div>
<div id="crayon-5b8f6d17e73cd347104087-5" class="crayon-line">
&amp;nbsp;&lt;/span&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


inline-level
element整体作为词义单元,从外部看根本不用管里面具体字符串是什么。

后来者居上——CSS2.1叙负之inline-block

相对IE自定义之inline-block,CSS2.1引入的inline-block就吓明多矣,它举行了简单起事:

  1. 用元素变性为inline-level element;
  2. 深受要素来新的BFC。

扑灭尾行者

今日咱们终于知道通过display:inline-block进行元素的水准排版时,为底会生出只讨人厌的同屁虫了,那剩下的行事自然是去如快的啦。首先这跟屁虫实质上就是white-space字符串,而我们一般会输入的虽是ASCII space( )ASCII tab( )以及为HTML
Markup更可读之line breakscarriage return(
)
line feed( )
这就是说消灭尾行者的道就是只有少数个方向:1. 从根本上消除white-space字符串;2.
视觉效果上拔除white-space字符串的震慑。

牺牲HTML Markup可读性

牺牲前

XHTML

<span>one</span> <span>two</span>
<span>three</span>

1
2
3
<span>one</span>
<span>two</span>
<span>three</span>

舍身后1:一行搞定(一分外坨代码,会动手鸡眼的。。。)

XHTML

<span>one</span><span>two</span><span>three</span>

1
<span>one</span><span>two</span><span>three</span>

舍身后2:注释衔接(通过JS获取子元素数会发出题目)

XHTML

<span>one</span><!–
–><span>two</span><!–
–><span>three</span>

1
2
3
<span>one</span><!–
–><span>two</span><!–
–><span>three</span>

牺牲后3

XHTML

<span>one</span ><span>two</span
><span>three</span>

1
2
3
<span>one</span
><span>two</span
><span>three</span>

下一场@一丝姐说呢表现效果牺牲结构是一日游流氓,@HAX说立刻是”削足适履”。虽说这措施从根本上清除了white-space字符串,但那种丑不是一般人会领的。

font-size:0大法

这种艺术在兼容性的问题,而且子元素需要更安装font-size坐担保持续采用em设置属性值正确有效之就算是一个巨蛋疼的事了。

负margin-right法

规律是经负margin-right将white-space字符收入盒子后方,而margin-right的属于性值需要根据font-size来决定,必须刚等为字形宽度的负数,否则会油然而生元素重叠的题目。(IE5.5/6/7不匹配这玩法)

引入HTML预编译

引入如Jade等HTML模板引擎,开发暨保安时使用可读性可维护性更胜的言语,而浏览器运行时虽然用效率又佳但可读性差甚至无人类自己的编码,然后经如sourcemap来举行映射。

而若是一味为化解本文的题材如引入HTML模板引擎,是勿是多少开非常之了也?

用float啦!

既然如此上述方法都不爽,而而同时熟知float的使及注意事项,那直换成float就哼了。float的内容可参照《CSS魔法堂:说说Float那个给埋没的雄心壮志》

总结

原来display:inline-block被委屈的这么多年,现在毕竟沉冤得雪了!都非常CSS2没有特别的布局模块,逼得我们东方并西凑地融为一体页面。所幸的凡CSS3据而了Flexbox/Grid/Multi-columns
Layout Modules,我们得以寄望更美好的前矣!

感谢

inline-block
前世今生
inline-block 未来
应不应该使用inline-block代替float
inline-block元素间茶余饭后产生与去除详解
有哪好方法能够处理 display: inline-block
元素之间出现的空格?
Fighting the Space Between Inline Block
Elements
福了,浮动布局-基于display:inline-block的列表布局
9.1 White
space
9.3.2 Controlling line
breaks

打赏支持自勾勒起再多好章,谢谢!

打赏作者

打赏支持自己写起重新多好文章,谢谢!

任选一栽出办法

图片 8
图片 9

1 赞 4 收藏
评论

关于作者:^-^肥仔John

图片 10

偏前端的临栈工程师
个人主页 ·
我之稿子 ·
5 ·
   

图片 11

相关文章

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图