CSS法力堂：”那不是bug，是您不懂作者!” by inline-block

2016/05/10 · CSS · inline-block

正文小编： 伯乐在线 - ^-^肥仔John 。未经小编许可，禁绝转发！
招待参加伯乐在线 专辑作者。

CSS法力堂：重新认知Box Model、IFC、BFC和Collapsing margins

2016/05/10 · CSS · BFC, Box Model, Collapsing margins, IFC

本文小编： 伯乐在线 - ^-^肥仔John 。未经小编许可，禁绝转发！
接待参加伯乐在线 专辑作者。

前言
盒子模型作为CSS基础中的基础，曾一度感觉领悟了IE和W3C规范下的块级盒子模型就可以，但近来在学习行级盒子模型时发现原先当初是这么幼稚可笑。本文尝试周详陈述块级、行级盒子模型的天性。作为这几天学习的笔录。

何为盒子模型?
盒子模型到底何方圣洁居然能够当做CSS的根底？著名不及晤面，上图了喂!

再来张切面图吧!

上边大家以 <div></div> 为栗子。 <div></div> 标签被浏览器解析后会生成div成分并增添到document tree中，但CSS效能的对象并非document tree，而是依据document tree生成的render tree，而盒子模型正是render tree的节点。
* 注意:
* 1. CSS效果的是盒子(Box), 实际不是因素(Element);
* 2. JS无法直接操作盒子。

盒子模型的组织
由于块级盒子在认证效率时烦闷音讯更加少，便于通晓盒子模型，由此下边将以块级盒子模型来上课。
瞩目： 行级盒子模型与块级盒子模型结构同样，只是行级盒子在那基础上有本人特色而已。
从上面两幅图表达盒子模型其实便是由以下4个盒子组成：

1. content box：必备，由content area和4条content/inner edge组成；
2. padding box：可选，由padding和4条padding edge组成。若padding宽度设置为0，则padding edge与content edage重叠；
3. border box：可选，由border和4条border edge组成。若border宽度设置为0，则border edge与padding edage重叠；
4. margin box：可选，由margin和4条margin/outer edge组成。若margin宽度设置为0，则margin edge与border edage重叠。
   对此刚接触CSS的校友，平时会将”通过width/height属性设置div成分的宽/高”挂在口边，其实那句话是有误的。
5. 先是css属性width和height作用于div成分所发生的盒子，并不是因素本人;
6. 别的盒子模型由4个盒子组成，那width和height到底是效果于如何盒子呢？
   此处就分为IE盒子模型和标准盒子模型了。
      IE box model    
   IE5.5(奇异情势)选用IE盒子模型，此外将动用W3C标准盒子模型。
   

JavaScript

width = content-width padding-width border-width height = content-height padding-height border-height

1 2	width = content-width padding-width border-width height = content-height padding-height border-height

  Standard box model  

JavaScript

width = content-width height = content-height

1 2	width = content-width height = content-height

游走于IE box model 和 斯坦dard box model间的大道——box-sizing属性
我们看到存在三种width/height的划分格局，到底哪一类才对啊？其实二种都对，具体看哪样行使而已。别的IE8带头补助CSS3属性box-sizing，让我们能够自由选取选用哪一类盒子:)
box-sizing:content-box/border-box/inherit
content-box——默认值，采用Standard box model
border-box——采用IE box model
inherit——承袭父成分属性值
sample:

CSS

Element{ -moz-box-sizing: border-box; // FireFox3.5 -o-box-sizing: border-box; // Opera9.6(Presto内核) -webkit-box-sizing: border-box; // Safari3.2 -ms-box-sizing: border-box; // IE8 box-sizing: border-box; // IE9 ,Chrome10.0 ,Safari5.1 ,Opera10.6 }

1 2 3 4 5 6 7

Element{   -moz-box-sizing: border-box; // FireFox3.5   -o-box-sizing: border-box; // Opera9.6(Presto内核)   -webkit-box-sizing: border-box; // Safari3.2   -ms-box-sizing: border-box; // IE8   box-sizing: border-box; // IE9 ,Chrome10.0 ,Safari5.1 ,Opera10.6 }

行级盒子——嫌疑人生de起源:)　　　　　　　　　　　　　　　　　　
前边作者精通的盒子模型如上所述，当自个儿看到行级盒子的各种现象时，便最早出乎意料人生了:(
width/height不起效用。。。

CSS

.defined-wh{ width: 100px; height: 50px; border: solid 1px red; background: yellow; }

1 2 3 4 5 6 7

.defined-wh{   width: 100px;   height: 50px;     border: solid 1px red;   background: yellow; }

对于block-level box

XHTML

<div class="defined-wh"></div>

1	<div class="defined-wh"></div>

对于inline-level box

XHTML

<span class="defined-wh"></span>

1	<span class="defined-wh"></span>

行级盒子的宽度怎会是0呢？中度是局地但不是50px啊，到底什么样回事啊？
案由很简短，那就是行级盒子的content box的高/宽根本就不是通过height/width来安装的。
content box/area的高由font-size决定的；
content box/area的宽等于其子行级盒子的外宽度(margin border padding content width)之和。

  行级盒子被挤断了。。。

CSS

.broken{ border: solid 1px red; background: yellow; }

1 2 3 4

.broken{   border: solid 1px red;   background: yellow; }

对于block-level box

XHTML

<div class="broken">一段文字一段文字一段文字一段文字一段文字一段文字</div>

1	<div class="broken">一段文字一段文字一段文字一段文字一段文字一段文字</div>

对于inline-level box

XHTML

<span class="broken">一段文字一段文字一段文字一段文字一段文字一段文字</span>

1	<span class="broken">一段文字一段文字一段文字一段文字一段文字一段文字</span>

行级盒子被五马分尸了，可怜兮兮的。更特别的是作者领会不了。。。
实在W3C Recommendation有证实的啊！
>The box model for inline elements in bidirectional context
>When the element’s ‘direction’ property is ‘ltr’, the left-most generated box of the first line box in which the element appears has the left margin, left border and left padding, and the right-most generated box of the last line box in which the element appears has the right padding, right border and right margin.
>When the element’s ‘direction’ property is ‘rtl’, the right-most generated box of the first line box in which the element appears has the right padding, right border and right margin, and the left-most generated box of the last line box in which the element appears has the left margin, left border and left padding.
正是说当inline-level box宽度大于父容器宽度时会被拆分成多少个inline-level box，
当属性direction为ltr时，margin/border/padding-left将功用于第三个的inline-level box，margin/border/padding-right将作用于最终一个的inline-level box;若属性direction为rtl时，margin/border/padding-right将功用于第叁个的inline-level box，margin/border/padding-left将功能于最终贰个的inline-level box。
来看了没？行级盒子真的会被分尸的，好冷酷哦:|

行级盒子怎么不占空间了？怎么刷存在感啊。。。

CSS

.existed{ margin: 20px; padding: 20px; border: solid 1px red; background: yellow; background-clip: content-box; }

1 2 3 4 5 6 7

.existed{   margin: 20px;   padding: 20px;   border: solid 1px red;   background: yellow;   background-clip: content-box; }

对于block-level box

XHTML

<div>before bababababababa</div> <div class="existed">babababababababababa</div> <div>after bababababababa</div>

1 2 3

<div>before bababababababa</div> <div class="existed">babababababababababa</div> <div>after bababababababa</div>

对于inline-level box

XHTML

<div>before bababababababa</div> <span class="existed">babababababababababa</span> <div>after bababababababa</div>

1 2 3

<div>before bababababababa</div> <span class="existed">babababababababababa</span> <div>after bababababababa</div>

看，行级盒子的margin/border/padding-top/bottom怎么均不占空间的？难道行级盒子独有content box占空间吧？
此间一度提到到水平和垂直方向排版的规模了，仅以盒子模型已力不从心分析驾驭上述的标题。
(要结合)

在深刻解释inline-level box的上述情景前，大家要求补充一下：

1. 二个要素会对应0~N个box;(当设置display:none;时，则对应0个box)
2. 根据display属性值，成分会对应差别等级次序的controlling box(inline/block-level box均是controlling box的子类). 就CSS2来说display:inline|inline-block|inline-table|table-cell|table-column-group的要素对应inline-level box,而display:block|list-item|table|table-caption|table-header-group|table-row|table-row-group|table-footer-group的因素则对应block-level box;
3. box布局/排版时提到到定位难题，而CSS中经过positioning scheme来定义，其包蕴normal flow、floats和absolute positioning三种固定方式.而normal flow蕴含block formatting、inline formatting和relative positioning，当中BFC为block formatting的上下文，IFC为inline formatting的上下文。

所以我们请留神，前方高能，前方高能！！！

和IFC一起看inline-level box
IFC(Inline Formatting Context),直译为“行内格式化上下文”，这是哪些鬼的翻译啊？反正我对此名词一向采纳拿来主义，明白名词背后的意义才是硬道理。
小编们简要明了为各样盒子都有二个FC脾性，不相同的FC值代表一组盒子不一样的排列格局。有的FC值表示盒子从上到下垂直排列，有的FC值表示盒子从左到右水平排列等等。而IFC则是表示盒子从左到右的水准排列情势，仅此而已(注意：四个盒子仅且只有多个FC值)。而inline-level box的FC天性值固定为IFC。
别的仅处于in-flow的盒子才享有FC个性，约等于positioning scheme必得为Normal flow的盒子能力备FC特性。
除此而外IFC外，对于inline-level box排版来说还应该有另三个重大的靶子，那正是line box。line box是一个看不见摸不着的边框，但每一行所占的垂直高度其实是指line box的冲天，实际不是inline-level box的万丈。
  line box的特点：

1. 同等行inline-level box均属于同一个line box；
2. line box中度的图谋方法()
   >The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their ‘line-height’.
   >The inline-level boxes are aligned vertically according to their ‘vertical-align’ property. In case they are aligned ‘top’ or ‘bottom’, they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box’s baseline.
   >The line box height is the distance between the uppermost box top and the lowermost box bottom.

CSS

.parent{ line-height: 1; font-size: 14px; border: solid 1px yellow; } .child{ font-size: 30px; vertical-align: middle; border: solid 1px blue; } .inline-block{ display: inline-block; overflow: hidden; border: solid 1px red; } .other{ border: solid 1px green; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.parent{   line-height: 1;   font-size: 14px;   border: solid 1px yellow; } .child{   font-size: 30px;   vertical-align: middle;   border: solid 1px blue; } .inline-block{   display: inline-block;   overflow: hidden;   border: solid 1px red; } .other{   border: solid 1px green; }

XHTML

<span class="parent"> <span class="child"> <span class="inline-block">display:inline-block成分</span> xp子成分的文字 </span> xp父成分的文字 </span> <div class="other">别的因素</div>

1 2 3 4 5 6 7 8

<span class="parent">   <span class="child">     <span class="inline-block">display:inline-block元素</span>     xp子元素的文字   </span>   xp父元素的文字 </span> <div class="other">其他元素</div>

1. 听大人讲准绳，span.parent所在行的line box的惊人受span.parent、span.child、span.inline-block成分对应的inline-level box”高度”的熏陶。个中span.parent的”高度”为其line-height实际值，span.child的”中度”为其line-height实际值，而span.inline-block的”高度”为其margin box的中度。由于设置line-height:1，因而span.parent和span.child的content box中度等于line-height实际值;
   2. 基于vertical-align属性垂直对齐，形成各“中度”间并不以下面界或上面际对齐;
2. span.inline-block朱红的下面框(border top)到span.child蓝绿的下面框(border bottom)的离开再减去1px即为line box的惊人。(line box的下界其实是span.child的content box的下限的，你看”其余因素”的顶部框不是和span.child的底下框重叠了呢？纵然那是line box的下界，那怎会并发重叠呢)

此处又涉嫌到另三个属性vertical-align了，由于它十二分复杂，依然另开小说来描述吧！

                      行级盒子小结                          
*就盒子模型来说***

1. inline-level box与block-level box结构一样;
2. content box的冲天仅能透过品质font-size来设置，content box的上升的幅度则自适应其剧情而无法通过品质width设置;
3. 当inline-level box的大幅超越containing block，且达到内容换行条件时，会将inline-level拆散为多少个inline-level box并传布到多行中，然后当属性direction为ltr时，margin/border/padding-left将效率于第二个的inline-level box，margin/border/padding-right将功用于最终一个的inline-level box;若属性direction为rtl时，margin/border/padding-right将作用于第二个的inline-level box，margin/border/padding-left将功效于倒数的inline-level box。

*垂直排版本性***
inline-level box排版单位不是其本人，而是line box。着重在于line box高度的乘除。

1. 坐落该行上的装有in-flow的inline-level box均加入该行line box中度的推断;(注意：是兼具inline-level box，而不止是子成分所生成的inline-level box)
2. replaced elements, inline-block elements, and inline-table elements将以其对应的opaque inline-level box的margin box中度出席line box高度的图谋。而其他inline-level box则以line-height的实际值插手line box中度的揣测;
3. 各inline-level box依据vertical-align属性值相对各自的父容器作垂直方向对齐;
4. 最顶部的box的上面界到最下方的下面界则是line box的可观。（表述相当不够清晰，请仿照效法实例精晓）

Collapsing margins　　　　　　　　　　　　　　　　　　　　　　
大家自然听过或遇过collapsing margins吧，它是in-flow的block-level box排版时的一类情况。谈到排版那必需引进另一个FC个性值——BFC(Block Formatting Context)的。
BFC则是意味盒子从上到下的垂直排列格局，仅此而已(注意：贰个盒子仅且唯有五个FC值)。而block-level box的FC天性值固定为BFC。
collapsing margins规则
1. 因素自个儿margin-top/bottom collapsing

XHTML

anonymous block-level box <div class="margins"></div> anonymous block-level box <div class="margins border"></div> anonymous block-level box

1 2 3 4 5

anonymous block-level box <div class="margins"></div> anonymous block-level box <div class="margins border"></div> anonymous block-level box

CSS

.margins{margin: 50px 0 70px;} .border{border: solid 1px red;}

1 2	.margins{margin: 50px 0 70px;} .border{border: solid 1px red;}

当block-level box中度为0，垂直方向的border和padding为0，而且未有in-flow的子成分。那么它直挺挺方向的margin将会产生重叠。

2. 老爹和儿子成分margin-top/top 或 margin-bottom/bottom collapsing

XHTML

anonymous block-level box <div class="parent-margins"> <div class="margins border"></div> anonymous block-level box <div class="margins border"></div> </div> anonymous block-level box <div class="parent-margins border"> <div class="margins border"></div> anonymous block-level box <div class="margins border"></div> </div> anonymous block-level box

1 2 3 4 5 6 7 8 9 10 11 12 13

anonymous block-level box <div class="parent-margins">   <div class="margins border"></div>   anonymous block-level box   <div class="margins border"></div> </div> anonymous block-level box <div class="parent-margins border">   <div class="margins border"></div>   anonymous block-level box   <div class="margins border"></div> </div> anonymous block-level box

CSS

.parent-margins{margin: 25px 0;} .margins{margin: 50px 0 25px;} .border{border: solid 1px red;}

1 2 3

.parent-margins{margin: 25px 0;} .margins{margin: 50px 0 25px;} .border{border: solid 1px red;}

当父亲和儿子成分margin-top间或margin-bottom间没有padding、border隔开时，则会margin会爆发重叠。
只顾空白字符会产生指标父亲和儿子成分间的存在anonymous block-level box，导致margin不重叠。

XHTML

anonymous block-level box <div class="parent-margins">  <div class="margins border"></div> anonymous block-level box <div class="margins border"></div> </div> anonymous block-level box

1 2 3 4 5 6 7

anonymous block-level box <div class="parent-margins">&nbsp;   <div class="margins border"></div>   anonymous block-level box   <div class="margins border"></div> </div> anonymous block-level box

3. 小朋友成分margin-bottom/top collapsing

XHTML

<div class="margins">former</div> <div class="margins">latter</div>

1 2	<div class="margins">former</div> <div class="margins">latter</div>

CSS

.margins{margin: 50px 0 25px;}

1	.margins{margin: 50px 0 25px;}

三个相邻的in-flow block-level box的上下margin将发生重叠。

*上述为暗中认可情状下block-level box(即display:block，另外为私下认可值时)的margin重叠法则***
那非默许情状下吧？比较非暗许情形下的margin重叠准绳，我们更爱惜是几时不会时有产生重叠。那时又引入了另三个概念——生成新BFC。也正是block-level box A与block-level box B的FC个性值BFC可能是见仁见智的。
当四个相邻box的FC值不为同叁个BFC时，它们的margin绝对不会重叠。
那么余下的难点不怕，到底哪天会发出新的BFC？哪些block-level box会选取新的BFC？暗中认可BFC又是何人生成的吗？
事实上根成分(html)会生成暗中认可BFC供其子孙block-level box使用。
选择floats或absolute positioning作为positioning scheme时，或display:inline-block/table-cell/table-caption/flex/inline-flex或overflow属性值不为visible时，则会发出新的BFC；而新的BFC将作为子孙block-level box的FC属性值。
注意：
    1. 发生新BFC的盒子不会与子盒子发生margin重叠；
    2. display:inline-block的盒子不与 兄弟 和 父 盒子产生margin重叠，是因为display:inline-block的盒子的FC天性值为IFC，还记得line box吗？未有margin重叠是当然可是的事了；
    3. positioning scheme为floats的盒子不与floated的汉子盒子爆发margin重叠，也不会与前贰个in-flow的男士儿盒子发生margin重叠。(注意：与父盒子也不会发生margin重叠)

XHTML

<div class="margins border">sibling</div> <div class="margins border float">floats1</div> <div class="margins border float">floats2</div>

1 2 3

<div class="margins border">sibling</div> <div class="margins border float">floats1</div> <div class="margins border float">floats2</div>

CSS

.margins{margin: 50px 0 50px;} .border{border: solid 1px red;} .float{float:left;width:200px;}

1 2 3

.margins{margin: 50px 0 50px;} .border{border: solid 1px red;} .float{float:left;width:200px;}

归纳FC、BFC和IFC　　　　　　　　　　　　　　　　　　　　　　

是因为上述珍视演说inline/block-level box，由此通过“仅此而已”来简化BFC和IFC的内涵。上边大家有一点周详一些去领略BFC和IFC如何影响inline/block-level box。

FC(Formatting Context)，用于开头化时设置盒子本身尺寸和排版准则。静心“先河化”，暗意positioning scheme接纳的是normal flow，要精晓floats和absolute positioning均不是暗中同意/最初化值。也正是说我们在研商FC及BFC和IFC时，均指向in-flow box来说的。
  BFC
**对此不发生新BFC的盒子**

1. block-level boxes垂直排列，盒子的left outer edge与所在的containing block的左边相接触，暗许情况下(width为auto时)right outer edge则与所在的containing block的右臂相接触。纵然存在floated的小朋友盒子。

XHTML

<div id="container" style="border:solid 2px red;"> <div id="left" style="float:left;width:300px;height:30px;background:yellow;opacity:0.2;"></div> <div id="right" style="height:30px;background:#999;"></div> </div>

1 2 3 4

<div id="container" style="border:solid 2px red;">   <div id="left" style="float:left;width:300px;height:30px;background:yellow;opacity:0.2;"></div>   <div id="right" style="height:30px;background:#999;"></div> </div>

虽然 div#left 浮点了，但 div#right 的left outer edge还是与 div#container 的left content edge相接触。 div#right 所在的containing block就是 div#container 的content box.

1. block-level box中度的计量
   The element’s height is the distance from its top content edge to the first applicable of the following:
   the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
   the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child’s bottom margin does not collapse with the element’s bottom margin
   the bottom border edge of the last in-flow child whose top margin doesn’t collapse with the element’s bottom margin
   zero, otherwise
   Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).

也就out-flow box不影响block-level box中度的测算。也正是解释了干吗div中仅含floated成分时，div盒子高度为0的景观了。

**对于发生新BFC的盒子**
对此发出新BFC的盒子来说，除了不爆发collapsing margins的情形外，还应该有多个与浮点相关的场地。

1. out-flow box归入block-level box中度的计量
   In addition, if the element has any floating descendants whose bottom margin edge is below the element’s bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
   也就positioning scheme为floats的box也会影响block-level box中度的总计。

2. 宣誓不与positioning scheme为floats的兄弟盒子重叠
   The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

产生新BFC的block-level box不与floated-box重叠，而是floated-box的margin-box与block-level box的border-box相接触。
水平方向

XHTML

<div style="float:left;width:100px;border: solid 1px red;margin-right:50px;">floated</div> <div style="width:200px;border: solid 1px blue;margin-left:100px;overflow:hidden;">gen new BFC balabala</div>

1 2	<div style="float:left;width:100px;border: solid 1px red;margin-right:50px;">floated</div> <div style="width:200px;border: solid 1px blue;margin-left:100px;overflow:hidden;">gen new BFC balabala</div>

垂直方向

XHTML

<div style="float:left;width:100px;border: solid 1px red;margin-bottom:50px;">floated</div> <div style="width:200px;border: solid 1px blue;margin-top:100px;overflow:hidden;">gen new BFC balabala</div>

1 2	<div style="float:left;width:100px;border: solid 1px red;margin-bottom:50px;">floated</div> <div style="width:200px;border: solid 1px blue;margin-top:100px;overflow:hidden;">gen new BFC balabala</div>

 

 IFC

谈起IFC那就务须说line box，而line box中度的测度划办公室法方面已经陈述了，这line box的肥瘦呢？
line box私下认可情状下侧面框与containing block的左手框接触，左侧框与containing block的出手框接触。若存在floated兄弟盒子，则line box的大幅为containing block的宽度减去floated-box的outer-box的宽度。

而inline-level box必需饱含在line box中，若inline-level box的white-space:nowrap或pre外的其他值时，就能够将inline-level box拆分为八个inline-level box并疏散到三个line box中，进而实现文字环绕图片的效率了。

不然inline-level box会捅破line box(即line box宽度不改变)

　　　　行——换与不　　　　

先看看关于换行的CSS属性吧！

white-space normal: 忽视/合併空白 pre: 保留空白，就好像<pre>的所作所为nowrap: 忽视/合併空白，文本不会换行，直到遇见<br/> pre-wrap: 保留空白，可是会符合规律地开展换行 pre-line: 忽略/合併空白，不过会正常地张开换行 inherit: 从父成分承袭。 word-wrap normal: 只在同意的断字点换行 break-word: 在长单词或U福特ExplorerL地址内部举行换行 word-break normal:依据澳大巴塞尔联邦（Commonwealth of Australia）和非澳大坎Pina斯语言的文书法规，允许在单词内换行。 keep-all:让亚洲语言文本就像是非澳洲语言文本那样不容许在放肆单词内换行。 break-all:允许非澳大金斯敦语言文本行就好像欧洲语言文本那样能够在自由单词内换行。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

white-space     normal: 忽略/合并空白     pre: 保留空白，如同<pre>的行为     nowrap: 忽略/合并空白，文本不会换行，直到遇到<br/>     pre-wrap: 保留空白，但是会正常地进行换行      pre-line: 忽略/合并空白，但是会正常地进行换行     inherit: 从父元素继承。   word-wrap     normal: 只在允许的断字点换行     break-word: 在长单词或URL地址内部进行换行   word-break     normal:依照亚洲和非亚洲语言的文本规则，允许在单词内换行。     keep-all:让亚洲语言文本如同非亚洲语言文本那样不允许在任意单词内换行。     break-all:允许非亚洲语言文本行如同亚洲语言文本那样可以在任意单词内换行。

切切实实示例可参看：css中强制换行word-break、word-wrap、white-space差距实例证实

在拍卖换行难题上，大家要拍卖的目的分为亚洲语言文本和非洲欧洲洲语言文本。对于欧洲语言文本是以字作为操作单元，而非洲欧洲洲语言文本是以单词作者为操作单元。而换行是本着特定语言文本的操作单元来管理，所以私下认可景况下会见到一串没空格的“汉语”自动换行，而一串没空格的“立陶宛（Lithuania）语”却尚未换行的情景。
对此我们（欧洲人）来讲，通常选择 word-break:break-all;word-wrap:break-word; 来落成中阿尔巴尼亚语自动换行效果，但保加曼海姆语单词自个儿是不可能那样简单冷酷地换行的。
塞尔维亚（Serbia）语单词移行有一定准则,归咎如下：
1．移行处要用连字符号“-”,只占多个印刷符号的职位并置身该行的最终.
2．移行时日常依照音节实行,故只可在两音节之间分开,不可能把三个总体的音节分写在上下两行.比如：Octo-ber（正）,Octob-er（误）.
3．复合词要在组合该词的两有的之间移行.如：some-thing,bed-room等.
4．举个例子复合词原本就有连字符号,则就在原连字符号处分行.如：good-looking等.
5．八个例外的辅音字母在联合签名时,移行时左右各二个.如：cap-tain,ex-pose等.
6．当三个音节间只有二个辅音字母时,若是该辅音字母前的元音字母按重读开音节的条条框框发音,该辅音字母移至下一行.如：fa-ther等.但倘使元音按重读闭音节的平整发音,则该辅音字母保留在上一行末尾.比方：man-age等.
7．当境遇双写辅音字母时,日常把它们分成前后各贰个.举例：mat-ter等.
8．当重读音节在后边时,元音字母前的辅音字母平常移到下一行.如：po-lite等.
9．单音节词不可移行.如：length,long,dance等.
10．前缀或后缀要保持总体,不可分离写.如：unfit,disappear等.
11．阿拉伯数字不分离移行草写.
12．不论音节多少,专著名词不宜分写.举个例子：Nancy,Russia等.
13．缩写词、略写词或一些词的缩写情势不可移甲骨文写.譬喻：U．N．（联合国）,P．逍客．C．（中国）,isn’t.
14．无法结合二个音节的词尾不分写.比方：stopped等.
15．字母整合或辅音连缀不可移行.比方：machine,meat等.

CSS简化了上述的平整，若要求换行处恰好是三个复合词，就在原连字符号处分店；别的意况则整个单词移到下一行。因而利用 word-wrap:break-word; 就OK了。

另外大家还是能够通过 word-break:keep-all;white-space:nowrap; 来实现打死都不换行的效率
总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
众多洒洒总算把BoxModel、BFC和IFC描述了个大致。对于BFC折腾点正是在collapsing margins那，别的还可能有发生新BFC那些行为上（那几个跟浮动等有混合，将来再理清呢）；而IFC体贴在于通晓line box，其实line box也像block-level box那样是笔直排列的，而inline-level box则是以line box作为容器完成程度排列罢了。到此地会发掘了然IFC比BFC蛋疼多了，不过有了那篇作基础，前边精晓text-align、line-height和vertical-align就轻巧不菲了。

正文纯个人通晓，若有漏洞，望各位指正，谢谢！

感谢　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

)

)

(IFC)

[KB010: 常规流( Normal flow ) ]()
[CSS 101: Block Formatting Contexts]()

打赏帮助作者写出越来越多好文章，多谢！

打赏笔者

SO火爆问答：可感到半个字符应用CSS样式吗？

2014/06/13 · CSS · CSS

本文由 伯乐在线 - Carman 翻译。未经许可，禁绝转发！
英语出处：stackoverflow。招待加入翻译组。

调试 CSS 的方法

2016/09/06 · CSS · 调试

原稿出处： Ben Frain   译文出处：众成翻译 - yanni4night   

笔者经历过无数 CSS 代码的调治将养专门的职业，有外人写的也是有友好写的，有运动端平台的也许有正统桌面浏览器的，从年代久远荒废失修的 IE 到最新的依照 Webkit 的天天营造。经验告诉本身，很五人并不曾贰个专门的职业的 CSS 调节和测量试验流程。

本身发觉在大部情状下，具备专门的工作的解决难点的法子，能够节约花在 bug 上的时日。

上边是自个儿总结的阅历。

自己不保障那是最相符的调度 CSS 的格局，可是真正对本身很管用。如何 CSS 不是你的第一编程语言，调节和测量检验它只怕如同深蔚蓝艺术同样；服从上边包车型地铁指南可以帮忙你更平价地稳住和减轻bug。

总结地说，小编把调节和测验流程分为 3 个级别：

• 评估并快捷修复
• 还原和复发
• 定位根源并修复

我们逐一解释每种阶段并实行叁个事例。

前言

每当来个需求既要水平排版又要设置一定高宽时，作者就能记忆display:inline-block，还大概有为了援助IE5.5/6/7的hack*display:inline;*zoom:1;。然后发掘盒子间无端端多了个不得选的空白符，于是想尽办法修复那个bug。

以至一天拜读了@一丝姐、@HAX等圣贤的秘笈后才柳暗花明，原本本人错了。那不是bug，是自己不懂而已。

打赏接济作者写出更加多好文章，多谢！

任选一种支付办法

1 赞 3 收藏 评论

Mathew MacLean 提问

自己正在搜索:

一种办法为半个字符应用样式（在这里种处境下，四分之二的字母是晶莹的）。

自己当下早就查找并尝试的（不走运）：

• 渲染二分之一字符/字母的议程
• 用CSS或JavaScript渲染字符的一局地
• 对一个字符的四分之二接纳CSS

以下是笔者尝试完毕的三个例证：

以此是或不是有三个CSS或然JavaScript的消除形式存在，仍旧本身必得运用图片的艺术？作者不情愿利用图片的艺术，因为文件将最终是动态变化的。

 

评估并火速修复

假定 CSS 是你的机要办事语言，大概您对 CSS 有确定的领会和实行经验的话，解决 CSS 难点就有广大轻便易行的措施，否则的话，方法就少一些。

有经历的 CSS 开荒者恐怕都知道的局地 CSS 陷阱：

• 图片周围存在有意思的空域？设置 display: block（图片私下认可是内联的，由此会有空落落）。
• 要素排列不精确？你也许有浮动的因素。
• 相对定位成分不显得、地方不当可能被屏蔽？你可能未有安装父元素的 position 属性大概用 transform 及 opacity 创造一个 z-index 上下文。
• 伪元素不显示？你或者忘记了设置 ‘content’的值。

那般的 “bug” 有第一次全国代表大会堆。实际上根本未有bug，越多的是开拓者贫乏对浏览器行为的知情。更确切地说，是 CSS 代码让浏览器怎么办。

对这个 CSS 天性熟稔的开采者能够快捷稳固到难题还要修复。他们对 bug 的认知与这一个对 CSS 不打听的人会产素不相识歧。那样在化解 CSS bug 中对‘工作流’要求的最首要的认知就能人己一视。

对此‘火速修复’中从未遮盖的不熟悉难题，在开采者工具中靠猜来消除难点的措施已经没什么价值。纵然运气好主题素材被解决了，也很难判定出难点到底是何许被化解的。

假诺出现的主题材料无法被轻巧化解，先分明难题区域的限量，抓取 HTML 标签（约等于拷贝 DOM），步向下三个调节和测量检验阶段：还原和复发。

正规提醒：大好些个浏览器的开辟者工具会让您选拔包裹成分并拷贝 HTML 区块。在 Chrome 的开拓者工具中，要会同包裹成分一齐拷贝，供给点击 ‘Copy > Copy OuterHTML’。

先行者——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行业内部而已。

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>

由此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>

见鬼了，在前叁个盒子内加多些文本就出现空隙了？其实那着实和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>

可以看见浅紫蓝块k和甲寅革命块h间存在一个空格，而中黄块k后也设有二个空格。可是代码中大家看来蓝灰褐块间有4个&#x20HTML实体，为何唯有二个空格呢？而木色块中仅仅换了行而已，怎么就有个空格呢？

先抛结论：上面两端代码均是white space、white space collasping再作祟。

关于作者：^-^肥仔John

偏前端的临栈技术员 个人主页 · 小编的文章 · 5 ·    

来自 Arbel 的最好回答：（1280 赞）

回复和复发

本阶段的 CSS bug 修复在看似 Codepen 的提携下非常简单。咱们目标首若是复现出此难点 – 也便是挑起 bug 的代码。那能让我们火速牢固 bug，直捣白虎。

为清晰起见，只把有关的 HTML 和 CSS 提抽取来复现难题。你既可以够手打 HTML 对应的 CSS，也得以复制真实的代码。假诺或许的话，不用把持有 CSS 代码一股脑拷贝过去再现难题，保障最精简的要素就可以。保持逐步扩充 CSS 的习贯，难题就能够友善找到你。

在将在临近真相时，往往只供给多个非正规的 CSS 属性的更改就会让 bug 暴流露来。

相呼应的做法是，把持有 CSS 都扔进去复现难点，然后每一遍移除一点，直到难题现身。在施行中，笔者发觉那略笨，不用也一碗水端平，你也会有两样的意见。

日渐地增多或删除 CSS 代码已是复发难题和永远故障的原则性套路了。

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中。

已做成三个插件，放 Github 上了！

那么 HTML 标签呢？

万一使用起码 CSS 代码复现难点时，效果如同原始代码同样。那也是行得通的，我们前日看 HTML 标签。

率先件事要做的，也是不能够跳过的，正是检查标签的得力。固然告知出大家不关切的主题素材（比方meta），起码能确认保障它不会以某种方式损坏美感。大家意在能窥见未密封的标签、未有引号的属性，以致另外任何大概影响浏览器剖析的标题。建议你选拔 W3C validator。

一经标签检查通过，将助长清除浏览器引进意外样式的或许。那样做：

率先，把全数因素改成 div（块级元素）和 span（行内元素），保障它们只被 CSS 的类选取器选中。也可能有必不可缺把额外的选择器移除，如把 a.link 改为 .link。

通过运用固定的标签大家清除了浏览器针对一定成分引入暗中认可样式的大概性。表单成分是个特例（立即会在例子中看出）。

若果把全体因素改成 div 和 span，难点未有了，那么浏览器引进暗中认可样式的疑虑就被显明了。未来在 computed styles 面板中找找浏览器扩充了怎么着样式，想办法覆盖它。总来讲之便是要看计算后的体制。

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性情不影响汉字间的间距，本来无一物什么地点惹尘埃呢。字形、单词间的等级次序间隔

演示 | 下载 Zip | Half-Style.com (重定向到GitHub)

---

• 单个字符的纯css
• JavaScript用来机关覆盖文本或多字符
• 护卫文本的可读性，盲人或视障人员使用的显示器阅读器可甄别

稳固根源并修复

比方简化 HTML 标签也并未有找到标题，並且是可牢固复现的，那么就该换个浏览器试一试。是还是不是一致的标题应时而生在 Chrome，IE，Safari 和 Firefox 上？倘使不是，哪个的展现是精确的？假设只有二个浏览器是错的，那么就值得去搜求一下一点青眼的 bug 追踪系统了：

• Chrome bugs
• Firefox bugs
• Safari bugs
• Microsoft bugs

是某浏览器的难点呢？也许是某浏览器的一定版本的主题素材？难点是否在修补中？有未有不影响此外浏览器的施工方案？实在可怜你可认为特定的浏览器编写修复代码吗？

过去本身曾详细描述过如何向浏览器提 bug，在 二零一三 年 Lea Verou 也写过一份描述提 bug 流程的篇章。

另一种景况是唯恐要求‘无毒的’hack。举例，作者多年来遇见的三个风貌是在一个块级成分前边的要素必得是相对定位的手艺呈现出来。 left: 100% 唯有在 IE 浏览器（移动端是Windows Phone 8，8.1 和 10）中不见效。IE 中在多少个要素之间总有三个空当。看起来疑似二个亚像素渲染难题，由此 left: 99.99% 就能够消除难点而不会影响其余浏览器。那是个 hack 花招，但大家精晓原理（有的浏览器会舍入，此外则不会），标记在 CSS 的讲解中，未有别的损害。

微软的 Greg Whitworth 告诉我了有关亚像素舍入的越多细节。WebKit 和 Blink 内核舍入 1/64，Gecko 内核舍入 1/60，Edge 舍入 1/100（感激 Webkit 开荒者 ‘smfr’）。

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字符串将被忽视。

** FF5.0 **

1. 对于伊始标签与第一个non-white-space字符间和终止标签与终极叁个non-white-space字符间的white-space字符串将被忽略。
2. 词义单元间的white-space字符串，以carriage return( )作为white-space合併单元的分界符，最终保留各合併单元的统一结果。
3. 标签内仅包含white-space字符串，那么那些white-space字符串将被忽视。

** IE8 **

1. 对于初阶标签与第二个non-white-space字符间和竣事标签与终极五个non-white-space字符间的white-space字符串将被忽略。
2. 词义单元间的white-space字符串，合併为1个(ASCII space)字符。
3. 标签内仅富含white-space字符串，那么那一个white-space字符串将被忽略。

** 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字符串将被忽视。

集结单元：合併单元包括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

<span class="bk1 item"></span> <span class="bk2
item"></span> <br/><br/> <span class="bk1
item">bk1</span> <span class="bk2 item"></span>

<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整体作为词义单元，从外部看根本不用管里面具体字符串是什么。

先是片段: 基本应用方案

演示: 

---

这种艺术用于另外动态文本或单个字符，并且都以半自动适用的。全部你须要做的正是在指标文本上增加二个class，剩下的就化解了。

并且，保留了初藳的可访谈性，能够被盲人或视障人员使用的荧屏阅读器度和胆识别。

单个字符的兑现：

纯CSS。全部你必要做的正是把.halfStyle class用在每一个你想要渲染二分一体制字符的元素上。

对此每一个包涵字符的span成分，你能够加上贰个data属性，举例data-content=”X”，而且在伪成分上运用content:attr(data-content)；这样，.halfStyle:before class将会是动态的，你不供给为每一种实例举行硬编码

随便文本的贯彻：

只需加多textToHalfStyle class到含有文本的成分上。

---

CSS:

JavaScript

.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: black; /* or transparent, any color */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { display:block; z-index:1; position:absolute; top:0; left:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; color: #f00; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.halfStyle {     position:relative;     display:inline-block;     font-size:80px; /* or any font size will work */     color: black; /* or transparent, any color */     overflow:hidden;     white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before {     display:block;     z-index:1;     position:absolute;     top:0;     left:0;     width: 50%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     color: #f00; }

HTML

JavaScript

<p>Single Characters:</p> <span class="halfStyle" data-content="X">X</span> <span class="halfStyle" data-content="Y">Y</span> <span class="halfStyle" data-content="Z">Z</span> <span class="halfStyle" data-content="A">A</span> <hr/> <p>Automated:</p> <span class="textToHalfStyle">Half-style, please.</span>

1 2 3 4 5 6 7 8 9 10

<p>Single Characters:</p> <span class="halfStyle" data-content="X">X</span> <span class="halfStyle" data-content="Y">Y</span> <span class="halfStyle" data-content="Z">Z</span> <span class="halfStyle" data-content="A">A</span>   <hr/> <p>Automated:</p>   <span class="textToHalfStyle">Half-style, please.</span>

---

它会活动生效，只要增加 textToHalfStyle class到含有文本的要素上。

jQuery 自动格局:

JavaScript

jQuery(function($) { var text, chars, $el, i, output; // Iterate over all class occurences $('.textToHalfStyle').each(function(idx, el) { $el = $(el); text = $el.text(); chars = text.split(''); // Set the screen-reader text $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' text '</span>'); // Reset output for appending output = ''; // Iterate over all chars in the text for (i = 0; i < chars.length; i ) { // Create a styled element for each character and append to container output = '<span aria-hidden="true" data-content="' chars[i] '">' chars[i] '</span>'; } // Write to DOM only once $el.append(output); }); });

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

jQuery(function($) {     var text, chars, $el, i, output;       // Iterate over all class occurences     $('.textToHalfStyle').each(function(idx, el) {         $el = $(el);         text = $el.text();         chars = text.split('');           // Set the screen-reader text         $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' text '</span>');           // Reset output for appending         output = '';           // Iterate over all chars in the text         for (i = 0; i < chars.length; i ) {             // Create a styled element for each character and append to container             output = '<span aria-hidden="true" data-content="' chars[i] '">' chars[i] '</span>';         }           // Write to DOM only once         $el.append(output);     }); });

演示: 

---

计量后样式

开垦者工具中相比轻便被忽略的是 computed styles 面板。借使您对 computed styles 不熟稔的话，从名称想到所包含的意义，正是确实使用到成分上的样式。那很主要，因为你写的体制不必然会生效。同样，你写的样式亦非所有生效的样式。上面包车型地铁例子将分解本人的乐趣：

XHTML

<fieldset class="outer"> <div class="inner"> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> </div> </fieldset>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<fieldset class="outer">     <div class="inner">         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>         <label for="" class="item"><span>hello</span></label>     </div> </fieldset>

对应的 CSS 是：

CSS

.outer { max-width: 400px; } .inner { width: 100%; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; white-space: nowrap; } .item { display: inline-block; width: 100px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.outer {     max-width: 400px; }   .inner {     width: 100%;     overflow-x: auto;     overflow-y: hidden;     -ms-overflow-style: -ms-autohiding-scrollbar;     -webkit-overflow-scrolling: touch;     white-space: nowrap; }   .item {     display: inline-block;     width: 100px; }

outer 的增进率会是多少？借令你认为是 max-width 的 400px，小编会原谅你的。然并不是我们看出的肥瘦，看 Ben Frain 编写的 codepen。

怎么意况？为何不是 max-width 的值？给你个思路，展开 Computed Styles 面板。

找到题指标发源了吧？

本身来给您解释下。暗许地，田野(field)set 元素的宽度会等于其内容的大幅。在 Chrome 的Computed Styles 面板中，min-width 的值是二个新的 min-content。

给 min-width 设置一个新值来“修复”它。那几个事例中，min-width: 0 就会让 max-width 遵照大家目的在于的那么举办职业。

那正是开垦者工具的 Computed Styles 面板中见到的值。记住你写的代码不断定是浏览器总计后的。

后来居上——CSS2.1陈述中的inline-block

绝对IE自定义的inline-block，CSS2.1引进的inline-block就好理解多了，它做了两件事：

1. 将成分变性为inline-level element；
2. 让要素产生新的BFC。

其次局部：先进的消除方案-独立的侧边和左边

利用这种办法你能够分级独立的渲染侧面和侧面部分。

一切都以同样的，只是越来越高档的CSS在发挥作用。

演示: 

JavaScript

.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; /* hide the base character */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { /* creates the left part */ display:block; z-index:1; position:absolute; top:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the right part */ display:block; direction: rtl; /* very important, will make the width to start from right */ position:absolute; z-index:2; top:0; left:50%; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }

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 27 28 29 30 31 32 33 34

.halfStyle {     position:relative;     display:inline-block;     font-size:80px; /* or any font size will work */     color: transparent; /* hide the base character */     overflow:hidden;     white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { /* creates the left part */     display:block;     z-index:1;     position:absolute;     top:0;     width: 50%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #f00; /* for demo purposes */     text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the right part */     display:block;     direction: rtl; /* very important, will make the width to start from right */     position:absolute;     z-index:2;     top:0;     left:50%;     width: 50%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #000; /* for demo purposes */     text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }

---

---

讨论

页面出现极度的原故大概过多何况不尽一样。分化浏览器对规范的完毕存在差距是普及存在的情状。比较于编写四个疯狂的浏览器 bug 目录，消除难点的最有效流程还是一贯维持条理性。总计来看可行的章程满含：

• 评估 bug，施行高效修复
• 行使起码的代码再现问题
• 使用工具和 bug 追踪描述原因

• 选取越来越灵敏的代码修复难题，大概利用注释过的hack花招，亦或拷贝别本修复

  1 赞 3 收藏 评论

消灭尾行者

方今我们好不轻易知道通过display:inline-block进展成分的水准排版时，为何会有个讨人厌的跟屁虫了，那剩下的劳作本来是去而快之啦。首先这些跟屁虫实质上正是white-space字符串，而大家日常会输入的就是ASCII space( )、ASCII tab( )和让HTML 马克up更可读的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字符串，但那种丑不是普普通通的人能经受的。

-水平一半

Demo

JavaScript

.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; /* hide the base character */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { /* creates the top part */ display:block; z-index:2; position:absolute; top:0; height: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the bottom part */ display:block; position:absolute; z-index:1; top:0; height: 100%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }

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 27 28 29 30 31 32

.halfStyle {     position:relative;     display:inline-block;     font-size:80px; /* or any font size will work */     color: transparent; /* hide the base character */     overflow:hidden;     white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { /* creates the top part */     display:block;     z-index:2;     position:absolute;     top:0;     height: 50%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #f00; /* for demo purposes */     text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the bottom part */     display:block;     position:absolute;     z-index:1;     top:0;     height: 100%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #000; /* for demo purposes */     text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }

---

---

font-size:0大法

这种办法存在宽容性的标题，而且子成分需求再行安装font-size以担保持续选取em设置属性值准确有效那么些便是叁个巨蛋疼的事了。

-垂直1/3

Demo

JavaScript

.halfStyle { /* base char and also the right 1/3 */ position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; /* hide the base character */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ color: #f0f; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } .halfStyle:before { /* creates the left 1/3 */ display:block; z-index:2; position:absolute; top:0; width: 33.33%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the middle 1/3 */ display:block; z-index:1; position:absolute; top:0; width: 66.66%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #af0; /* for demo purposes */ }

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 27 28 29 30 31 32 33 34

.halfStyle { /* base char and also the right 1/3 */     position:relative;     display:inline-block;     font-size:80px; /* or any font size will work */     color: transparent; /* hide the base character */     overflow:hidden;     white-space: pre; /* to preserve the spaces from collapsing */     color: #f0f; /* for demo purposes */     text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } .halfStyle:before { /* creates the left 1/3 */     display:block;     z-index:2;     position:absolute;     top:0;     width: 33.33%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #f00; /* for demo purposes */     text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the middle 1/3 */     display:block;     z-index:1;     position:absolute;     top:0;     width: 66.66%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #000; /* for demo purposes */     text-shadow: 2px 2px 0px #af0; /* for demo purposes */ }

---

---

负margin-right法

规律是透过负margin-right将white-space字符收入盒子后方，而margin-right的属性值须求基于font-size来调节，必需恰恰等于字形宽度的负数，不然会合世成分重叠的标题。(IE5.5/6/7不相称那玩的方法)

-水平 1/3

Demo

JavaScript

.halfStyle { /* base char and also the bottom 1/3 */ position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ color: #f0f; text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } .halfStyle:before { /* creates the top 1/3 */ display:block; z-index:2; position:absolute; top:0; height: 33.33%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #fa0; /* for demo purposes */ } .halfStyle:after { /* creates the middle 1/3 */ display:block; position:absolute; z-index:1; top:0; height: 66.66%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #af0; /* for demo purposes */ }

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 27 28 29 30 31 32 33 34

.halfStyle { /* base char and also the bottom 1/3 */     position:relative;     display:inline-block;     font-size:80px; /* or any font size will work */     color: transparent;     overflow:hidden;     white-space: pre; /* to preserve the spaces from collapsing */     color: #f0f;     text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } .halfStyle:before { /* creates the top 1/3 */     display:block;     z-index:2;     position:absolute;     top:0;     height: 33.33%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #f00; /* for demo purposes */     text-shadow: 2px -2px 0px #fa0; /* for demo purposes */ } .halfStyle:after { /* creates the middle 1/3 */     display:block;     position:absolute;     z-index:1;     top:0;     height: 66.66%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #000; /* for demo purposes */     text-shadow: 2px 2px 0px #af0; /* for demo purposes */ }

---

---

引入HTML预编译

引进如Jade等HTML模板引擎，开拓和爱惜时接纳可读性可维护性更加高的言语，而浏览器运转时则选用效能更佳但可读性差以至非人类自身的编码，然后经过如sourcemap来做映射。

但若只是为焚薮而田本文的难题而引进HTML模板引擎，是还是不是小题大造了啊？

-HalfStyle改进 @KevinGranger

DEMO

JavaScript

body{ background-color: black; } .textToHalfStyle{ display:block; margin: 200px 0 0 0; text-align:center; } .halfStyle { font-family: 'Libre Baskerville', serif; position:relative; display:inline-block; width:1; font-size:70px; color: black; overflow:hidden; white-space: pre; text-shadow: 1px 2px 0 white; } .halfStyle:before { display:block; z-index:1; position:absolute; top:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; color: white; }

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 27 28 29 30 31

body{     background-color: black; }   .textToHalfStyle{     display:block;     margin: 200px 0 0 0;     text-align:center; }   .halfStyle {     font-family: 'Libre Baskerville', serif;     position:relative;     display:inline-block;     width:1;     font-size:70px;     color: black;     overflow:hidden;     white-space: pre;     text-shadow: 1px 2px 0 white; } .halfStyle:before {     display:block;     z-index:1;     position:absolute;     top:0;     width: 50%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     color: white; }

---

---

用float啦！

既然上述措施皆不爽，而你又纯熟float的采取和注意事项，那直接换来float就好了。float的源委可参谋《CSS魔法堂：说说Float那一个被埋没的抱负》

 -PeelingStyle 改进的 HalfStyle @SamTremaine

总结

原来display:inline-block受委屈的这么多年，今后算是沉冤得雪了！都怪CSS2未有专门的布局模块，逼得我们东拼西凑地拼页面。所幸的是CSS3专设了Flexbox/Grid/Multi-columns Layout Modules，我们得以寄望越来越美好的明日了！

Demo and on samtremaine.co.uk

演示 和 samtremaine.co.uk

JavaScript

.halfStyle { position: relative; display: inline-block; font-size: 68px; color: rgba(0, 0, 0, 0.8); overflow: hidden; white-space: pre; transform: rotate(4deg); text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3); } .halfStyle:before { /* creates the left part */ display: block; z-index: 1; position: absolute; top: -0.5px; left: -3px; width: 100%; content: attr(data-content); overflow: hidden; pointer-events: none; color: #FFF; transform: rotate(-4deg); text-shadow: 0px 0px 1px #000; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.halfStyle {     position: relative;     display: inline-block;     font-size: 68px;     color: rgba(0, 0, 0, 0.8);     overflow: hidden;     white-space: pre;     transform: rotate(4deg);     text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3); } .halfStyle:before { /* creates the left part */     display: block;     z-index: 1;     position: absolute;     top: -0.5px;     left: -3px;     width: 100%;     content: attr(data-content);     overflow: hidden;     pointer-events: none;     color: #FFF;     transform: rotate(-4deg);     text-shadow: 0px 0px 1px #000; }

---

---

感谢

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

打赏帮助笔者写出更加多好作品，多谢！

打赏作者

第四部分：企图生育

定制差别的哈尔f-Style样式集可以用在同三个页面包车型大巴所需成分上。你能够定义多少个样式集并告诉插件要用哪多个。

插件在目的.textTo哈尔fStyle成分上采用data属性data-halfstyle=”[-CustomClassName-]”，全数都会活动更动。

由此，只要含有文本的要素增加了textToHalfStyle class和data属性 data-halfstyle="[-CustomClassName-]"，插件将完成剩下的工作。

一致页面中多少个哈尔f-Styles的 演示

JavaScript

jQuery(function($) { var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style; // Iterate over all class occurrences $('.textToHalfStyle').each(function(idx, halfstyle_el) { $halfstyle_el = $(halfstyle_el); halfstyle_style = $halfstyle_el.data('halfstyle'); halfstyle_text = $halfstyle_el.text(); halfstyle_chars = halfstyle_text.split(''); // Set the screen-reader text $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' halfstyle_text '</span>'); // Reset output for appending halfstyle_output = ''; // Iterate over all chars in the text for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i ) { // Create a styled element for each character and append to container halfstyle_output = '<span aria-hidden="true" data-content="' halfstyle_chars[halfstyle_i] '">' halfstyle_chars[halfstyle_i] '</span>'; } // Write to DOM only once $halfstyle_el.append(halfstyle_output); }); });

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

jQuery(function($) {     var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;       // Iterate over all class occurrences     $('.textToHalfStyle').each(function(idx, halfstyle_el) {         $halfstyle_el = $(halfstyle_el);         halfstyle_style = $halfstyle_el.data('halfstyle');         halfstyle_text = $halfstyle_el.text();         halfstyle_chars = halfstyle_text.split('');           // Set the screen-reader text         $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' halfstyle_text '</span>');           // Reset output for appending         halfstyle_output = '';           // Iterate over all chars in the text         for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i ) {             // Create a styled element for each character and append to container             halfstyle_output = '<span aria-hidden="true" data-content="' halfstyle_chars[halfstyle_i] '">' halfstyle_chars[halfstyle_i] '</span>';         }           // Write to DOM only once         $halfstyle_el.append(halfstyle_output);     }); });

除此以外，CSS样式集class的定义相称上述的 [-CustomClassName-] 部分，并且链到.halfStyle，由此大家将有.halfStyle.[-CustomClassName-]

JavaScript

/* start half-style hs-base */ .halfStyle.hs-base { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ color: #000; /* for demo purposes */ } .halfStyle.hs-base:before { display:block; z-index:1; position:absolute; top:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ pointer-events: none; /* so the base char is selectable by mouse */ overflow:hidden; color: #f00; /* for demo purposes */ } /* end half-style hs-base */ /* start half-style hs-horizontal-third */ .halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */ position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ color: #f0f; text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } .halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */ display:block; z-index:2; position:absolute; top:0; height: 33.33%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #fa0; /* for demo purposes */ } .halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */ display:block; position:absolute; z-index:1; top:0; height: 66.66%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #af0; /* for demo purposes */ } /* end half-style hs-horizontal-third */ /* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */ .halfStyle.hs-PeelingStyle { position: relative; display: inline-block; font-size: 68px; color: rgba(0, 0, 0, 0.8); overflow: hidden; white-space: pre; transform: rotate(4deg); text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3); } .halfStyle.hs-PeelingStyle:before { /* creates the left part */ display: block; z-index: 1; position: absolute; top: -0.5px; left: -3px; width: 100%; content: attr(data-content); overflow: hidden; pointer-events: none; color: #FFF; transform: rotate(-4deg); text-shadow: 0px 0px 1px #000; } /* end half-style hs-PeelingStyle */ /* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/ .textToHalfStyle.hs-KevinGranger { display:block; margin: 200px 0 0 0; text-align:center; } .halfStyle.hs-KevinGranger { font-family: 'Libre Baskerville', serif; position:relative; display:inline-block; width:1; font-size:70px; color: black; overflow:hidden; white-space: pre; text-shadow: 1px 2px 0 white; } .halfStyle.hs-KevinGranger:before { display:block; z-index:1; position:absolute; top:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; color: white; } /* end half-style hs-KevinGranger

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115

/* start half-style hs-base */ .halfStyle.hs-base {     position:relative;     display:inline-block;     font-size:80px; /* or any font size will work */     overflow:hidden;     white-space: pre; /* to preserve the spaces from collapsing */     color: #000; /* for demo purposes */ } .halfStyle.hs-base:before {     display:block;     z-index:1;     position:absolute;     top:0;     width: 50%;     content: attr(data-content); /* dynamic content for the pseudo element */     pointer-events: none; /* so the base char is selectable by mouse */     overflow:hidden;     color: #f00; /* for demo purposes */ } /* end half-style hs-base */   /* start half-style hs-horizontal-third */ .halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */     position:relative;     display:inline-block;     font-size:80px; /* or any font size will work */     color: transparent;     overflow:hidden;     white-space: pre; /* to preserve the spaces from collapsing */     color: #f0f;     text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } .halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */     display:block;     z-index:2;     position:absolute;     top:0;     height: 33.33%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #f00; /* for demo purposes */     text-shadow: 2px -2px 0px #fa0; /* for demo purposes */ } .halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */     display:block;     position:absolute;     z-index:1;     top:0;     height: 66.66%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     pointer-events: none; /* so the base char is selectable by mouse */     color: #000; /* for demo purposes */     text-shadow: 2px 2px 0px #af0; /* for demo purposes */ } /* end half-style hs-horizontal-third */   /* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */ .halfStyle.hs-PeelingStyle {     position: relative;     display: inline-block;     font-size: 68px;     color: rgba(0, 0, 0, 0.8);     overflow: hidden;     white-space: pre;     transform: rotate(4deg);     text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3); } .halfStyle.hs-PeelingStyle:before { /* creates the left part */     display: block;     z-index: 1;     position: absolute;     top: -0.5px;     left: -3px;     width: 100%;     content: attr(data-content);     overflow: hidden;     pointer-events: none;     color: #FFF;     transform: rotate(-4deg);     text-shadow: 0px 0px 1px #000; } /* end half-style hs-PeelingStyle */   /* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/ .textToHalfStyle.hs-KevinGranger {     display:block;     margin: 200px 0 0 0;     text-align:center; }   .halfStyle.hs-KevinGranger {     font-family: 'Libre Baskerville', serif;     position:relative;     display:inline-block;     width:1;     font-size:70px;     color: black;     overflow:hidden;     white-space: pre;     text-shadow: 1px 2px 0 white; } .halfStyle.hs-KevinGranger:before {     display:block;     z-index:1;     position:absolute;     top:0;     width: 50%;     content: attr(data-content); /* dynamic content for the pseudo element */     overflow:hidden;     color: white; } /* end half-style hs-KevinGranger

HTML:

JavaScript

<p> <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span> </p> <p> <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span> </p> <p> <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span> </p> <p style="background-color:#000;"> <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span> </p>

1 2 3 4 5 6 7 8 9 10 11 12

<p>     <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span> </p> <p>     <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span> </p> <p>     <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span> </p> <p style="background-color:#000;">     <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span> </p>

同一页面中八个哈尔f-Styles的 演示

赞 收藏 评论

打赏辅助自个儿写出越多好作品，感谢！

任选一种支付方式

1 赞 4 收藏 评论

关于作者：Carman

（博客园今日头条：@常见长剑） 个人主页 · 小编的小说

有关作者：^-^肥仔John

偏前端的临栈技术员 个人主页 · 小编的篇章 · 5 ·    

本文由星彩网app下载发布于前端技术,转载请注明出处：重新认知Box，是您不懂作者