12个很少被人知道的CSS事实
12个很少被人知道的CSS事实
CSS不是一门很复杂的语言，但是即使你已经写css很多年了，也很有可能遇到一些新玩意儿-某些属性从来没用过，某些值从来未曾考虑，或者某些规范细则你从来不知道。
我经常会遇到一些css小细节，所以我想在这片文章中和大家分享，需要承认的是，这篇文章中的很多东西并不具有实操价值，但也许你可以留作后用。
1、body上的color不只是应用于文字
让我们从最简单的开始吧，color属性是被广泛运用的属性，某些人可能不曾注意，它并不仅仅只是定义文本的颜色。
让我们看这个例子：
css代码：
body {
color: yellow;
background: #444;
font-size: 20px;
font-family: Arial, sans-serif;
text-align: center;
}
ul {
border: solid 2px;
text-align: left;
}
ol {
text-align: left;
}
hr {
border-color: inherit;
}
a {
color: white;
}
请注意我们只是给body设定了color为yellow，但是你可以看到，页面里的元素都变成了黄色，他们包括:
➤图片的alt文字的值，就是当图片源载入不了时显示的文字
➤列表元素的边框
➤无序列表的点
➤有序列表的数字
➤hr元素
有趣的是，hr元素默认是不会继承color属性得，我需要强制他继承border-color: inherit，这对我来说有点怪异。
W3c规范是这么定义的:
这个属性用来描述元素的文本的前景颜色，附带被用来为其他接受颜色值的其他属性提供潜在的间接的值。
我不是很明确地知道有哪些是被当做所谓的前景的，如果你知道的话，请在评论中告诉我。
2、visibility还可以设置 “collapse”值
你可能已经用过visibility上千遍了，最常用的是visible和hidden，用来使元素显示或者隐藏。
还有第三个很少被用到的值是collapse，除了在表格的行，列中使用有差异外，他和hidden的作用是等同的。
下面让我们看看在表格元素中，collapse是怎么工作的，不过前提是table的border-collapse需要设定成separate才会有效果哦！
HTML代码：
<table cellspacing="0" class="table">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Rocks</th>
</tr>
<tr>
<td>Apple</td>
<td>Celery</td>
<td>Granite</td>
</tr>
<tr>
<td>Orange</td>
<td>Cabbage</td>
<td>Flint</td>
</tr>
</table>
<p><button>COLLAPSE ROW 1</button></p>
<p><button>HIDE ROW 1</button></p>
<p><button>RESET</button></p>
<p>See <a href="http://www.sitepoint.com/12-little-known-css-facts/">article</a>
.</p>
CSS代码：
body {
text-align: center;
padding-top: 20px;
font-family: Arial, sans-serif;
}
table {
border-collapse: separate;
border-spacing: 5px;
border: solid 1px black;
width: 500px;
margin: 0 auto;
}
th, td {
text-align: center;
border: solid 1px black;
padding: 10px;
}
.vc {
visibility: collapse;
}
.vh {
visibility: hidden;
}
button {
margin-top: 5px;
}
CSS-Trick 网站的Almanac同学说不要用这个属性，因为这个属性存在兼容问题。
我的测试结果是：
➤在Chrome中，collapse和hidden的表现并无不同（请看bug报告和讨论）
➤在firefox，opera和ie11中，collpase的工作是正常的，那就是，表格的行被清除了，而且不再占据空间。
我得承认，这个值可能很少会被用到，但是他确实是存在的。
3、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中来一起 感受它:
这些新值在现代浏览器中工作完美，但是你可能需要为不支持的浏览器优雅降级。
4、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也会跟着变化:
JS代码：
CSS代码：
HTML代码：
你也可以通过设定position：fixed来让clip变得有效，因为根据规范，fixed元素有资格被当做absolute元素。
5、垂直百分比是根据父层的宽度计算的，而不是父层高度计算的
这个说起来有一点麻烦，你应该知道百分比宽度是根据父层的宽度计算的，但是如果像padding，margin这样的属性用上百分比的时候，最终的结果是根据父层的宽度计算的，而不是根据父层的高度计算。
大家来看这个例子：
HTML代码：
CSS代码：
body {
font-family: Arial, sans-serif;
padding-top: 30px;
text-align: center;
}
.wrapper {
width: 400px;
margin: 0 auto;
border: solid 1px black;
}
.box {
width: 100px;
height: 100px;
background: gold;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: 5%;
}
.range {
display: block;
margin: 20px auto;
}
output {
text-align: center;
display: block;
font-weight: bold;
padding-bottom: 20px;
}
output span {
font-weight: normal;
}
JS代码：
注意当我们滑动滑块的时候，只是改变了父层容器的宽度，但是padding-bottom的值却产生了变化。
6、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也是这样：
HTML代码：
CSS代码：
body {
font-family: Arial, sans-serif;
}
.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: peachpuff chartreuse thistle firebrick;
border-style: solid dashed dotted double;
border-width: 10px 3px 1px 8px;
}
p {
text-align: center;
}
这里的重点是，你没法用border这个属性为四条边做出不同的颜色，宽度，样式，所以属性简写再简写后，表达就变得不那么精确了。
7、text-decoration实际上是三种属性的简写
我知道这篇文章所说的的可能会让你有一点点晕。
根据w3c规范，现在这个语句是符合标准的:
a {
text-decoration: overline aqua wavy;
}
text-decoration现在是这三个属性的缩写：text-decoration-line, text-decoration-color和text-decoration-style.
不幸的是，目前只有firefox一家支持这个新属性:
HTML代码：
CSS代码：
body {
padding: 30px;
text-align: center;
font-family: Arial, sans-serif;
}
a, a:visited {
color: blue;
background: aqua;
-moz-text-decoration-color: aqua;
-moz-text-decoration: overline;
-moz-text-decoration-style: wavy;
text-decoration-color: aqua;
text-decoration: overline;
text-decoration-style: wavy;
}
JS代码：
在这个demo中，我们用了类似text-decoration-color这样的写法，我知道这样写很不爽，因为目前很多浏览器不支持，如果我们直接写text-decoration: overline aqua wavy;的话，无疑目前的浏览器识别不了这样的写法，于是只能不解析有，所以为了向下兼容，我们只能这么写了。
8、border-width 支持关键字值
这个并不是那么惊天地泣鬼神，但是除了接受标准的值外（像5px或者1em），border-width同时还接受三个关键字值: medium, thin,和 thick。
实际上，border-width的初始值是medium，下面这个例子中用的是thick:
HTML代码：
CSS代码：
body {
font-family: Arial, sans-serif;
text-align: center;
}
.example {
width: 100px;
height: 100px;
margin: 20px auto;
background: aqua;
border: solid thick red;
}
当浏览器渲染这些关键字值得时候，规范并没有要求他们用特定的宽度值，但是在我的测试中，所有的浏览器都是把这三个值转化成了1px，3px，和5px。
9、很少有人用border-image
我曾经写过一篇关于css3的 border-image的文章，这个特性已经被现代浏览器很好的支持了，除了ie10及以下版本。但是有人在意吗？
如果你不喜欢阅读英文，你可以阅读我早前写的一篇关于CSS3的border-image的基础教程。——@大漠
它看起来是一个很优美的特性，允许你创建流动的图片边框，在这个例子中，你可以缩放窗口来观察图片边框的流动。
HTML代码：
CSS代码：
body {
font-family: Arial, sans-serif;
text-align: center;
}
不幸的是，border-image仍然像一个新奇事物一样并未被很多人使用。但也许我是错的。如果你知道有哪个真实案例中有使用border-image，或者你就使用过它的话，请在评论中让我知道，我会很乐意承认我错了。
10、还存在empty-cells 这样一个属性
这个属性是被广泛支持的，包括ie8，它写起来是这个样子的：
table {
empty-cells: hide;
}
你也许已经知道了，它是用在表格中的，它告诉浏览器是否显示空的单元格。试着点击切换按钮来观察empty-cells的效果：
HTML代码：
<table cellspacing="0" id="table">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Rocks</th>
</tr>
<tr>
<td></td>
<td>Celery</td>
<td>Granite</td>
</tr>
<tr>
<td>Orange</td>
<td></td>
<td>Flint</td>
</tr>
</table>
<button id="b" data-ec="hide">TOGGLE EMPTY-CELLS</button>
<p>See <a href="http://www.sitepoint.com/12-little-known-css-facts/">article</a>.</p>
CSS代码：
body {
text-align: center;
padding-top: 20px;
font-family: Arial, sans-serif;
}
table {
border: solid 1px black;
border-collapse: separate;
border-spacing: 5px;
width: 500px;
margin: 0 auto;
empty-cells: hide;
background: lightblue;
}
th, td {
text-align: center;
border: solid 1px black;
padding: 10px;
}
button {
margin-top: 20px;
}
JS代码：
在这个例子中，需要确保表格的边框是可见的，而且border-collapse没有被设定成 collapsed。
11、font-style 还有一个值是“oblique”
当我们使用font-style属性得时候，经常用到的两个值是normal和italic，但是你还可以给它另一个值oblique:
HTML代码：
CSS代码：
h1 {
font-weight: normal;
font-family: Georgia, serif;
font-style: oblique;
text-align: center;
font-size: 50px;
}
h1:nth-child(2) {
font-style: italic;
}
p {
font-family: Arial, sans-serif;
text-align: center;
}
但是它到底是个神马意思呢？还有就是它和italic看起来一样吗？
规范对于oblique是这么解释的：
应用oblique样式，如果没有的话就用italic样式
规范对于italic的解释和oblique基本上差不多，oblique这个词是一个排版术语，表示是在normal的基础上倾斜的字体，而不是真正的斜体。
由于css处理oblique的方式，其实它和italic是通用的，除非这个字体就是一个oblique字体。
而我从未听说过有oblique字体，但是也许我是错的。我的研究是，oblique是当一个字体没有真斜体的时候的一个仿斜体。
所以，如果我没有错的话，这就意味着如果一个字体没有真斜体字体，那么如果我们写了font-style:italic实际上会让字体变成font-style:oblique的形式。
下边这个图可以很直观的知道仿斜体和真斜体的区别。灰色的是oblique仿斜体。 ——@大圆 12个很少被人知道的CSS事实
12、word-wrap和overflow-wrap是等同的
word-wrap不是一个被经常用到的属性，但在某些情况下是非常有用的，一个常见的例子是让长url换行，以免它撑开父容器，例子如下：
HTML代码：
CSS代码：
body {
font-family: Arial, sans-serif;
text-align: center;
}
.p {
font-size: 24px;
text-align: center;
width: 200px;
margin: 20px auto;
border: solid 1px black;
min-height: 60px;
word-wrap: break-word;
}
button {
display: block;
margin: 0 auto;
}
JS代码：
var p = document.getElementById('p'),
b = document.getElementById('b');
b.onclick = function () {
if (this.getAttribute('data-ww') === 'break-word') {
p.style.wordWrap = 'normal';
this.setAttribute('data-ww', 'normal');
} else {
p.style.wordWrap = 'break-word';
this.setAttribute('data-ww', 'break-word');
}
};
由于这个属性是微软原创的，所以它被所有的浏览器支持了，包括ie5.5。
尽管它跨浏览器，而且被一贯地支持，W3C依然决定把word-wrap换成overflow-wrap- 我猜是之前的命名有点名不副实？ overflow-wrap和word-wrap有着同样的值，而word-wrap被当作是overflow-wrap的一个后补语法。
现在有一些浏览器是支持overflow-wrap的，但这么做貌似是无意义的，因为所有旧的浏览器都把word-wrap解析得很好，而且由于历史原因所有的浏览器都被要求继续支持word-wrap。
我们可以在浏览器升级后开始使用overflow-wrap，但是直到现在，我依然看不到换成新语法的意义何在。
这里边有多少是你不知道的呢？
不知你从这篇文章中有没有学到什么，我希望是这样，也许大多数有经验的css开发者知道很多，但是对于css新手应该会受益多一点。
大家都来扒一扒有几条是新发现呢？欢迎在评论中告诉我们！
广告内容
关注我们
