【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou@dji.com, 合适的话当天回复,当天内推。 更多福利

##1.border-radius有“除”语法

这是一个很旧的知识,但是我觉得大部分前端新手都没见过。
不管你信不信,下面的代码是正确的。

1
2
3
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

如果你从没见过,那么可能会有些困惑,看看下面的解释:

如果“/”号左右都有值,那么左边的值表示水平半径,右边的值表示垂直半径。如果没有“/”号,那么水平半径和垂直半径相等。

所以我们可以通过“除”语法绘制出曲线圆角,你可以选择看看来自MDN的演示

See the Pen qdMWvb by Helkyle (@HelKyle) on CodePen.

##2.font-weight属性可以使用相关性关键字

通常我们使用font-weight的时候,值一般都是normal,bold,或者100900

但是,按照标准,font-weight还有可以设置为更粗更细,当没有更粗更细可以选择的时候,它将保持继承的状态。

See the Pen Using bolder/lighter Keywords with font-weight by SitePoint (@SitePoint) on CodePen.

注意上面的Demo包含了12个font-weight值不同的box元素,包括跟粗更细。注意这里的box元素是一层层嵌套的。

我们来研究下各个元素的font-weight值。

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
.box {
font-weight: 100;
}

.box-2 {
font-weight: bolder; /* maps to 400 */
}

.box-3 {
font-weight: bolder; /* maps to 700 */
}

.box-4 {
font-weight: 400;
}

.box-5 {
font-weight: bolder; /* maps to 700 */
}

.box-6 {
font-weight: bolder; /* maps to 900 */
}

.box-7 {
font-weight: 700;
}

.box-8 {
font-weight: bolder; /* maps to 900 */
}

.box-9 {
font-weight: bolder; /* maps to 900 */
}

.box-10 {
font-weight: lighter; /* maps to 700 */
}

.box-11 {
font-weight: lighter; /* maps to 400 */
}

.box-12 {
font-weight: lighter; /* maps to 100 */
}

因为字体本身的限制,所以取不到200,300等值。不过我们可以看到,bolderlighter确实起作用了,他们的取值为最接近的可选值。比如从100跳到400

##3.有一个outline-offset属性

我们都知道有一个outline属性在Debug的时候非常有用。然而标准还增加了一个outline-offset属性。用来定义outline距离元素的间隔

See the Pen The outline-offset property by SitePoint (@SitePoint) on CodePen.

上面的Demo中,滑动slider时,我们可以看到outline的范围变化了。当然,outline-offset可以用在大部分浏览器,除了IE。

##4.有一个table-layout属性
你应该也知道有一个display:table属性可以很容易实现垂直居中。但那不是我要说的,我们说的是table-layout

这个属性不是很好理解,我们先来看看规范怎么说的:

使用这个算法,table的水平布局不取决于单元格的内容,而是取决于table的宽度,列的宽度,边框或者空间。

这可能是w3c历史上最难理解的标准。同样,一个Demo能够帮助我们理解。

See the Pen Using the table-layout property by SitePoint (@SitePoint) on CodePen.

你可以看看Demo中使用table-layout: fixed和使用auto的区别。所以如果下次处理table的时候,你可以试试这个属性。

推荐一篇文章,如果你想深入了解的话可以看这里

##5.vertical-align属性在table cells与其他元素上的效果不相同

事实上vertical-align在不同元素(特别是表格)上效果不尽相同。
究竟有什么异同呢?

对于table cells以外的元素来说,vertical-align遵循下列原则:

  • 只作用于inlineinline-block元素。
  • 对元素的内容没有影响除非它修改了元素自身的排列(alignment)方式与其他行内元素关联。
  • 可能会被其他属性影响,比如line-height

看看Demo

See the Pen Using the vertical-align property on inline elements by SitePoint (@SitePoint) on CodePen.

vertical-align属性被用在input元素上,按下上面的按钮修改它的值。更深入的了解看这里

咱们再来看看和table cells有什么区别。

See the Pen Using vertical-align on table cells by SitePoint (@SitePoint) on CodePen.

看了上面的Demo,table cell的vertical-align仅有四种值。并且使用baseline的时候其他cell也会受影响,主要作用于内容上。

##6. ::first-letter伪元素选择器比你想象中聪明得多

::first-letter伪元素选择器允许你给一个元素的第一个字母写样式。

看看下面的Demo

See the Pen Testing ::first-letter by SitePoint (@SitePoint) on CodePen.

我在主流的浏览器上试过了,它们的处理结果都一样,这是一件好事。因为我觉得这样是正确的行为。虽然看上去有点奇怪,插入符被当成了first letter。更像是first letter自身的伪类first character

本文根据 @ Louis Lazaris 的文章所译,整篇译文带有我们自己的理解和意思,如果有译得不好的地方或者不对之处,还请大家指点。英文出处: 12 Little-Known CSS Facts

如需转载,请注明出处: http://w3ctrain.com / 2015/07/22/12-Little-Known-CSS-Facts/