12个鲜为人知的css现象（续集）

By hiluluke on

本文翻译自 12 little known css facts(the-sequel)
原作者是Natalia Balska

原作者在一年前也发表过一篇12个鲜为人知的css现象，然后这篇文章现在也还很受欢迎，有时间的同学可以看看。原作者又收集了更多的鲜为人知的css性质，也就是这篇文章的来源。

1、border-radius 有“／”的语法

首先，下面这个你信或则不信它都是一条border-radius的正确的代码：

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

如果你没见过，可能会有些困惑，下面是一些介绍：

如果给定的值中有“／”，则在“／”前面的值是指定水平方向的半径（radius），在“／”后面的就是指定垂直方向的半径（radius）。如果没有“／”，就是同时指定水平和垂直方向的半径（radius）。

border-radius 图解

上面的图片表示：border-top-left-radius: 55pt 25pt。

而带有“／”的border-radius能让你创建非对称的弯曲边角。原作者有有一篇文章详细讲了，或则你可以读下面的张鑫旭的这篇。另外，你也可以去MDN-boreder-radius,学习下。

border-radius值的设定在张鑫旭的博客秋月何时了，CSS3 border-radius知多少？上介绍的更为详细，有兴趣的同学可以去看看。

2、font-weight 的值可以设置为相对值

你应该在设置font-weight值时用过normal或则bold，更甚你可能用过100,200到900的百位数。

有两个值经常被忘记，他们是bolder和lighter。在他们的描述中，其是相对于其父元素的font-weight更粗，或则更细。

在基于百位数的值中，bold相当于700而normal相当于400。因此如果存在300的值，当父对象是400时，lighter就等于300。而当没有更小的font-weight值时（比如400是最小的），那么lighter最小只能是400。 存不存在100、200、到900的font-weight是由使用的字体相关的。

下面是一个codepen的demo

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

在上面的例子中使用的字体是Exo2，其有18种不同的样式，所以能够展示所有基于百位的font-weight。上面的css文件中注释中在中庸bolder和lighter展示了对应的值。

你会发现，上面的例子只会有100，400，700，900。并不会有200，300，500，600，800。

这是字体自己定义的，Exo2这个字体就定义了100，400，700，900这几种font-weight，所以再取bolder和lighter时会在这几个值种选（就像这个栗子）。

3、outine-offset属性

outine-offset 比较出名的是其能帮助debuging(因为它不影响页面布局)。就像它名字一样，他是定义元素的outline和元素的距离的。看下面一个demo：

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

对于outline-offset的不利就是，其能适用于所有浏览器除了ie11及以前。在移动端能够应用下。

4、table-layout属性（个人感觉最有用的属性）

你可能知道display:table（最简单粗暴的实现垂直居中的方式）。但是这个不是我们说的，我们说的是table-layout属性而不是display属性。

table-layout属性不是一个好描述的属性，我们先简单看个解释然后看个栗子。

table的水平宽度是取决于内容的，这个属性就是改变使其取决于一行的border、spacing等内容。

就算我转译了一下意思，应该还是不好理解。看下面的一个demo吧：

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

上面的demo种加入了table-layout:fixed,单击下面的按钮可以来回切换属性。

默认的是table-layout:auto。但是当有变化长度的内容时，你的排版会很乱（我之前是定的width：n％,当出现33.3% 时候就会有一列大一像素），这个时候使用fixed就很好。

5、vertical-align在table cells和其他属性表现不一致

如果你感web编程在2000年代中期或则更早，vertical-align属性是html4标准的valign属性。但是现在HTML5中就是过时的不合格的属性。

其实它并不只是在table中起作用，它在其他元素的定位上也很有意义。

那么它在其他元素和table cells中的表现有哪些不同？

当在其他元素中时：

  • 它只在inline和inline-block元素中起作用
  • 它对元素内容没影响，只对元素相对于其他inline和inline-block元素的位置有影响。
  • 它能够被相邻元素的text/font属性影响，比如line-height属性。

下面是一个栗子：

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

当在table cells中时，vertical-align表现就非常不同了。当你给多个table cells设置值时，他们会被不同的基线影响。

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

6、::first-letter伪元素比你想象中更智能

感觉再智能，我们也用的不多。主要是英文有种格式会用到，咱略过。如果你感兴趣可以去看原文。

7、你可以使用非法字符作为类名列表里

这个观点在Using slashes within the HTML class attribute中提到，然后我认为值得推荐。

ben的观点是使用“／”去将类名分组，从而使得类名更容易阅读。他在文章中指出保留的“／”符号虽然是一个非法字符，但是浏览器不会在使用它是阻断，而是忽略它。

你可能看到过如下的代码：

1
<div class="col col-4 col-8 c-list bx bx--rounded bx--transparent">

当使用“／”时，它就变成：

1
<div class="col col-4 col-8 / c-list / bx bx--rounded bx--transparent">

你能够使用任何字符（违规或则不违规）去产生相同的效果：

1
2
3
4
5
<div class="col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent">

<div class="col col-4 col-8 || c-list || bx bx--rounded bx--transparent">

<div class="col col-4 col-8 && c-list && bx bx--rounded bx--transparent">

当然，你不可以在css里面用上面的违规字符。比如下面这个就是违法的并且不能应用相应的样式。

1
2
3
./ {
  color: blue;
}

当你使用这些特殊字符在css中时需要转义。可以用这个工具转义。

比如上面的就会被转义为：

1
2
3
.\/ {
  color: blue;
}

其他编码的字符也可以使用，通过转义工具转义就行了。比如♥ ★。。。（感觉可以自己玩玩，生产环境这么弄，要被其他队友骂死）

8， Animation iterations 能够是分数

我们应该已经知道animation-iteration-count是用来说明keyframe 动画的播放次数的。比如：

1
2
3
.example {
  animation-iteration-count: 3;
}

上面的整数值表示动画将会播放3次，但是你可能不知道这里可以使用小数（分数）值。

1
2
3
.example {
  animation-iteration-count: .5;
}

上面这个动画将会在半路就停止，也就是在第一次播放动画中间时间停止。下面是一个栗子，点击按钮，观看。

See the Pen Using Fractional Iteration Count with Linear Timing Function by hiluluke (@hiluluke) on CodePen.

有趣的是，iteration duration是根据时间来算的。也就是说，如果你动画是移动100px，那么如上面值为0.5时，将可能不在50px停，这个和animation-timing-function有关。

比如下面的栗子，animation-timing-function设置的是ease：

See the Pen pgPmgw by hiluluke (@hiluluke) on CodePen.

具体就不解释了。上面栗子很好懂。

9， 动画规则缩写会被动画名字给阻断

这个很好理解，大概说下。就是如下

1
2
3
.example {
  animation: reverse 2s 1s;
}

在指定动画时用了将多个值都放在animation时，其中reverse又是animation-direction的关键字。所以这里在实际中将不会运行。

所以实际中，需要注意动画命名不要和关键字重复。

10，你能够选择一定范围的元素

不知道是谁最先使用，第一次看见是在这个demo。假设有一个20个元素的列表，你想要选择其中的7到14号，你可以像下面这样只是用一个选择器选择它：

1
2
3
ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}

See the Pen Selecting Ranges of Elements with CSS by hiluluke (@hiluluke) on CodePen.

感觉用到不会太多。有兴趣的看看原文吧。原文还指出了一个在safari上的bug。

11， 伪元素能够应用于一些空节点(没有结尾</>的节点)

有时候要给一些节点加伪元素，但是这些节点会被替换是不能添加伪元素的。这个时候就能使用哪些没有结尾的空节点，因为这些节点将不会被替换，比如hr节点。

See the Pen Pseudo-elements on a Horizontal Rule (

element) by hiluluke (@hiluluke) on CodePen.

你同样能在meta和link节点上加伪元素，只要你设置他们display:block；

See the Pen Adding pseudo-elements to meta tags and link (stylesheet) elements by hiluluke (@hiluluke) on CodePen.

12, 一些节点属性是大小写敏感的

1
2
<div class="box"></div>
<input type="email">

你可以使用属性选择来选取上面的节点：

1
2
3
4
5
6
7
div[class="box"] {
  color: blue;
}

input[type="email"] {
  border: solid 1px red;
}

上面很正常，但是如果像下面这样：

1
2
3
4
5
6
7
div[class="BOX"] {
  color: blue;
}

input[type="EMAIL"] {
  border: solid 1px red;
}

又会怎样呢？

上面的.box不会表现出blue的样式，因为class是大小写敏感的，而input会表现出相应的样式，因为其不名字不大小写敏感。

就这。

如果你要转载。记得说是从http://hiluluke.cn转载的。