2016/05/10 · CSS · inline-block
正文小编: 伯乐在线 -
^-^肥仔John
。未经小编许可,禁绝转发!
招待参加伯乐在线 专辑作者。
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个盒子组成:
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的上述情景前,大家要求补充一下:
display:none;
时,则对应0个box) 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; 所以我们请留神,前方高能,前方高能!!!
和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的特点:
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>
|
此处又涉嫌到另三个属性vertical-align了,由于它十二分复杂,依然另开小说来描述吧!
行级盒子小结
*就盒子模型来说***
*垂直排版本性***
inline-level box排版单位不是其本人,而是line 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">
<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的盒子**
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.
也就out-flow box不影响block-level box中度的测算。也正是解释了干吗div中仅含floated成分时,div盒子高度为0的景观了。
**对于发生新BFC的盒子**
对此发出新BFC的盒子来说,除了不爆发collapsing
margins的情形外,还应该有多个与浮点相关的场地。
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中度的总计。
宣誓不与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]()
打赏帮助作者写出越来越多好文章,多谢!
打赏笔者
2014/06/13 · CSS · CSS
本文由 伯乐在线 -
Carman
翻译。未经许可,禁绝转发!
英语出处:stackoverflow。招待加入翻译组。
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 收藏 评论
自己正在搜索:
一种办法为半个字符应用样式(在这里种处境下,四分之二的字母是晶莹的)。
自己当下早就查找并尝试的(不走运):
以下是笔者尝试完毕的三个例证:
以此是或不是有三个CSS或然JavaScript的消除形式存在,仍旧本身必得运用图片的艺术?作者不情愿利用图片的艺术,因为文件将最终是动态变化的。
假定 CSS 是你的机要办事语言,大概您对 CSS 有确定的领会和实行经验的话,解决 CSS 难点就有广大轻便易行的措施,否则的话,方法就少一些。
有经历的 CSS 开荒者恐怕都知道的局地 CSS 陷阱:
那般的 “bug” 有第一次全国代表大会堆。实际上根本未有bug,越多的是开拓者贫乏对浏览器行为的知情。更确切地说,是 CSS 代码让浏览器怎么办。
对这个 CSS 天性熟稔的开采者能够快捷稳固到难题还要修复。他们对 bug 的认知与这一个对 CSS 不打听的人会产素不相识歧。那样在化解 CSS bug 中对‘工作流’要求的最首要的认知就能人己一视。
对此‘火速修复’中从未遮盖的不熟悉难题,在开采者工具中靠猜来消除难点的措施已经没什么价值。纵然运气好主题素材被解决了,也很难判定出难点到底是何许被化解的。
假诺出现的主题材料无法被轻巧化解,先分明难题区域的限量,抓取 HTML 标签(约等于拷贝 DOM),步向下三个调节和测量检验阶段:还原和复发。
正规提醒:大好些个浏览器的开辟者工具会让您选拔包裹成分并拷贝 HTML 区块。在 Chrome 的开拓者工具中,要会同包裹成分一齐拷贝,供给点击 ‘Copy > Copy OuterHTML’。
当大家为支撑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洗礼的大家对上述内容不禁止开会发出多少个难题:
display:inline-block
后要么垂直方向排列呢?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个 
HTML实体,为何唯有二个空格呢?而木色块中仅仅换了行而已,怎么就有个空格呢?
先抛结论:上面两端代码均是white space、white space collasping再作祟。
偏前端的临栈技术员 个人主页 · 小编的文章 · 5 ·
本阶段的 CSS bug 修复在看似 Codepen 的提携下非常简单。咱们目标首若是复现出此难点 – 也便是挑起 bug 的代码。那能让我们火速牢固 bug,直捣白虎。
为清晰起见,只把有关的 HTML 和 CSS 提抽取来复现难题。你既可以够手打 HTML 对应的 CSS,也得以复制真实的代码。假诺或许的话,不用把持有 CSS 代码一股脑拷贝过去再现难题,保障最精简的要素就可以。保持逐步扩充 CSS 的习贯,难题就能够友善找到你。
在将在临近真相时,往往只供给多个非正规的 CSS 属性的更改就会让 bug 暴流露来。
相呼应的做法是,把持有 CSS 都扔进去复现难点,然后每一遍移除一点,直到难题现身。在施行中,笔者发觉那略笨,不用也一碗水端平,你也会有两样的意见。
日渐地增多或删除 CSS 代码已是复发难题和永远故障的原则性套路了。
初看之下以为正是空格键,其实white
space是一组空白字符和换行符组成。查看unicode字符集大家会意识有一大堆空白字符(如NO-BREAK
SPACE等),但HTML只把ASCII space( )
、ASCII tab( )
、ASCII form feed()
和Zero-width space()
归入white
space囊中,别的还将line
break(换行符)carriage return(
)
、line feed( )
和它俩的整合放入white
space中。
万一使用起码 CSS 代码复现难点时,效果如同原始代码同样。那也是行得通的,我们前日看 HTML 标签。
率先件事要做的,也是不能够跳过的,正是检查标签的得力。固然告知出大家不关切的主题素材(比方meta),起码能确认保障它不会以某种方式损坏美感。大家意在能窥见未密封的标签、未有引号的属性,以致另外任何大概影响浏览器剖析的标题。建议你选拔 W3C validator。
一经标签检查通过,将助长清除浏览器引进意外样式的或许。那样做:
率先,把全数因素改成 div(块级元素)和 span(行内元素),保障它们只被
CSS 的类选取器选中。也可能有必不可缺把额外的选择器移除,如把 a.link
改为
.link
。
通过运用固定的标签大家清除了浏览器针对一定成分引入暗中认可样式的大概性。表单成分是个特例(立即会在例子中看出)。
若果把全体因素改成 div 和
span,难点未有了,那么浏览器引进暗中认可样式的疑虑就被显明了。未来在
computed styles
面板中找找浏览器扩充了怎么着样式,想办法覆盖它。总来讲之便是要看计算后的体制。
西方文字是以空格来分隔单词的,而汉字间则无需空格分隔,但为了统一西方文字、南亚和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
性情不影响汉字间的间距,本来无一物什么地点惹尘埃呢。字形、单词间的等级次序间隔
比方简化 HTML 标签也并未有找到标题,並且是可牢固复现的,那么就该换个浏览器试一试。是还是不是一致的标题应时而生在 Chrome,IE,Safari 和 Firefox 上?倘使不是,哪个的展现是精确的?假设只有二个浏览器是错的,那么就值得去搜求一下一点青眼的 bug 追踪系统了:
是某浏览器的难点呢?也许是某浏览器的一定版本的主题素材?难点是否在修补中?有未有不影响此外浏览器的施工方案?实在可怜你可认为特定的浏览器编写修复代码吗?
过去本身曾详细描述过如何向浏览器提 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’)。
包容性难题又来了,因为各浏览器的落到实处均不尽同样。
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> 
</span></div>
|
** chrome43 **
carriage return(
)
作为white-space合併单元的发轫符,最后保留各合併单元的联结结果。carriage return(
)
用作white-space合併单元的扫尾符,最终保留各合併单元的合併结果。carriage return(
)
用作white-space合併单元的分界符,最终保留各合併单元的合併结果。
** FF5.0 **
carriage return(
)
作为white-space合併单元的分界符,最终保留各合併单元的统一结果。
** IE8 **
** IE5.5/6/7 **
集结单元:合併单元包括0到N个white-space字符串,最后合并为0到1个white-space字符
SGML描述B.3.1 Line
breaks
specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.
XHTML
<A>My favorite Website</A> <A> My favorite Website </A>
1
2
3
4
|
<A>My favorite Website</A>
<A>
My favorite Website
</A>
|
以管窥天翻译法:标签与正文间的line breaks要被忽略掉!也等于上下三种HTML格式的渲染效果应该同等。实际上巳了IE5.5/6/7外别的浏览器均遵循之一规定的。只怕你会说地点的试验不是已经注明chrome43不相信守那些法规吗?其实
XHTML
<A> My favorite Website </A>
1
2
3
|
<A>
My favorite Website
</A>
|
HTML格式等价于<A>#x000A;My favorite Website#x000A;</A>
而不是<A>#x000D;#x000A;My favorite Website#x000D;#x000A;</A>
。现在我们都了解了吧:)
绕到这里小编想我们皆有一点点晕了,到底这么些跟难点2有甚关系啊?先不要焦炙嘛,大家先记住两点:
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">
<span class="bk1 item"></span>
</div>
<div id="crayon-5b8f6d17e73c7306787940-2" class="crayon-line crayon-striped-line">
<span class="bk2 item"></span>
</div>
<div id="crayon-5b8f6d17e73c7306787940-3" class="crayon-line">
<br/><br/>
</div>
<div id="crayon-5b8f6d17e73c7306787940-4" class="crayon-line crayon-striped-line">
<span class="bk1 item">bk1</span>
</div>
<div id="crayon-5b8f6d17e73c7306787940-5" class="crayon-line">
<span class="bk2 item"></span>
</div>
</div></td>
</tr>
</tbody>
</table>
IE5.5/6/7下等价于
XHTML
<span> </span> <br/><br/> <span>bk1
</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-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">
<span>
</div>
<div id="crayon-5b8f6d17e73ca280682483-2" class="crayon-line crayon-striped-line">
</span>
</div>
<div id="crayon-5b8f6d17e73ca280682483-3" class="crayon-line">
<br/><br/>
</div>
<div id="crayon-5b8f6d17e73ca280682483-4" class="crayon-line crayon-striped-line">
<span>bk1
</div>
<div id="crayon-5b8f6d17e73ca280682483-5" class="crayon-line">
</span>
</div>
</div></td>
</tr>
</tbody>
</table>
对比一下上面的规则,空隙自然就有了。
IE8 下等价于
XHTML
<span> </span> <br/><br/>
<span> </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-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">
<span>&nbsp;
</div>
<div id="crayon-5b8f6d17e73cd347104087-2" class="crayon-line crayon-striped-line">
&nbsp;</span>
</div>
<div id="crayon-5b8f6d17e73cd347104087-3" class="crayon-line">
<br/><br/>
</div>
<div id="crayon-5b8f6d17e73cd347104087-4" class="crayon-line crayon-striped-line">
<span>&nbsp;
</div>
<div id="crayon-5b8f6d17e73cd347104087-5" class="crayon-line">
&nbsp;</span>
</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
面板中见到的值。记住你写的代码不断定是浏览器总计后的。
绝对IE自定义的inline-block,CSS2.1引进的inline-block就好理解多了,它做了两件事:
利用这种办法你能够分级独立的渲染侧面和侧面部分。
一切都以同样的,只是越来越高档的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 目录,消除难点的最有效流程还是一贯维持条理性。总计来看可行的章程满含:
选取越来越灵敏的代码修复难题,大概利用注释过的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字符串的影响。
今昔大家知晓如何是唯恐的,让大家来增加一些花样。
牺牲前
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设置属性值准确有效那么些便是叁个巨蛋疼的事了。
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将white-space字符收入盒子后方,而margin-right的属性值须求基于font-size来调节,必需恰恰等于字形宽度的负数,不然会合世成分重叠的标题。(IE5.5/6/7不相称那玩的方法)
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 */
}
|
引进如Jade等HTML模板引擎,开拓和爱惜时接纳可读性可维护性更加高的言语,而浏览器运转时则选用效能更佳但可读性差以至非人类自身的编码,然后经过如sourcemap来做映射。
但若只是为焚薮而田本文的难题而引进HTML模板引擎,是还是不是小题大造了啊?
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的源委可参谋《CSS魔法堂:说说Float那一个被埋没的抱负》
原来display:inline-block
受委屈的这么多年,今后算是沉冤得雪了!都怪CSS2未有专门的布局模块,逼得我们东拼西凑地拼页面。所幸的是CSS3专设了Flexbox/Grid/Multi-columns
Layout Modules,我们得以寄望越来越美好的明日了!
演示 和 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 收藏 评论
(博客园今日头条:@常见长剑) 个人主页 · 小编的小说
偏前端的临栈技术员 个人主页 · 小编的篇章 · 5 ·
本文由星彩网app下载发布于前端技术,转载请注明出处:重新认知Box,是您不懂作者