前端开发 --- CSS参考手册

目录

• 1 选择器
  • 1.1 通用选择器
  • 1.2 层次选择器
  • 1.3 伪类选择器
    • 1.3.1 动态伪类选择器
    • 1.3.2 目标伪类选择器
    • 1.3.3 UI元素状态伪类选择器
    • 1.3.4 结构伪类选择器
    • 1.3.5 否定伪类选择器
  • 1.4 伪元素选择器
  • 1.5 属性选择器
  • 1.6 权重
  • 1.5 继承
• 2. 值和单位
  • 2.1 颜色
  • 2.2 长度
    • 2.2.1 绝对长度
    • 2.2.2 相对长度
  • 2.3 URL
  • 2.4 inhreit
• 3. 文字
  • 3.1 字体 {font-family}
• 4. 文本
  • 4.1 缩进 {text-indent}
  • 4.2 水平对齐 {text-align}
  • 4.3 行高 {line-height}
• 5. 布局
  • 5.1 块级元素与行内元素
    • 5.1.1 块级元素
    • 5.1.2 行内元素
  • 5.2 水平格式化
  • 5.3 垂直格式化
  • 5.4 外边距重叠
  • 5.5 垂直对齐 {vercital-align}
  • 5.6 浮动 {float}
  • 5.7 定位 {position}
• 6. 列表
  • 6.1 列表项样式 {list-style-type}
  • 6.2 列表项图片 {list-style-image}
  • 6.3 列表标志位置 {list-style-position}
  • 6.4 列表样式简写 {list-style}
• 7. 生成内容 {content}
• 8. 光标 {cursor}
• 9. CSS各浏览器兼容性BUG汇总
  • 9.1 双倍外边距的bug
  • 9.2 各浏览器Hack写法
    • 9.2.1 条件注释法
    • 9.2.2 属性前缀法
• 10. 浏览器四大内核
  • 10.1 Trident(IE)
  • 10.2 Gecko（FireFox）
  • 10.3 Webkit（Safari、Chrome）
  • 10.4 presto（Opera）
• 11 CSS技巧收集
  • 11.1 文本超出部分用省略号代替
  • 11.2 文本文字两端对齐

1 选择器

1.1 通用选择器

* : 默认匹配所有元素 （~）

E : 匹配标签名为"E"的元素 （~）

.Class : 匹配class属性包含"Class"的元素 （~）

#Id : 匹配id属性为"Id"的元素 （~）

1.2 层次选择器

E F : 匹配F元素，F元素为E元素的后代元素 （~）

E > F : 匹配F元素，F元素为E元素的子元素 （IE7+~）

E + F : 匹配F元素，F元素为E元素后第一个兄弟元素 （IE7+~）

E ~ F : 匹配F元素，且是E元素后所有兄弟元素中的f元素 （IE7+~）

1.3 伪类选择器

伪类选择器都是以:号开头的选择器

1.3.1 动态伪类选择器

E:link : 匹配未访问过的超链接E元素 （~）

E:visited : 匹配已访问过的超链接E元素 （~）

E:active : 匹配已激活的E元素 （IE8+~）

E:hover : 匹配鼠标悬停的E元素 （~）

E:focus : 匹配获得焦点的E元素 （IE8+~）

1.3.2 目标伪类选择器

E:target : 当E元素id属性的值作为一个锚标签的href，并且这个锚被点击后，匹配E元素（IE9+、Opera9.6+、~）

1.3.3 UI元素状态伪类选择器

E:checked : 匹配选中的复选按钮或单选按钮表单元素 （IE9+~）

E:enabled : 匹配所有启用的表单元素 （IE9+~）

E:disabled : 匹配所有禁用的表单元素 （IE9+~）

1.3.4 结构伪类选择器

参数n可以是整数、odd|even、公式，并且n初始值是1。

E:first-child : 匹配子元素中第一个E元素 （iE9+~）

E:last-child : 匹配子元素中最后一个E元素 （iE9+~）

E:root : 匹配E元素所在文档中的根元素即html元素 （iE9+~）

E F:nth-child(n) : 匹配E的子元素中第n个F元素 （iE9+~）

E F:nth-last-child(n) : 匹配E的子元素中倒数第n个F元素 （iE9+~）

E:nth-of-type(n) : 匹配子元素中指定类型的第n个E元素 （iE9+~）

E:nth-last-of-type(n) : 匹配子元素中指定类型的倒数第n个E元素 （iE9+~）

E:first-of-type(n) : 匹配子元素中指定类型的第一个E元素 （iE9+~）

E:last-of-type(n) : 匹配子元素中指定类型的最后一个E元素 （iE9+~）

E:only-child : 匹配没有兄弟元素的E元素 （iE9+~）

E:only-of-type : 匹配子元素中只有一个类型的子元素 （iE9+~）

E:empty : 匹配没有子元素且也不包含文本节点的元素 （iE9+~）

1.3.5 否定伪类选择器

E:not(F) : 匹配所有除F外的E元素 （IE9+~）

1.4 伪元素选择器

:first-letter : 匹配文本块中第一个字母 （~）

:first-line : 匹配文本块中第一行文本 （~）

:before : 匹配元素之前的位置，一般和content属性搭配使用 （~）

:after : 匹配元素之后的位置，一般和content属性搭配使用 （~）

selection : 匹配选中的文本，只接受background和color两个属性 （IE9、-moz-[gecko]、[webkit]）

1.5 属性选择器

[attr] : 匹配拥有属性"attr"的元素

[attr = val] : 匹配属性attr值为"val"的元素

[attr ^= val] : 匹配属性attr值以"val"开头的元素

[attr $= val] : 匹配属性attr值以"val"结尾的元素

[attr |= val] : 匹配属性attr值为"val"或者以"val"开头的元素

[attr ~= val] : 匹配属性attr值包含 空格 + "val" 的元素

[attr *= val] : 匹配属性attr值包含"val"的元素

1.6 权重

• 假设有多条选择器匹配同一个元素，那么这个元素应该显示哪种选择器样式？这里按照选择器权重来进行筛选。
• 计算权重的方法：选择器从左到右依次相加。（例：p.classname span.classname { ... } 权重计算：1+10+1+10=22）
• 带!important的声明不在权重计算范围内，这类声明始终优先使用。（例：p { color: #FFF !important; }）
• 如果两个权重相同的选择器匹配同一个元素，最后出现的选择器样式覆盖前面的。

/*权重计算：1+10+1+10=22*/
p.classname span.classname {...}

1.5 继承

子元素会继承父元素样式（注：某些样式不支持继承，如"margin"、"padding"、"border"等），这种继承得到的样式是没有权重的（注：0权重比无权重优先），通配选择器样式会覆盖继承样式，所以建议不要盲目的使用通配符选择器。

2. 值和单位

2.1 颜色

颜色由红（Red）绿（Green）蓝（Blue）混合组成的颜色简称RGB，每种色系对应0~255数值。

命名颜色 : red、blue...

函数式RGB ：rgb( ... )

├─百分比 : rgb( 100%, 100%, 100% )

└─数值 : rgb( 255, 255, 255 )

16进制RGB ：#FFFFFF（注：每2位表示一种颜色、如果每2位相同则可以缩写为#FFF）

web安全色就是在256色系计算机中总能避免抖动的颜色，如果是用函数百分比表示的话三种色系都要是21%倍数（例：rgb( 0%, 21%, 42% ） )，如果用数值表示的话都是51的倍数（例：rgb( 0, 51, 102 ) )，如果用16进制表示的话都是00,33,66,99,FF（例：#0033FF）。

2.2 长度

2.2.1 绝对长度

px|像素 : 在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素，最终，他们被按照像素处理。

in|英寸 : 1in = 2.54cm = 96px

cm|厘米 : 1cm = 10mm = 96px/2.54 = 37.8px

mm|毫米 : 1mm = 0.1cm = 3.78px

q|1/4毫米 : 1q = 1/4mm = 0.945px

pt|点 : 1pt = 1/72in == 0.0139in = 1/72 * 2.54cm = 1/72 * 96px = 1.33px

pc|派卡 : 1pc = 12pt = 1/6in = 1/6 * 96px = 16px

2.2.2 相对长度

em : 如果用于本身font-size，则相对父元素font-size的倍数、如果用于其他属性上，则相对于本身font-size的倍数

/*父元素div*/
div { font-size: 14px; }
/*子元素font-size为14px * 1.5 = 21px、width为21px * 2 = 42px*/
div p { font-size: 1.5em; width: 2em; }

rem : 相对于根元素html的font-size的倍数。（注：IE6-8不支持）

ex : 规定为所用字体中小写x的高度。但不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值

ch : 规定为所用字体中数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值

2.3 URL

绝对地址 : url( protocol://server/pathname )

相对地址 : url( pathname )

2.4 inhreit

让属性的值继承父元素（例：#div p { color: inhreit; } ）

3. 文字

3.1 字体 {font-family}

字体选择按优先级：数字、英文（Mac OS > Win > Android > IOS > Linux） > 中文（Mac OS > Win > Android > IOS > Linux）。

当字体名称中间包含空格符或者字体名称为中文时，需要给字体增加引号。

强烈推荐一篇讲解字体的文章：https://segmentfault.com/a/1190000006110417

推荐写法：

{font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;}

4. 文本

4.1 缩进 {text-indent}

适用 : 块级元素

继承性 : 有

值 : px | em | %

4.2 水平对齐 {text-align}

适用 : 块级元素

继承性 : 有

默认值 : left

├─ left : 左对齐

├─ center : 中间对齐

├─ right : 右对齐

└─ justify : 两端对齐

4.3 行高 {line-height}

两行文本基线之间的距离，行高决定元素行内框的高度。如果用于块级元素，则表示元素中文本行基线之间的最小距离，推荐行高设置为一个数值，该数值最后计算得出的是font-size的倍数，元素子元素都继承这个数值从而达到子元素行高与自身font-size形成一个固定的倍数关系。

{ line-height : 1; }

适用 : 所有

继承性 : 有

默认值 : normal（浏览器一般默认为font-size的1-1.2倍）

├─ 长度值 : px、em...

├─ 百分比 : font-size大小的百分比

├─ 数字 : 类似百分比，都是相对font-size的倍数，这个数字可以被子元素继承。

└─ normal : 默认

5. 布局

正常流 : HTML中元素从上到下，从左到右的排列顺序，如果想让元素脱离正常流，只能通过浮动和定位来实现。

非替换元素 : 内容包含在文档中的元素，例如p元素。

替换元素 : 作为其他内容占位符的元素，例如img元素。

块级元素 : 在正常流中独占一行的元素，元素前后会生成“换行符”，例如div、p元素。

行内元素 : 块级元素的子元素，元素前后不会“换行”，例如strong、span元素。

em框 : 每个字符都有一个em框，这个框由字体font-size决定大小。

内容区 : 在非替换元素中，内容区就是由em框组成的区域，在替换元素中，内容区包括元素本身、内边距、边框、外边距。

行间距 : line-height减去font-size就是行间距，行间距分为两半（行半距）分别添加在内容区上下。（替换元素没有行间距）

行内框 : 内容区与两个行半距相加得到的区域形成的框。而替换元素中行内框就是元素内容区形成的框。（因为替换元素没有行间距）

行框 : 即一行文本中最高行内框的顶端到最低行内框的底端组成的区域形成的框。

5.1 块级元素与行内元素

5.1.1 块级元素

5.1.2 行内元素

5.2 水平格式化

规则1 : 正常流中，水平7大属性之和正好与父元素内容区宽度相等（margin×2、padding×2、border×2、width）。

规则2 : 只有margin-left、margin-right、width可以设置为auto，并且只能margin能设置为负数。

├─ 如果都为auto，则元素width会尽可能与父元素width相等，左右外边距为0。

├─ 如果width为固定值、左右外边距为auto，则元素会相对于父元素居中布局。

└─ 如果都为固定值、并且水平7大属性只和小于父元素width，则右外边距会自动为auto。

规则3 : 如果元素是替换元素，width设置为auto时，元素的width自动为元素内容的宽度。

5.3 垂直格式化

规则1 : 只有margin-top、margin-bottom、height可以设置为auto，并且只能margin设置为负数。

规则2 : 确定元素的height的大小，首先先从自身计算（例：可以确定的长度值px，em），如果不确定再根据父元素height计算（例：父元素height × x%），如果不确定最后根据子元素计算，即如果元素设置了边框或者内边距，则元素高度等于子元素元素框高度之和，如果没有设置边框或者内边距，则元素高度等于最高子元素上边框到最低子元素下边框的距离。

5.4 外边距重叠

规则1 : 相邻外边距重叠，取绝对值最大值为外边距（同为正数或者负数）或者取外边距相加后得到的数（一个正数一个负数）。

规则2 : 父子外边距重叠，只有当父元素没有设置边框或者内边距时，父元素与子元素的同方向外边距才会重叠，适用规则1计算。

如果一个行内元素，line-height设置的比font-size要大，那么元素的行间距就为负数，行内框大小就有可能比内容区大小要小，并且行内框在内容区垂直居中。

5.5 垂直对齐 {vercital-align}

适用 : 所有

继承性 : 无

默认值 : baseline

├─ top : 元素行内框顶部与行框顶部对齐

├─ middle : 元素行内框中线与行框中线对齐

├─ bottom : 元素行内框底部与行框底部对齐。

├─ text-top : 元素行内框顶部与父元素中文本顶部对齐。

├─ text-bottom : 元素行内框底部与父元素中文本底部对齐。

├─ super : 元素内容区和基线上移，上移的距离由浏览器声明。

└─ sub : 同super，只是方向下移。

5.6 浮动 {float}

规则1 : 任何应用浮动的元素，都会生成一个块级框，换言之任何浮动元素都能应用外边距、内边距、宽和高等属性（不需要显示的声明display : block）。

规则2 : 浮动元素外边距不适用外边距重叠规则。

规则3 : 浮动元素框顶端尽量与前面最近的块级元素底端对齐。

规则4 : 浮动元素框会紧挨着上一个浮动元素框对齐，如果包容块宽度不够，则移到下一行。

规则5 : 浮动元素框虽然脱离文档流，其他块级元素会忽略这个浮动元素布局，但是对于文本流来说依然占据元素框位置。

适用 : 所有

继承性 : 无

默认值 : none

├─ left : 左浮动。

├─ right : 右浮动。

└─ none : 无浮动。

5.7 定位 {position}

规则1 : 绝对定位、固定定位的元素都会生成一个块级框。

规则2 : 绝对定位元素相对与父元素（非static定位元素）定位、固定定位元素相对于视窗定位。

适用 : 所有

继承性 : 无

默认值 : static

├─ relative : 相对定位。

├─ absolute : 绝对定位。

├─ fixed : 固定定位。

└─ static : 无定位。

6. 列表

6.1 列表项样式 {list-style-type}

适用 : display为list-item的元素

继承性 : 有

默认值 : disc

├─ disc : 实心园。

├─ circle : 空心圆。

├─ square : 方块

├─ decimal : 1、2、3、4...

├─ decimal-leading-zero : 01、02、03、04...

├─ upper-alpha : A、B、C、D...

├─ upper-latin :

├─ lower-alpha : a、b、c、d...

├─ lower-latin :

├─ upper-roman : Ⅰ、Ⅱ、Ⅲ、Ⅳ...。

├─ lower-roman : i、ii、iii、iv...。

├─ lower-greek : 传统小写希腊符号。

├─ armenian : 传统亚美尼序号。

├─ georgian : 传统乔治序号。

└─ none : 不适用标志。

6.2 列表项图片 {list-style-image}

适用 : display为list-item的元素

继承性 : 有

默认值 : none

└─ [url] : url()。

6.3 列表标志位置 {list-style-position}

适用 : display为list-item的元素

继承性 : 有

默认值 : outside

├─ inside : 位于列表项里面。

└─ outside : 位于列表项外面。

6.4 列表样式简写 {list-style}

以上三个列表属性都能合并写入list-style中。

适用 : display为list-item的元素

继承性 : 有

默认值 : none disc outside

例如：

{ list-style : url(..image/pic.png) square inside }

7. 生成内容 {content}

生成内容一般和伪元素:before或:after一起使用

适用 : :before和:after伪元素

继承性 : 无

默认值 : "normal"

├─ 字符串 : 在元素前面或后面生成字符串内容。

├─ attr() : 在元素前面或后面生成该元素某个属性值。

├─ url() : 在元素前面或后面生成url指向的图片。

└─ \XXXX : css转义字符（16进制表示的unicode字符）。

推荐一篇css转义字符对照表：http://blog.csdn.net/bluestarf/article/details/40652011

8. 光标 {cursor}

适用 : : 所有元素

继承性 : 有

默认值 : "auto"

9. CSS各浏览器兼容性BUG汇总

9.1 双倍外边距的bug

描述 : 当块级元素浮动布局存在横向外边距时，IE6会出现双倍外边距，解决方法就是设定display : inline。

浏览器 : IE6

.debug { float: left; margin: 0 10px; display: inline; ... }

9.2 各浏览器Hack写法

9.2.1 条件注释法

<!-- [if IE]>
/* 只有IE识别 */
<![endif] -->

<!--[if IE X]>
/* 只在IE X 下识别 */
<![endif] -->

<!--[if gte IE X]>
/* 只在IE X 或IE X以上版本识别 */
<![endif] -->

<!--[if lt IE X]>
/* 只在IE X 或IE X以下版本识别 */
<![endif] -->

9.2.2 属性前缀法

/* 只有IE 6识别 */
.forIE6 { _width: 100px; }

/* IE6、IE7识别 */
.forIE6-IE7 { *width: 100px; +width: 100px; }

10. 浏览器四大内核

浏览器最重要或者说最核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

10.1 Trident(IE)

该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”,微软很长时间都没有更新Trident内核，这也导致了后面的两个后果： 一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器。

Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、2345浏览器、腾讯TT、淘宝浏览器、阿云浏览器（早期版本）、瑞星安全浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器等等

10.2 Gecko（FireFox）

Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器)也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

Gecko内核常见的浏览器： Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）等等

10.3 Webkit（Safari、Chrome）

它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。

WebKit内核常见的浏览器：傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

10.4 presto（Opera）

Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。实际上它是一个动态内核，与其它几个内核的最大的区别就在脚本处理上，Presto有着天生的 优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度。

由于Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等。

11 CSS技巧收集

11.1 文本超出部分用省略号代替

.class {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

11.2 文本文字两端对齐

.class {
    text-align:justify;
    text-justify:distribute-all-lines;
    text-align-last:justify;
    text-indent:2px; // 值越小，文字间距越大
}

参考资料：

1: 《精通CSS第三版》

2: http://blog.csdn.net/ofsno/article/details/51164575

3: 《图解CSS3》