12个你未必知道的CSS小知识

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。

1.CSS的color属性并非只能用于文本显示

对于CSS的color属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方。

请注意,上面的代码里只使用了一个color属性,就是在body元素上,设置成了yellow。但是,你也看到了,所有这个页面上的东西都变成了黄色,包括:

  • 无法显示的图片的alt文字
  • list元素的边框
  • 无序list元素前面的小点
  • 有序list元素前面的数字
  • 还有hr元素

有趣的是,这个hr元素,缺省情况下它并不从body上继承color的属性,但我使用border-color: inherit强制让它继承。这是个很诡异的特征。

.CSS里的visibility属性有个collapse属性值:collapse

对于CSS里的visibility属性,相信你用过不下几百次。大多时候,你会把它的值设置成visible(这是所有页面元素的缺省值),或者是hidden。后者相当于display: none,但仍然占用页面空间。

其实visibility可以有第三种值,就是collapse。当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟display: none一样,也就是说,它们占用的空间也会释放。

但遗憾的是,各种浏览器对collapse值的处理方式不一样。

CSS-Tricks的Almanac建议说不要使用这个值,因为浏览器的不统一。

据我的观察:

  • 在谷歌浏览器里,使用collapse值和使用hidden值没有什么区别。 (See this bug report and comments)
  • 在火狐浏览器、Opera和IE11里,使用collapse值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。

说实话,估计这个值很少人会使用它,但你要知道确实可以使用这样的一个值,如果以前不知道它,那么,现在,在有些罕见的地方,你也许就会变得聪明一点了。

3.CSS的background简写方式里新增了新的属性值

在CSS2.1里,background属性的简写方式包含五种属性值 – background-color,background-imagebackground-repeatbackground-attachment, andbackground-position。从CSS3开始,又增加了3个新的属性值,加起来一共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;
}

关于浏览器的支持情况,大概所有的现代浏览器都支持这些新属性值,但对于一些非常老旧的浏览器(IE6/7/8),最好在代码里提供一些万一不支持的补救机制。

4.CSS的clip属性只在绝对定位的元素上才会生效

之前说到了background-clip,你可能会想到clip属性。它的用法是下面这个样子:

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

它的作用是按指定的尺寸、规定的大小裁剪元素。很多简单,但唯一你需要注意的事情是,clip只会在绝对定位的元素上生效。所有,你必须这样做:

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

但是,你也可以将元素的position设置成position: fixed,因为,根据css官方规范fixed的元素也属于‘absolutely positioned’元素。

5.元素竖向的百分比设定是相对于容器的宽度,而不是高度

这是一个很让人困惑的CSS特征,我之前也谈到过它。我们大家都知道,当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bottom等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。

下面是一个实例演示,你可以调整容器的宽度,但你会发现,黄块块的padding-bottom的距离也会随之宽度而变大或变小。

6.border属性比你想象的要复杂

我们很多人都用过这样的写法:

.example {
  border: solid 1px black;
}

这里的border属性的用法实际上是一种简写的形式,它分别设置了border-styleborder-width, 和border-color — 用一句代码表示它们三个。

但不要忘记,border-styleborder-width, 和border-color也都有自己的简写形式。所以,border-width可以写成这样:

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

其实,这些每个属性还可以继续细化,被拆分成border-left-style,border-top-widthborder-bottom-color….

但是,你无法用border的简写分别对四个边设置不同的值,只能分开来设置。所以,border是一个简写里还有简写的属性。

7.text-decoration属性变成了属性简写

我相信有些小知识会让你大吃一惊。

跟着最新的CSS规范,text-decoration现在的写法是这样的:

a {
  text-decoration: overline aqua wavy;
}

text-decoration属性现在需要用三种属性值来表示了:text-decoration-line,text-decoration-color, and text-decoration-style.

但不幸的是,目前只有火狐浏览器实现了对这些新属性的支持。

8.border-width属性可以使用预定义常量值

也许对与你来说这并不是一个什么新鲜信息。除了可以使用标准宽度值(例如5px或1em)外,border-width属性可以接受预定义的常量值:mediumthin, 和thick

事实上,如果你不给border-width属性赋值,那它的缺省值是“medium”。在浏览器使用这些预定义常量值时,CSS规范里并没有规定都应该是什么宽度,但从我的观察看,它们的值分别是 1px, 3px, 和 5px.

9.为什么没有人使用border-image

之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。

看起来这是一个非常漂亮的CSS功能,它可以让你用图片修饰元素的边框。下面是一个实例演示,你可以拖拽调整里面的方块的大小,看看有什么边框图案的变化。

html

<div class="bi lazy ">
<p><上面的方块使用了图片描边。在这个方块的右下角,有一个可以调整这个方块大小的小三角,点住它,拖动它调整方块大小,看看有什么效果。.</strong></p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

 css:

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.bi {
    border: 45px solid transparent;
    -webkit-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    -moz-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    width: 500px;
    margin: 30px auto 30px auto;
    overflow: hidden;
    resize: both;
}

10.你知道table里的empty-cells属性吗?

css里的empty-cells属性是所有浏览器都支持的,甚至包括IE8,它的用法是下面这个样子:

table {
  empty-cells: hide;
}

11.font-style的oblique属性值

对与css的font-style属性,我估计大家每次见到的都是使用“normal”或 “italic”两个属性值。但事实上,你还可以让它赋值为“oblique”。

这是什么意思?为什么“oblique”和斜体”italic”的效果是一样的?

CSS规范中是这样描述“oblique”的:

“…让一种字体标识为斜体(oblique),如果没有这种格式,就使用italic字体。”

这里描述所用的“oblique”和“italic”都是倾斜的意思。“oblique”在维基百科里的解释就是一种排版术语,就是一种倾斜的文字,但不是斜体。

因为“oblique”对于font-style来说是一种合法的属性值,它可和italic进行互换,除非真有一种字体只提供了oblique体而没有提供斜体。

但我似乎从来没有听说过哪种字形提供过oblique字体,也许我错了。研究发现,一种字库好像不能同时提供斜体和oblique两种字体,因为oblique基本上是一种模仿的斜体,而不是真正的斜体。

所以,如果我没有猜错的话,如果一种字库里没有提供斜体字,那当使用CSS的font-style: italic时,浏览器实际上是按font-style: oblique显示的。

12.word-wrap和overflow-wrap是等效的

word-wrap并不是一个很常用的CSS属性,但在特定的环境中确实非常有用的。我们经常使用的一个例子是让页面中显示一个长url时换行,而不是撑破页面。

尽管有所有的浏览器都支持,但W3C决定要用overflow-wrap替换word-wrap,我想可能是他们认为word-wrap用词不当。overflow-wrapword-wrap具有相同的属性值,但现在,word-wrap被当作overflow-wrap的备选写法。

虽然已经有不少的浏览器支持overflow-wrap这种写法,但看起来没必要使用overflow-wrap来让老的浏览器不支持。所有的浏览器都会继续支持word-wrap这种写法。

12个你未必知道的CSS小知识

时间: 2024-11-08 19:01:03

12个你未必知道的CSS小知识的相关文章

前端开发者应该知道的 CSS 小技巧

一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… CSS 1 2 3 4 5 /* 添加边框 */ .nav li { border-right: 1p

【前端词典】几个有益的 CSS 小知识

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTM

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

之前没有认真的研究过,padding-bottom的值如果是百分比,那么它的实际值是根据父类的宽度来调整的.我还以为是根据这个元素的本身的宽度来定义呢?汗..padding-top/padding-left/padding-right也是一样算. 不过现在有一个CSS3属性叫box-sizing,可以取值 box-sizing:content-box | border-box content-box: padding和border不被包含在定义的width和height之内.对象的实际宽度等于设

5种你未必知道的JavaScript和CSS交互的方法(转发)

5种你未必知道的JavaScript和CSS交互的方法 10/08. 2014 随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的.下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道! 用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元

几个有益的 CSS 小知识

样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class. 浏览器

12个css小知识

1.CSS的color属性并非只能用于文本显示对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方.它可以把页面上的所有的东西都变颜色.比如:无法显示的图片的alt文字list元素的边框无序list元素前面的小点有序list元素前面的数字还有hr元素 2.CSS里的visibility属性有个collapse属性值:collapse对于CSS里的visibility属性,相信你用过不下

5种你未必知道的JavaScript和CSS交互的方法

我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的.下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的.下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!用JavaScr

你应该知道的CSS文字大小单位PX、EM、PT

摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字 体, ... 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字 体,所以无法用浏览器字体放大的功能,而国外大多数网

你务必知道的css简写

简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起.比如 CSS 的 background 属性就是一个简写属性,它可以定义 background-color.background-image.background-repeat 和 background-position 的值.类似地,最常见的字体相关的属性可以使用