一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
记得写引号
提示：如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
空格和大小写
大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
样式继承问题：后代元素创建新的样式就可以覆盖祖先元素的样式
只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
[title]{
color:red;
}
CSS 选择器参考手册
|
选择器 |
描述 |
|
用于选取带有指定属性的元素。 |
|
|
用于选取带有指定属性和值的元素。 |
|
|
用于选取属性值中包含指定词汇的元素。 |
|
|
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
|
|
匹配属性值以指定值开头的每个元素。 |
|
|
匹配属性值以指定值结尾的每个元素。 |
|
|
匹配属性值中包含指定值的每个元素。 |
外部样式表
内部样式表
内联样式
背景色
background-image
在页面上对背景图像进行平铺，background-repeat
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
background-position:改变图像在背景中的位置，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
设置固定的图像：background-attachment:fixed
所有的背景属性在一个声明中：background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
|
属性 |
描述 |
|
background |
简写属性，作用是将背景属性设置在一个声明中。 |
|
background-attachment |
背景图像是否固定或者随着页面的其余部分滚动。 |
|
background-color |
设置元素的背景颜色。 |
|
background-image |
把图像设置为背景。 |
|
background-position |
设置背景图像的起始位置。 |
|
background-repeat |
设置背景图像是否及如何重复。 |
text-indent：实现文本缩进。
可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
text-align：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
justify
最后一个水平对齐属性是 justify。
word-spacing 属性：改变字（单词）之间的标准间隔
letter-spacing ：字母间隔修改的是字符或字母之间的间隔
text-transform：处理文本的大小写。这个属性有 4 个值：
- none
- uppercase
- lowercase
- capitalize
text-decoration 有 5 个值：
- none
- underline
- overline
- line-through
- blink
- white-space: normal 影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
Normal: 丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。
nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。
如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。
|
值 |
空白符 |
换行符 |
自动换行 |
|
pre-line |
合并 |
保留 |
允许 |
|
normal |
合并 |
忽略 |
允许 |
|
nowrap |
合并 |
忽略 |
不允许 |
|
pre |
保留 |
保留 |
不允许 |
|
pre-wrap |
保留 |
保留 |
允许 |
CSS 文本属性
|
属性 |
描述 |
|
color |
设置文本颜色 |
|
direction |
设置文本方向。 |
|
line-height |
设置行高。 |
|
letter-spacing |
设置字符间距。 |
|
text-align |
对齐元素中的文本。 |
|
text-decoration |
向文本添加修饰。 |
|
text-indent |
缩进元素中文本的首行。 |
|
text-shadow |
设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
|
text-transform |
控制元素中的字母。 |
|
unicode-bidi |
设置文本方向。 |
|
white-space |
设置元素中空白的处理方式。 |
|
word-spacing |
设置字间距。 |
设置字体样式：font-family
只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
font-style 属性最常用于规定斜体文本。该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
font-weight：设置文本的粗细
font-size 设置文本的大小,值可以是绝对或相对值
|
属性 |
描述 |
|
font |
简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
|
font-family |
设置字体系列。 |
|
font-size |
设置字体的尺寸。 |
|
font-size-adjust |
当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） |
|
font-stretch |
对字体进行水平拉伸。（CSS2.1 已删除该属性。） |
|
font-style |
设置字体风格。 |
|
font-variant |
以小型大写字体或者正常字体显示文本。 |
|
font-weight |
设置字体的粗细。 |
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
修改用于列表项的标志类型，可以使用属性 list-style-type
对各标志使用一个图像，这可以利用 list-style-image 属性
标志出现在列表项内容之外还是内容内部。利用 list-style-position
|
属性 |
描述 |
|
简写属性。用于把所有用于列表的属性设置于一个声明中。 |
|
|
将图象设置为列表项标志。 |
|
|
设置列表中列表项标志的位置。 |
|
|
设置列表项标志的类型。 |
|
|
marker-offset |
li {list-style : url(example.gif) square inside}
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
|
属性 |
描述 |
|
border-collapse |
设置是否把表格边框合并为单一的边框。 |
|
border-spacing |
设置分隔单元格边框的距离。 |
|
caption-side |
设置表格标题的位置。 |
|
empty-cells |
设置是否显示表格中的空单元格。 |
|
table-layout |
设置显示单元、行和列的算法。 |
|
属性 |
描述 |
CSS |
|
outline |
在一个声明中设置所有的轮廓属性。 |
2 |
|
outline-color |
设置轮廓的颜色。 |
2 |
|
outline-style |
设置轮廓的样式。 |
2 |
|
outline-width |
设置轮廓的宽度。 |
2 |
盒子模型：
|
属性 |
描述 |
|
position |
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
|
top |
定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
|
right |
定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
|
bottom |
定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
|
left |
定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
|
overflow |
设置当元素的内容溢出其区域时发生的事情。 |
|
clip |
设置元素的形状。元素被剪入这个形状之中，然后显示出来。 |
|
vertical-align |
设置元素的垂直对齐方式。 |
|
z-index |
设置元素的堆叠顺序。 |
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
clear 属性
|
值 |
描述 |
|
left |
在左侧不允许浮动元素。 |
|
right |
在右侧不允许浮动元素。 |
|
both |
在左右两侧均不允许浮动元素。 |
|
none |
默认值。允许浮动元素出现在两侧。 |
|
inherit |
规定应该从父元素继承 clear 属性的值。 |
|
属性 |
描述 |
CSS |
|
向被激活的元素添加样式。 |
1 |
|
|
向拥有键盘输入焦点的元素添加样式。 |
2 |
|
|
当鼠标悬浮在元素上方时，向元素添加样式。 |
1 |
|
|
向未被访问的链接添加样式。 |
1 |
|
|
向已被访问的链接添加样式。 |
1 |
|
|
向元素的第一个子元素添加样式。 |
2 |
|
|
向带有指定 lang 属性的元素添加样式。 |
||
first-line" 伪元素用于向文本的首行设置特殊样式。
irst-letter" 伪元素用于向文本的首字母设置特殊样式：
":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
可通过将左和右外边距设置为 "auto"，来对齐块元素。
注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：
提示：如果宽度是 100%，则对齐没有效果。
使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位：
position:absolute;
right:0px;
使用 float 属性来进行左和右对齐
对齐元素的另一种方法是使用 float 属性
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。
|
属性 |
描述 |
|
height |
设置元素的高度。 |
|
line-height |
设置行高。 |
|
max-height |
设置元素的最大高度。 |
|
max-width |
设置元素的最大宽度。 |
|
min-height |
设置元素的最小高度。 |
|
min-width |
设置元素的最小宽度。 |
|
width |
设置元素的宽度。 |
|
属性 |
描述 |
|
clear |
设置一个元素的侧面是否允许其他的浮动元素。 |
|
cursor |
规定当指向某元素之上时显示的指针类型。 |
|
display |
设置是否及如何显示元素。 |
|
float |
定义元素在哪个方向浮动。 |
|
position |
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
|
visibility |
设置元素是否可见或不可见。 |
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。只有 Internet Explorer 支持 behavior 属性。使用 JavaScript 和 HTML DOM 取而代之
最重要的 CSS3 模块包括：
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
CSS3 边框
|
属性 |
描述 |
CSS |
|
设置所有 border-image-* 属性的简写属性。 |
3 |
|
|
设置所有四个 border-*-radius 属性的简写属性。 |
3 |
|
|
向方框添加一个或多个阴影。 |
3 |
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
CSS3 背景
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
CSS3 允许您为元素使用多个背景图像。
|
属性 |
描述 |
CSS |
|
background-clip |
规定背景的绘制区域。 |
3 |
|
background-origin |
规定背景图片的定位区域。 |
3 |
|
background-size |
规定背景图片的尺寸。 |
3 |
CSS3 文本效果
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。
Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。
新的文本属性
|
属性 |
描述 |
CSS |
|
hanging-punctuation |
规定标点字符是否位于线框之外。 |
3 |
|
punctuation-trim |
规定是否对标点字符进行修剪。 |
3 |
|
text-align-last |
设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
3 |
|
text-emphasis |
向元素的文本应用重点标记以及重点标记的前景色。 |
3 |
|
text-justify |
规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
3 |
|
text-outline |
规定文本的轮廓。 |
3 |
|
text-overflow |
规定当文本溢出包含元素时发生的事情。 |
3 |
|
text-shadow |
向文本添加阴影。 |
3 |
|
text-wrap |
规定文本的换行规则。 |
3 |
|
word-break |
规定非中日韩文本的换行规则。 |
3 |
|
word-wrap |
允许对长的不可分割的单词进行分割并换行到下一行。 |
3 |
CSS3 字体
@font-face
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
|
描述符 |
值 |
描述 |
|
font-family |
name |
必需。规定字体的名称。 |
|
src |
URL |
必需。定义字体文件的 URL。 |
|
font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
|
font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
|
font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
|
unicode-range |
unicode-range |
可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
CSS3 2D 转换
Transform
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。
translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
|
属性 |
描述 |
CSS |
|
transform |
向元素应用 2D 或 3D 转换。 |
3 |
|
transform-origin |
允许你改变被转换元素的位置。 |
3 |
|
matrix(n,n,n,n,n,n) |
定义 2D 转换，使用六个值的矩阵。 |
|
translate(x,y) |
定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
|
translateX(n) |
定义 2D 转换，沿着 X 轴移动元素。 |
|
translateY(n) |
定义 2D 转换，沿着 Y 轴移动元素。 |
|
scale(x,y) |
定义 2D 缩放转换，改变元素的宽度和高度。 |
|
scaleX(n) |
定义 2D 缩放转换，改变元素的宽度。 |
|
scaleY(n) |
定义 2D 缩放转换，改变元素的高度。 |
|
rotate(angle) |
定义 2D 旋转，在参数中规定角度。 |
|
skew(x-angle,y-angle) |
定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
|
skewX(angle) |
定义 2D 倾斜转换，沿着 X 轴。 |
|
skewY(angle) |
定义 2D 倾斜转换，沿着 Y 轴。 |
CSS3 3D 转换
transform
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
|
属性 |
描述 |
CSS |
|
transform |
向元素应用 2D 或 3D 转换。 |
3 |
|
transform-origin |
允许你改变被转换元素的位置。 |
3 |
|
transform-style |
规定被嵌套元素如何在 3D 空间中显示。 |
3 |
|
perspective |
规定 3D 元素的透视效果。 |
3 |
|
perspective-origin |
规定 3D 元素的底部位置。 |
3 |
|
backface-visibility |
定义元素在不面对屏幕时是否可见。 |
3 |
2D Transform 方法
|
函数 |
描述 |
|
matrix3d(n,n,n,n,n,n, |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
|
translate3d(x,y,z) |
定义 3D 转化。 |
|
translateX(x) |
定义 3D 转化，仅使用用于 X 轴的值。 |
|
translateY(y) |
定义 3D 转化，仅使用用于 Y 轴的值。 |
|
translateZ(z) |
定义 3D 转化，仅使用用于 Z 轴的值。 |
|
scale3d(x,y,z) |
定义 3D 缩放转换。 |
|
scaleX(x) |
定义 3D 缩放转换，通过给定一个 X 轴的值。 |
|
scaleY(y) |
定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
|
scaleZ(z) |
定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
|
rotate3d(x,y,z,angle) |
定义 3D 旋转。 |
|
rotateX(angle) |
定义沿 X 轴的 3D 旋转。 |
|
rotateY(angle) |
定义沿 Y 轴的 3D 旋转。 |
|
rotateZ(angle) |
定义沿 Z 轴的 3D 旋转。 |
|
perspective(n) |
定义 3D 转换元素的透视视图。 |
CSS3 过渡
Transition
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
- div
- {
- transition: width 2s;
- -moz-transition: width 2s; /* Firefox 4 */
- -webkit-transition: width 2s; /* Safari 和 Chrome */
- -o-transition: width 2s; /* Opera */
- }
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
向宽度、高度和转换添加过渡效果：
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
|
属性 |
描述 |
CSS |
|
简写属性，用于在一个属性中设置四个过渡属性。 |
3 |
|
|
规定应用过渡的 CSS 属性的名称。 |
3 |
|
|
定义过渡效果花费的时间。默认是 0。 |
3 |
|
|
规定过渡效果的时间曲线。默认是 "ease"。 |
3 |
|
|
规定过渡效果何时开始。默认是 0。 |
3 |
CSS3 动画
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
在 @keyframes 中创建动画时，把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
|
属性 |
描述 |
CSS |
|
@keyframes |
规定动画。 |
3 |
|
animation |
所有动画属性的简写属性，除了 animation-play-state 属性。 |
3 |
|
animation-name |
规定 @keyframes 动画的名称。 |
3 |
|
animation-duration |
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
3 |
|
animation-timing-function |
规定动画的速度曲线。默认是 "ease"。 |
3 |
|
animation-delay |
规定动画何时开始。默认是 0。 |
3 |
|
animation-iteration-count |
规定动画被播放的次数。默认是 1。 |
3 |
|
animation-direction |
规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
3 |
|
animation-play-state |
规定动画是否正在运行或暂停。默认是 "running"。 |
3 |
|
animation-fill-mode |
规定对象动画时间之外的状态。 |
3 |
CSS3 多列
- column-count
- column-gap
- column-rule
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性。
column-count 属性规定元素应该被分隔的列数：
column-gap 属性规定列之间的间隔：
column-rule 属性设置列之间的宽度、样式和颜色规则。
|
属性 |
描述 |
CSS |
|
column-count |
规定元素应该被分隔的列数。 |
3 |
|
column-fill |
规定如何填充列。 |
3 |
|
column-gap |
规定列之间的间隔。 |
3 |
|
column-rule |
设置所有 column-rule-* 属性的简写属性。 |
3 |
|
column-rule-color |
规定列之间规则的颜色。 |
3 |
|
column-rule-style |
规定列之间规则的样式。 |
3 |
|
column-rule-width |
规定列之间规则的宽度。 |
3 |
|
column-span |
规定元素应该横跨的列数。 |
3 |
|
column-width |
规定列的宽度。 |
3 |
|
columns |
规定设置 column-width 和 column-count 的简写属性。 |
3 |
CSS3 用户界面
Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。
resize 属性规定是否可由用户调整元素尺寸。
box-sizing 属性允许以确切的方式定义适应某个区域的具体内容
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
- 轮廓不占用空间
- 轮廓可能是非矩形
|
属性 |
描述 |
CSS |
|
appearance |
允许您将元素设置为标准用户界面元素的外观 |
3 |
|
box-sizing |
允许您以确切的方式定义适应某个区域的具体内容。 |
3 |
|
icon |
为创作者提供使用图标化等价物来设置元素样式的能力。 |
3 |
|
nav-down |
规定在使用 arrow-down 导航键时向何处导航。 |
3 |
|
nav-index |
设置元素的 tab 键控制次序。 |
3 |
|
nav-left |
规定在使用 arrow-left 导航键时向何处导航。 |
3 |
|
nav-right |
规定在使用 arrow-right 导航键时向何处导航。 |
3 |
|
nav-up |
规定在使用 arrow-up 导航键时向何处导航。 |
3 |
|
outline-offset |
对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 |
3 |
|
resize |
规定是否可由用户对元素的尺寸进行调整。 |
3 |