CSS权威指南拾遗

前言

最近发现有些CSS知识是很基础的, 而CSS权威指南也有讲到的, 但我却遗漏掉了, 今天就做个补习, 把这些知识捡回来.

列表

1.list-style

对于列表样式, 我以前只知道list-style: none把列表默认的圆点去掉.

其实list-style是以下三个属性的简写:

  • list-style-type
  • list-style-image
  • list-style-position

list-style-type现在可以支持的值有很多, 我发现比较有意思的是, 它支持中国计数中的”天干”与”地支”, 它们的值分别是:cjk-heavenly-stem/cjk-earthly-branch. 经测试, Chrome/Safari/Firefox都可正常显示.

list-style-image可以指定图片来自定义列表标志. 通常, 可以用list-style-type来提供一个后路, 预防出现图片加载失败的情况.

1
2
3
4
ul li {
  list-style-image: url(//your-image.jpg);
  list-style-type: square;
}

list-style-position 用来确定标志是出现列表项内容之内还是之外. 默认值是outside. 此时如何使用大图片作为列表标志, 图片很可能看不见, 则需调整为inside

2.缩进

由于规范中并未指出列表内容应该如何缩进, 因此不同的浏览器实现的方式不同.

IE与Opera使用的是margin

1
2
3
4
ul, 
ol {
  margin-left: 40px;
}

而大多数基于Gecko(如Firefox)以及基于Webkit的浏览器使用的是padding

1
2
3
4
ul, 
ol {
  padding-left: 40px;
}

因此, 如果开发时想改变列表默认的缩进距离, 强烈建议同时指定padding与margin

1
2
3
4
5
ul, 
ol {
  margin-left: 0;
  padding-left: 1em;
}

光标

cursor属性的值除了auto与pointer, 还有很多有趣的值:

  • help 指示用户可以得到某种形式的帮助
  • wait和progress 都指示程序正忙, 而且图标极有可能是一样的. 不同处在于: 前者表示用户要等待直到程序不忙, 后者表示用户可以继续与程序交互, 尽管它很忙
  • grab与grabbing 指示抓取及抓取中, 可以结合h5的拖动功能来使用. webkit的浏览器使用时需要带前缀
  • no-drop与not-allowed 前者表示不能放东西, 后者表示禁止触摸. 不过二者图标极有可能是一样的
  • copy 在可以放东西的区域可以使用它, 比如文件拖拽上传的区域

同一个属性值, 在不同浏览器中显示的样式可能有所不同

轮廓

1.属性

outline其实是三个属性值的缩写, 与border类似:

  • outline-width
  • outline-style
  • outline-color

outline-color可以有值为invert, 这是border-color没有的. 它表示对屏幕上的像素反色. 不过, 我在Chrome与Firefox上测试过, 都没有效果, 只有在Safari有效, 也就是黑色而且, 感觉没多大用.

2.与border的区别

outline与border属性值很像, 但它们并不是同一样东西, 有着很重要的区别是:

  1. outline不在文档流之内, 这表明它有可能会覆盖其他元素
  2. outline可能不是矩形, 但却一定是有棱角的, 即不可能是圆形的.
  3. 一个元素四条边的outline是相同的, 即不能可能像border一样, 只设置一条边.
  4. outline-color可以是invert

因为outline与border并不是同一个东西, 所以它们可以同时出现.

Fork me on GitHub