12个很少被人知道的CSS事实

浏览数：46 / 时间：2015年06月09日

之前没有认真的研究过，padding-bottom的值如果是百分比，那么它的实际值是根据父类的宽度来调整的。我还以为是根据这个元素的本身的宽度来定义呢？汗。。padding-top/padding-left/padding-right也是一样算。

不过现在有一个CSS3属性叫box-sizing，可以取值

box-sizing：content-box | border-box

content-box：: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ); 此属性表现为标准模式下的盒模型。
border-box：: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ); 此属性表现为怪异模式下的盒模型。

示例：

content-box:

.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

border-box:

.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

当出现用box-sizing:border-box时，它的大小同样是根据父类的宽度来调整的。但整体还是width。

CSS不是一门很复杂的语言，但是即使你已经写css很多年了，也很有可能遇到一些新玩意儿-某些属性从来没用过，某些值从来未曾考虑，或者某些规范细则你从来不知道。

我经常会遇到一些css小细节，所以我想在这片文章中和大家分享，需要承认的是，这篇文章中的很多东西并不具有实操价值，但也许你可以留作后用。

body上的color不只是应用于文字

让我们从最简单的开始吧，color属性是被广泛运用的属性，某些人可能不曾注意，它并不仅仅只是定义文本的颜色。

让我们看这个例子：

请注意我们只是给body设定了color为yellow，但是你可以看到，页面里的元素都变成了黄色，他们包括:

图片的alt文字的值，就是当图片源载入不了时显示的文字
列表元素的边框
无序列表的点
有序列表的数字
hr元素

有趣的是，hr元素默认是不会继承color属性得，我需要强制他继承border-color: inherit，这对我来说有点怪异。

W3c规范是这么定义的:

这个属性用来描述元素的文本的前景颜色，附带被用来为其他接受颜色值的其他属性提供潜在的间接的值。

我不是很明确地知道有哪些是被当做所谓的前景的，如果你知道的话，请在评论中告诉我。

visibility还可以设置 “collapse”值

你可能已经用过visibility上千遍了，最常用的是visible和hidden，用来使元素显示或者隐藏。

还有第三个很少被用到的值是collapse，除了在表格的行，列中使用有差异外，他和hidden的作用是等同的。

下面让我们看看在表格元素中，collapse是怎么工作的，不过前提是table的border-collapse需要设定成separate才会有效果哦！

CSS-Trick 网站的Almanac同学说不要用这个属性，因为这个属性存在兼容问题。

我的测试结果是：

在Chrome中，collapse和hidden的表现并无不同（请看bug报告和讨论）
在firefox，opera和ie11中，collpase的工作是正常的，那就是，表格的行被清除了，而且不再占据空间。

我得承认，这个值可能很少会被用到，但是他确实是存在的。

background这个简写又有了新值

在css2.1中，background是这5个值的缩写，background-color, background-image, background-repeat, background-attachment, background-position。现在，在css3中，又有三个成员被加进来了，现在总共有8个值，他们是：

background: [background-color] [background-image] [background-repeat]
        	[background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

请注意那个正斜杠，和font，border-radius类似，这个正斜杠允许你在写完position后加上background-size。

另外，还有两个可选的值是background-origin和background-clip。

实操中语法会变成这个样子

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

让我们在demo中来一起感受它:

这些新值在现代浏览器中工作完美，但是你可能需要为不支持的浏览器优雅降级。

clip只对absolute元素和fixed元素有效

上边我们谈到了backgrond-clip，现在我们谈谈clip，我们一般是这么写的:

.example {    
  clip: rect(110px, 160px, 170px, 60px);
}

我们用这个方法来剪切元素的一部分，但是它的前提是这个元素必须是absolute定位的(这里有解释)，所以代码变成这样

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

你可以看到当我们切换这个元素absolute定位的时候，clip也会跟着变化:

你也可以通过设定position：fixed来让clip变得有效，因为根据规范，fixed元素有资格被当做absolute元素。

垂直百分比是根据父层的宽度计算的，而不是父层高度计算的

这个说起来有一点麻烦，你应该知道百分比宽度是根据父层的宽度计算的，但是如果像padding，margin这样的属性用上百分比的时候，最终的结果是根据父层的宽度计算的，而不是根据父层的高度计算。

大家来看这个例子：

注意当我们滑动滑块的时候，只是改变了父层容器的宽度，但是padding-bottom的值却产生了变化。

border实际上是简写属性的简写

我们都写过这样的语句:

.example {
  border: solid 1px black;
}

border属性是border-style，border-width，border-color的简写但是请不要忘了，这三个属性每个属性都包含有自身的简写，比如:

.example {
  border-width: 2px 5px 1px 0;
}

这样会让四个border获得不同的宽度，同理，border-color和border-style也是这样：

这里的重点是，你没法用border这个属性为四条边做出不同的颜色，宽度，样式，所以属性简写再简写后，表达就变得不那么精确了。

text-decoration实际上是三种属性的简写

我知道这篇文章所说的的可能会让你有一点点晕。

根据w3c规范，现在这个语句是符合标准的:

a {
  text-decoration: overline aqua wavy;
}

text-decoration现在是这三个属性的缩写：text-decoration-line, text-decoration-color和text-decoration-style.

不幸的是，目前只有firefox一家支持这个新属性:

在这个demo中，我们用了类似text-decoration-color这样的写法，我知道这样写很不爽，因为目前很多浏览器不支持，如果我们直接写text-decoration: overline aqua wavy;的话，无疑目前的浏览器识别不了这样的写法，于是只能不解析有，所以为了向下兼容，我们只能这么写了。