数组使用简介,是您不懂我

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的底子?出名不如会见,上图了喂!
亚洲必赢官网 1
再来张切面图吧!
亚洲必赢官网 2
下边大家以 <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标准盒子模型。
    亚洲必赢官网 3

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  
亚洲必赢官网 4

JavaScript

width = content-width height = content-height

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

游走于IE box model 和 Standard 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>

亚洲必赢官网 5
对于inline-level box

XHTML

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

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

亚洲必赢官网 6
行级盒子的小幅怎么会是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>

亚洲必赢官网 7
对于inline-level box

XHTML

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

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

亚洲必赢官网 8
行级盒子被五马分尸了,可怜兮兮的。更可怜的是自身知道不了。。。
实际上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>

亚洲必赢官网 9
对于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>

亚洲必赢官网 10
看,行级盒子的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必须为诺玛l 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>

亚洲必赢官网 11

  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;}

亚洲必赢官网 12
当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;}

亚洲必赢官网 13
当父子元素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

亚洲必赢官网 14

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;}

亚洲必赢官网 15

归纳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>

亚洲必赢官网 16

虽然 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>

亚洲必赢官网 17
垂直方向

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>

亚洲必赢官网 18

 

 IFC

提起IFC那就无法不说line box,而line
box中度的计量办法方面已经叙述了,那line box的增幅呢?
line box默许情形下左边框与containing
block的左侧框接触,右侧框与containing
block的入手框接触。若存在floated兄弟盒子,则line box的宽窄为containing
block的宽窄减去floated-box的outer-box的幅度。
亚洲必赢官网 19
而inline-level box必须含有在line box中,若inline-level
box的white-space:nowrap或pre外的其他值时,就会将inline-level
box拆分为多个inline-level box并分散到多个line
box中,从而完结文字环绕图片的功力了。
亚洲必赢官网 20
再不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: 在长单词或URL地址内部开展换行
word-break normal:按照澳大利亚和非北美洲语言的公文规则,允许在单词内换行。
keep-all:让澳大利亚联邦(Commonwealth of Australia)语言文本就如非南美洲语言文本那样不容许在随机单词内换行。
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不一致实例证实

在处理换行难题上,大家要拍卖的对象分为澳国语言文本和非北美洲语言文本。对于欧洲语言文本是以字作为操作单元,而非亚洲语言文本是以单词作为操作单元。而换行是对准一定语言文本的操作单元来拍卖,所以默许情形下见面到一串没空格的“汉语”自动换行,而一串没空格的“英文”却并未换行的情景。
对于我们(澳大利亚联邦(Commonwealth of Australia)人)而言,一般选取 word-break:break-all;word-wrap:break-word; 来完结中国和英国文自动换行效果,但英文单词本身是无法这么概括残忍地换行的。
英语单词移行有早晚规则,归咎如下:
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.不论音节多少,专有名词不宜分写.例如:南希,Russia等.
13.缩写词、略写词或一些词的缩写情势不可移甲骨文写.例如:U.N.(联合国),P.R.C.(中华夏族民共和国),isn’t.
14.不可以构成一个音节的词尾不分写.例如:stopped等.
15.字母结合或辅音连缀不可移行.例如:machine,meat等.

CSS简化了上述的规则,若要求换行处恰好是一个复合词,就在原连字符号处分店;别的意况则全体单词移到下一行。由此选择 word-wrap:break-word; 就OK了。

除此以外我们还是能通过 word-break:keep-all;white-space:nowrap;
来达成打死都不换行的效果
总结                              
不少洒洒总算把Box
Model、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。欢迎加入翻译组。

后天,我们在来探视怎样接纳数组来保管DOM元素。
中央措施
.each();
在拍卖数组时,.each();方法是你最好的对象。它提供了一种很简单的法门来遍历数组的各样元素,假使有亟待还足以对中间的因素举行其余逻辑处理。例如,咱们可以即使你必要为页面中的每个div对象调用alert方法:
参照代码:

前言

每当来个必要既要水平排版又要设置一定高宽时,我就会想起display:inline-block,还有为了协理IE5.5/6/7的hack*display:inline;*zoom:1;。然后发现盒子间无端端多了个不得选的空白符,于是想尽办法修复这几个bug。

直到一天拜读了@一丝姐、@HAX等圣贤的秘笈后才茅塞顿开,原来自己错了。那不是bug,是自己不懂而已。

打赏协理我写出更加多好作品,谢谢!

任选一种支付格局

亚洲必赢官网 21
亚洲必赢官网 22

1 赞 3 收藏
评论

Mathew MacLean 提问

本人正在探寻:

一种办法为半个字符应用样式(在那种情形下,一半的字母是晶莹剔透的)。

本身当下早已查找并尝试的(不走运)

  • 渲染一半字符/字母的措施
  • 用CSS或JavaScript渲染字符的一有些
  • 对一个字符的50%用到CSS

以下是自我尝试达成的一个例证:

亚洲必赢官网 23

那么些是或不是有一个CSS或者JavaScript的缓解办法存在,仍然自己必须使用图片的措施?我不乐意利用图片的艺术,因为文件将最终是动态变化的。

 

复制代码 代码如下:

先行者——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>

亚洲必赢官网 24

经过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>

亚洲必赢官网 25

见鬼了,在前一个盒子内添加些文本就应运而生空隙了?其实那的确和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>

亚洲必赢官网 26

可以看出黑色块k和革命块h间存在一个空格,而绿色块k后也存在一个空格。不过代码中大家看看蓝灰色块间有4个&#x20HTML实体,为何只有一个空格呢?而肉色块中可是换了行而已,怎么就有个空格呢?

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

至于小编:^-^肥仔John

亚洲必赢官网 27

偏前端的临栈工程师
个人主页 ·
我的篇章 ·
5 ·
   

亚洲必赢官网 28

来自 Arbel 的特级回答:(1280+ 赞)

$$(‘div’).each(function() {
alert(‘a div’);
});

惠特e 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代码,上边的JavaScript代码将弹出几个alert对话框,每个div一个。
参照代码:

inter-word space——惠特e 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用来机关覆盖文本或多字符
  • 护卫文本的可读性,盲人或视障人员使用的显示器阅读器可甄别

复制代码 代码如下:

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

亚洲必赢官网 29
** FF5.0 **

  1. 对此初阶标签与第二个non-white-space字符间和终结标签与最后一个non-white-space字符间的white-space字符串将被忽视。
  2. 词义单元间的white-space字符串,以carriage return(
    )
    作为white-space合并单元的分界符,最终保留各合并单元的会师结果。
  3. 标签内仅包罗white-space字符串,那么那么些white-space字符串将被忽视。

亚洲必赢官网 30
** IE8+ **

  1. 对于初步标签与第三个non-white-space字符间和完工标签与最后一个non-white-space字符间的white-space字符串将被忽视。
  2. 词义单元间的white-space字符串,合并为1个(ASCII space)字符。
  3. 标签内仅包括white-space字符串,那么这一个white-space字符串将被忽视。

亚洲必赢官网 31

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

亚洲必赢官网 32
合并单元:合并单元包括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整体作为词义单元,从外部看根本不用管里面具体字符串是什么。

先是有的: 基本缓解方案

亚洲必赢官网 33

演示: 


那种办法用于其余动态文本或单个字符,并且都是自动适用的。所有你须求做的就是在目的文本上添加一个class,剩下的就化解了。

再就是,保留了初稿的可访问性,可以被盲人或视障人员使用的显示屏阅读器识别。

单个字符的兑现

纯CSS。所有你需求做的就是把.halfStyle
class用在各种你想要渲染一半体裁字符的因素上。

对此每个包蕴字符的span元素,你可以加上一个data属性,比如data-content=”X”,并且在伪元素上运用content:attr(data-content);那样,.halfStyle:before class将会是动态的,你不需求为每个实例进行硬编码

随便文本的完毕

只需添加textTo哈尔fStyle 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(‘&lt;span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&gt;’ + text + ‘&lt;/span&gt;’);
 
        // Reset output for appending
        output = ”;
 
        // Iterate over all chars in the text
        for (i = 0; i &lt; chars.length; i++) {
            // Create a styled element for each character and append to container
            output += ‘&lt;span aria-hidden="true" data-content="’ + chars[i] + ‘"&gt;’ + chars[i] + ‘&lt;/span&gt;’;
        }
 
        // Write to DOM only once
        $el.append(output);
    });
});

演示: 


<div>One</div>
<div>Two</div>

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

相持IE自定义的inline-block,CSS2.1引入的inline-block就好领悟多了,它做了两件事:

  1. 将元素变性为inline-level element;
  2. 让要素发生新的BFC。

第二片段:先进的化解方案-独立的左手和右手

亚洲必赢官网 34

行使那种措施你可以独家独立的渲染左侧和右手部分。

一切都是相同的,只是更尖端的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 */
}


.each();方法不须求您选择$$方法。创造一个数组的另一种艺术(就如大家前几天讲到过的)是使用.getElements();方法。
参考代码:

扑灭尾行者

今昔大家终于了然通过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字符串,但这种丑不是一般人能承受的。

-水平一半

亚洲必赢官网 35

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 */
}


$(‘body_wrap’).getElements(‘div’).each(function() {
alert(‘a div’);
});

font-size:0大法

那种方法存在包容性的问题,而且子元素要求再度设置font-size以确保后续选拔em设置属性值正确有效这一个就是一个巨蛋疼的事了。

-垂直1/3

亚洲必赢官网 36

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

亚洲必赢官网 37

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

亚洲必赢官网 38

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;
}


<div id=”body_wrap”>
<div>One</div>
<div>Two</div>
</div>

用float啦!

既然如此上述方法皆不爽,而你又熟练float的应用和注意事项,那直接换成float就好了。float的情节可参照《CSS魔法堂:说说Float那个被埋没的志向》

 -PeelingStyle 改进的 HalfStyle @SamTremaine

亚洲必赢官网 39

再有其它一种方法来成功那么些相同的职责,就是把这一个数组赋值给一个变量,然后对丰裕变量使用.each();方法:
参照代码:

总结

原来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-]",插件将完成剩下的工作。

亚洲必赢官网 40

同一页面中三个哈尔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(‘&lt;span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&gt;’ + halfstyle_text + ‘&lt;/span&gt;’);
 
        // Reset output for appending
        halfstyle_output = ”;
 
        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i &lt; halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += ‘&lt;span aria-hidden="true" data-content="’ + halfstyle_chars[halfstyle_i] + ‘"&gt;’ + halfstyle_chars[halfstyle_i] + ‘&lt;/span&gt;’;
        }
 
        // 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的 演示

赞 收藏
评论

// 首先你必要经过语句”var VARIABLE_NAME“来声称一个变量
// 然后用等于运算符”=“来给那一个变量赋值
// 在那么些事例中,是一个带有div元素的数组
var myArray = $(‘body_wrap’).getElements(‘div’);
// 现在你就可以把这几个变量当数组选取器使用了
myArray.each(function() {
alert(‘a div’);
});

打赏援助我写出更加多好文章,谢谢!

任选一种支付办法

亚洲必赢官网 41
亚洲必赢官网 42

1 赞 4 收藏
评论

有关小编:Carman

亚洲必赢官网 43

(新浪天涯论坛:@常见长剑)

个人主页 ·
我的稿子

亚洲必赢官网 44

最后,若是你或许想把您的函数从拔取器中独立出来。大家会在前些天的关于选拔函数的教程中更深远地上课那一个题材。不过,现在大家能够创建一个极度不难的以身作则:
参考代码:

至于小编:^-^肥仔John

亚洲必赢官网 45

偏前端的临栈工程师
个人主页 ·
我的文章 ·
5 ·
   

亚洲必赢官网 46

复制代码 代码如下:

var myArray = $(‘body_wrap’).getElements(‘div’);
// 要开创一个函数,你可以像刚刚一致声雅培(Abbott)(Beingmate)个变量,然后给它取名
// 在等号前面使用”function()“来声称这一个变量为一个函数
// 最终,在 { 和 }之间写入你的函数代码
var myFunction = function() {
alert(‘a div’);
};
// 现在您就足以在.each();.方法里面调用刚才的函数了
myArray.each(myFunction);

在意:当您像刚刚那么在.each();.方法里面调用函数时,你不须求给函数名加上引号。
复制一个数组
$A
MooTools提供了一个简约的法门——通过$A函数来复制一个数组。让大家像刚刚那样选择变量成立一个数组:
参照代码:

复制代码 代码如下:

// 创造你的数组变量
var myArray = $(‘body_wrap’).getElements(‘div’);

复制一个数组(创设该数组的副本):
参考代码:

复制代码 代码如下:

// 建立一个新的变量名,命名为”myCopy“,然后把”myArray“的副本赋值给它
var myCopy = $A(myArray );

从数组中获得指定的元素
.getLast();
.getLast();方法再次回到数组中最终一个元素。首先大家建立一个数组:
参考代码:

复制代码 代码如下:

var myArray = $(‘body_wrap’).getElements(‘div’);

今昔大家得以从那些数组中赢得最后一个因素:
参考代码:

复制代码 代码如下:

var lastElement = myArray.getLast();

变量lastElement现在的值就是数组myArray中的最终一个元素了。
.getRandom();
和.getLast();一样,不过它恣意从数组中收获一个因素:
参照代码:

复制代码 代码如下:

var randomElement = myArray.getRandom();

变量randomElement现在的值就是从数组myArray中擅自选取的一个元素了。
向数组中添加一个要素
.include();
由此那个格局,你可以给数组添加其余一个因素。只要把元素选取器传给.include();方法,它就会含有到你的数组中。大家采纳下边的HTML代码:
参考代码:

复制代码 代码如下:

<div id=”body_wrap”>
<div>one</div>
<div>two</div>
<span id=”add_to_array”>add to array</span>
</div>

大家可以像此前那么调用”body_wrap“上边的持有div一样来创设一个数组:
参考代码:

复制代码 代码如下:

var myArray = $(‘body_wrap’).getElements(‘div’);

要把其它一个要素添加到这几个数组中,首先你须求把那几个因素赋值给一个变量,然后使用include方法:
参考代码:

复制代码 代码如下:

// 首先把你的元素赋值给一个变量
var newToArray = $(‘add_to_array’);
// 然后把它添加到数组
myArray.include(newToArray);

现今,那几个数组就同时富含div和span元素了。
.combine();
和.include();方法一致,然而它可以让您把一个数组添加到一个已经存在的数组中,而不用担心有重复的情节。借使大家今日从底下的HTML中获取了五个数组:
参照代码:

复制代码 代码如下:

<div id=”body_wrap”>
<div>one</div>
<div>two</div>
<span class=”class_name”>add to array</span>
<span class=”class_name”>add to array, also</span>
<span class=”class_name”>add to array, too</span>
</div>

大家可以如此树立两个数组:
参考代码:

复制代码 代码如下:

// 就如大家原先那么建立你的数组
var myArray= $(‘body_wrap’).getElements(‘div’);
// 然后建立一个怀有CSS类名为.class_name的元素数组
var newArrayToArray = $$(‘.class_name’);

近来我们可以使用.combine();方法来归并四个数组,那么些方法会自己处理重复的因素,因而大家不要求处理:
参照代码:

复制代码 代码如下:

// 把数组newArrayToArray合并到数组myArray中
myArray.combine(newArrayToArray );

当今myArray就带有了newArraytoArray中的所有因素。
代码示例
数组可以让你遍历包括所有品类的列表,并对每个元素执行同一的代码。在那一个事例中,注意变量”item“作为当下元素的替代符的选择。
参考代码:

复制代码 代码如下:

//
创立一个数组,这一个数组包罗”body_wrap“里面所有CSS类名为.class_name的元素
var myArray = $(‘body_wrap’).getElements(‘.class_name’);
// 首先创制一个要添加到数组中的元素
var addSpan = $(‘addtoarray’);
// 然后创建一个要统一的数组
var addMany = $$(‘.addMany’);
// 现在我们把元素addSpan参预到数组中
myArray.include(addSpan);
// 然后联合数组addMany到myArray中
myArray.combine(addMany);
// 建立一个索要对数组中的每个元素都要履行的函数
var myArrayFunction = function(item) {
// item现在针对数组中的当前因素
item.setStyle(‘background-color’, ‘#eee’);
}
// 现在对数组中的每个项目调用myArrayFunction函数
myArray.each(myArrayFunction);

参照代码:

复制代码 代码如下:

<div id=”body_wrap”>
<div class=”class_name”>one</div><!– this has gray
background –>
<div>two</div>
<div class=”class_name”>three</div><!– this has gray
background –>
<span id=”addtoarray”>add to array</span> <!– this has
gray background –>
<br /><span class=”addMany”>one of many</span> <!–
this has gray background –>
<br /><span class=”addMany”>two of many</span> <!–
this has gray background –>
</div>

延伸学习

以此科目并从未打算涵盖你能对数组做的总体事务,可是希望可以给你一个参照,告诉你MooTools提供了一部分什么意义。要上学越多关于数组的事物,请仔细阅读这个情节:

  • 文档中的数组部分
  • 以此页面中有很多关于JavaScript数组的信息

下载一个涵盖你从头所急需的具有东西的zip包

包含一个概括的html文件、MooTools
1.2中坚库、一个外表JavaScript文件、一个css文件和地点的有所例子。

网站地图xml地图