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

Posted liuhao-web

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了12个很少被人知道的CSS事实相关的知识,希望对你有一定的参考价值。

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

2018-02-27 web前端开发

技术分享图片

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新手应该会受益多一点。

大家都来扒一扒有几条是新发现呢?欢迎在评论中告诉我们!

 

广告内容

 

技术分享图片

关注我们

 

技术分享图片

阅读 2015
8投诉

写留言技术分享图片








以上是关于12个很少被人知道的CSS事实的主要内容,如果未能解决你的问题,请参考以下文章

炫酷 CSS 背景效果的 10 个代码片段

拥有的50个CSS代码片段(上)

10个超级有用必须收藏的PHP代码样例

我可以有一个描述性属性很少的事实表吗

Java 编程语言中很少被人了解的特性-statement label

导航抽屉的片段管理