CSS技巧精粹-优快云博客

1. body

养成在 body 中设置背景色和颜色的习惯，因为有的用户会自定义浏览器的背景色。

2. 字体的选择

通用字体名称
通用字体名称	字体类型	示例	应用
serif	带有衬线字体	Times	印刷
sans-serif	无衬线字体	Arial	网页
monospace	固定宽度字体	Courier
cursive	模拟手写字体	Comic Sans
fantasy	用于标题等的装饰字体	Impact

参考文章：CSS字体：简书 http://www.jianshu.com/p/c5a4e15b4122

3. 通用选择器

通用选择器用一个星号（“*”）表示，作用类似于匹配文档中全部元素类型的通配符，用于设置整个文档的默认值。“*”与“body”元素应用默认样式稍有不同，因为“*”应用于每个元素，不像<body>按规则继承。

4. 使用子选择器与兄弟选择器减少对于标记中类型的依赖

a. 子选择器：td>b 将会选择作为<td>元素的直接子元素的<b>元素

b. 兄弟选择器：h1+p 将仅仅会选择<h1>元素后出现的<p>元素

注意：CSS选择器在使用 class 和 id 时会比使用子选择器以及兄弟选择器时要快。使用id时尤其要快。

5. 纯 CSS 三角形绘制（转载：http://www.jb51.net/article/55519.htm）

6. :before 与 :after 伪元素

能够在选择器中定义的元素的每个实例之前或之后添加 content。

content 有多种取值，可以向文档中添加不同类型的内容。

6.1 添加计数器

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Counters</title>
  <style type="text/css">
  /* Style sheet for CSS counters */

body {
  counter-reset: chapter; 
  counter-reset: section; }

h1:before {
  content: "Chapter " counter(chapter) ": "; 
}
h1 {
  counter-increment: chapter; 
  counter-reset: section;
}

h2:before { 
  content: counter(chapter) "." counter(section) " "; 
}
h2 {
  counter-increment: section; 
}
</style>
</head>
<body>
<h1> Introducing Web Technologies</h1>
  <h2>Introducing HTML</h2>
  <h2>Introducing CSS</h2>
  <h2>Introducing XHTML</h2>
<h1> Structure of Documents</h1>
  <h2>Text</h2>
  <h2>Lists</h2>
  <h2>Tables</h2>
  <h2>Forms</h2>
</body>
</html>

css

body {
  counter-reset : chapter; 
  counter-reset : section;
}
h1:before {
  content : "Chapter " counter(chapter) ": ";
}
h2:before { 
  content : counter(chapter) "." Counter (section) " "; 
}
h1 {
  counter-increment : chapter; 
  counter-reset : section;
}
h2 {
  counter-increment : section; 
}

上例可以在文档中将 h1 h2 标题自动编码。

7. display 与 visibility 辨析

display：强制使一个元素成为块级元素或行内元素，display 的 hide 属性会让盒子在视野中消失，并且不会影响页面布局，就好像这个盒子被删除了；

visibility：从视野中隐藏一个盒子，但是依然影响页面布局，就好像盒子隐身了；

8. 定位问题

相对定位(relative)：仍属于正常流（原来的位置不会被后面的元素所占），定位相对于原来的位置，应用时由于盒子间的遮盖需要注意两个问题：a. 为盒子设置背景 b. 为盒子设置 z-index 属性来让固定的盒子在页面上方。

绝对定位(absolute)：将元素从正常流中抽出（原来的位置会被后面的盒子占领），定位相对于包含它的块级元素，绝对定位的元素总是出现在相对定位元素之上。

固定定位(fixed)：不仅将元素从正常流中抽出，而且会让盒子在用户上下滚动页面的时候也布移动。

流动(float)：float 属性可以让元素从正常流中抽离出来，其他元素围绕该元素流动。注意：任何时候使用 float 属性，必须设置 width 属性以指定盒子应该占据的宽度。

9. CSS3 新特性

稳定特性：圆角，投影，多列文本显示（可在 CSS3，PLEASE 网站上实时显示效果，并兼顾各浏览器不同语法，链接 http://css3please.com/）

支持尚未完全特性：动画，过渡，2D/3D变形

10.清除浮动的小代码块

 /* Start of "Micro clearfix" */        
.cf { zoom: 1; }        
.cf:before,        
.cf:after { content: ""; display: table; }        
.cf:after { clear: both; }        
/* End of "Micro clearfix" */

在css文件中加入这段代码块，body的前后分别加上 :before， :after 即可。