CSS躬行记（1）——CSS基础拾遗

一、box-decoration-break

　　CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行、跨列或跨页时的样式渲染，它包含两个值：

　　（1）slice：默认值，盒子会被分割成多部分。

　　（2）clone：断开的各个盒子会单独渲染。

　　下面用一个示例来演示两种的区别，第一个span元素采用box-decoration-break的默认值，效果如第一张图所示，在断行处没有左右内边距和圆角；第二个span元素box-decoration-break的值为clone，效果如第二张图所示，注意，在Chrome浏览器中要加属性前缀。

<style>
  span {
    border-radius: 10px;
    padding: 0 10px;
  }
  span.clone {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
</style>
<div>
  <span>测试CSS属性，box-decoration-break:slice</span>
</div>
<div>
  <span class="clone">测试CSS属性，box-decoration-break:clone</span>
</div>

 

　　box-decoration-break可影响的CSS属性包括background、border、border-image、box-shadow、border-radius、clip-path、margin和padding。

二、contents

　　当元素的CSS属性display定义为contents后，它就会消失，不参与页面的格式化，但不会隐藏子元素。

　　下面以两组ul元素为例，第一组的ul元素包含边框、宽度以及默认的边距和列表项标记，效果如第一张图所示；第二组的ul元素不再有之前的样式，效果如第二张图所示。

<style>
  ul {
    border: 1px solid #000;
    width: 100px;
  }
  ul.contents {
    display: contents;
  }
</style>
<ul>
  <li>Strick</li>
  <li>Freedom</li>
  <li>Justify</li>
</ul>
<ul class="contents">
  <li>Strick</li>
  <li>Freedom</li>
  <li>Justify</li>
</ul>

  

　　注意，浏览器会移除所有display定义为contents的元素的可访问性，这会导致该元素及其后续元素不再被屏幕阅读技术访问。

三、计数模式

　　@counter-style是一条CSS语句，可定义计数模式，即修改计数器样式，从而弥补了那些内置计数模式难以适应的场景。但要注意，目前只有Firefox浏览器能完美支持@counter-style。

　　每条@counter-style由一个名称和一组描述符组成，其可用的描述符如下表所列。

描述符	说明
system	指定计数算法，即计数器模式系统，可选值包括fixed、cyclic、symbolic、alphabetic、numeric、additive和extends
symbols	指定记号，可以是字符串、图像等标识符，除了additive和extends两种算法之外，都需要该描述符
additive-symbols	为additive算法指定记号
negative	当计数器表示负值时，将该符号加在值的两侧
prefix	为记号加前缀
suffix	为记号加后缀
range	限制计数器生效的范围，当值不在该范围时，使用备用计数算法
fallback	当不能使用自定义的计数算法或超出了range定义的范围时，使用该后备算法
pad	定义记号的最小长度和填充符号
speak-as	指定计数器在语音识别系统中的发音策略

1）system

　　在system描述符中有五个比较容易理解的算法，如下所列。

　　（1）fixed：在遍历了指定的记号后，恢复原来的计数模式。

　　（2）cyclic：循环遍历指定的记号。

　　（3）symbolic：与cyclic类似，但每循环一次会叠加一个记号。

　　（4）alphabetic：与symbolic类似，但重复方式不同，记号会被解释成数字，转换为字母编号系统。

　　（5）numeric：与alphabetic类似，也是使用按位计数系统，但第一个记号从位置1开始，而不是0。

　　五种算法的效果如下图所示，CSS代码如下所示，因为代码都比较类似，所以只给出了fixed。

@counter-style fixed-digits {
  system: fixed;
  symbols: ① ②;
}
ul {
  list-style: fixed-digits;
}

2）扩展计数模式

　　system描述符中的extends能够对现有的计数系统进行调整，例如将下面的digits中的每个记号用0来填充，并且添加冒号作为后缀。

@counter-style digits {
  system: numeric;
  symbols: "0" "1" "2";
}
@counter-style mydigits {
  system: extends digits;
  suffix: "：";
  pad: 3 "0";
}
ul {
  list-style: mydigits;
}

四、自定义属性

　　自定义属性（custom property）并不是新增一个特殊的CSS属性，而是声明一个CSS变量，它以“--”为前缀。如果要定义全局的CSS变量，可以将其声明到:root伪类中，如下所示。注意，自定义属性可声明在任意的选择器中。

:root {
  --orange-color: #F60;
}

　　通过var()函数来引用自定义属性，第一个参数是自定义属性的名称，第二个参数是备用值，如下所示。

p {
  color: var(--orange-color, #FC0);
}

　　虽然Sass、Less这些预处理器已经提供了变量，但是自定义属性与它们相比，其优势是实时性。因为它的值是由浏览器计算的，而预处理器是事先计算好的。

　　如果想体验自定义属性，但是又担心浏览器的兼容性，那么可以试试查询特性的@supports语句，可包含多个检测条件，其语法与媒体查询类似。当在不支持自定义属性的浏览器中运行下面这段CSS时，@supports内的声明块会被跳过。

@supports (--orange-color: #F60) {
  p {
    color: blue;
  }
}

五、颜色关键字

1） transparent

　　在CSS中，transparent关键字相当于rgba(0,0,0,0)。当作为background的属性值时（如下所示），仅仅是将元素的背景设为透明，元素中的内容还能显示。与opacity:0不同，opacity会把元素和内容当成一个整体，当定义为0时，两者都会透明。

p {
  background: transparent;
}
/* 不同 */
p {
  opacity:;
}

2）currentColor

　　此关键字表示当前元素的color属性的计算值。在下面的示例中，p是div的子元素，因为p的color属性继承自div的color属性，所以currentColor的值为#F60。

div {
  color: #F60;
}
div > p {
  background: currentColor;
}