属性列表
尺寸
| 元素 | 描述 | 版本 |
|---|---|---|
| height | height 规定元素内容区高度。 | 1 |
| max-height | max-height 规定元素设置最大高度。 | 2 |
| max-width | max-width 规定元素设置最大宽度。 | 2 |
| min-height | min-height 规定元素设置最小高度。 | 2 |
| min-width | min-width 规定元素设置最小宽度。 | 2 |
| width | width规定元素内容区的宽度。 | 1 |
边距
| 元素 | 描述 | 版本 |
|---|---|---|
| margin | margin规定元素中四个方向的外边距属性。 | 1 |
| margin-bottom | 设置元素的下外边距。 | 1 |
| margin-left | 设置元素的左外边距。 | 1 |
| margin-right | 设置元素的右外边距。 | 1 |
| margin-top | 设置元素的上外边距。 | 1 |
| padding | padding规定元素的内边距，该属性不可为负值，其简写形式可一次性设置四个边的内边距。 | 1 |
| padding-bottom | 设置元素的下内边距。 | 1 |
| padding-left | 设置元素的左内边距。 | 1 |
| padding-right | 设置元素的右内边距。 | 1 |
| padding-top | 设置元素的上内边距。 | 1 |
定位
| 元素 | 描述 | 版本 |
|---|---|---|
| bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移。 | 2 |
| clear | clear 指定一个元素是紧挨着上一个浮动元素，并必须移动到该元素的下方。 | 1 |
| clip | 剪裁绝对定位元素。 | 2 |
| cursor | 规定要显示的光标的类型（形状）。 | 2 |
| display | display指定元素中渲染出来的显示盒类型。 | 1 |
| float | float 可使一个元素脱离文档流，然后被放置在它所在的容器的左侧或右侧，另外其他的文本或行内元素围绕该元素放置。 | 1 |
| left | 设置定位元素左外边距边界与其包含块左边界之间的偏移。 | 2 |
| overflow | overflow该属性作用在block型元素上。 | 2 |
| position | position该属性设置元素的定位方式， 且在动画特效脚本化时效果很好。 | 1 |
| right | 设置定位元素右外边距边界与其包含块右边界之间的偏移。 | 2 |
| top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 | 2 |
| vertical-align | 设置元素的垂直对齐方式。 | 1 |
| visibility | visibility 属性有两种用法：取值为 hidden 时隐藏元素，并将其所占空间用空白占位。取值为 collapse 时隐藏表格的一行或一列。 | 2 |
| z-index | z-index该属性指定元素及其子元素的z-order。当元素之间重叠时，z-order可决定元素显示的顺序。一般z-index较大的元素会在z-index较小的上方显示。 | 2 |
弹性盒
| 元素 | 描述 | 版本 |
|---|---|---|
| align-content | 规定弹性内容的侧轴方向上右额外的空间时，如何排布每一行。当弹性容器只有一行时无作用。 | 3 |
| align-items | 定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用 | 3 |
| align-self | 设允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 | 3 |
| flex | flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 | 3 |
| flex-basis | 定义了在分配多余空间之前，项目占据的主轴空间（main size）。 | 3 |
| flex-direction | 决定主轴的方向（即条目的排列方向），可以是水平方向（自左向右，或自右向左），也可以是垂直方向（自上而下或自下而上） | 3 |
| flex-grow | 定义条目的放大比例，默认为0，即如果存在剩余空间，也不放大。 | 3 |
| flex-shrink | 定义条目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 | 3 |
| flex-wrap | 定义如果一条轴线排不下所有条目，是否换你行或如何换行。 | 3 |
| flex-flow | 定义条目在主轴上的对齐方式（左对齐，右对齐，居中，两端对齐，每个项目两侧的间隔相等） | 3 |
| justify-content | 定义条目在交叉轴上如何对齐 | 3 |
| order | 定义条目的排列顺序。数值越小，排列越靠前，默认为0。 | 3 |
背景
| 元素 | 描述 | 版本 |
|---|---|---|
| background | background 包括background-color、background-image、background-repeat、background-attachment、background-origin、background-position 和 background-size。 | 1 |
| background-color | background-color设置元素的背景颜色。 | 1 |
| background-image | background-image 设置元素的背景图片。 | 1 |
| background-repeat | background-repeat设置background-image在元素中的铺放格式的。其默认为repeat。 | 1 |
| background-attachment | background-attachment设置背景图像是否固定或者随着页面的其余部分滚动，其默认值为scroll。 | 1 |
| background-position | background-position属性规定背景图像的开始位置。 | 1 |
| background-origin | background-origin该属性用于规定指定背景图片 background-image 属性的原点位置的相对区域。。 | 3 |
| background-clip | background-clip 规定元素的背景（背景图片或颜色）的绘制区域。 | 3 |
| background-size | background-size 属性规定背景图像的尺寸。 | 3 |
| opacity | opacity 该属性规定了一个元素的透明度 | 3 |
边框
| 元素 | 描述 | 版本 |
|---|---|---|
| border | border 属性是规定各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style，border-color。 | 1 |
| border-bottom | border-bottom 该属性是用来将下边框的所有属性：border-bottom-color, border-bottom-style 与 border-bottom-width 设置到一个声明中。 | 1 |
| border-bottom-color | border-bottom-color该属性是用于规定一个元素底部边框的颜色。 | 2 |
| border-bottom-style | border-bottom-style该属性是规定元素下边框的样式。 | 2 |
| border-bottom-width | border-bottom-width该属性是一个用于规定一个元素下边框的宽度。 | 1 |
| border-color | border-color该属性是一个用于规定元素四个边框颜色的快捷属性：border-top-color，border-right-color，border-bottom-color，border-left-color。 | 1 |
| border-left | border-left 该属性规定元素的左边框属性。 | 1 |
| border-left-color | border-left-color 该属性是一个用于规定元素的左边框的颜色。 | 2 |
| border-left-style | border-left-style 该属性是一个用于设置各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style，border-color。 | 2 |
| border-left-width | border-left-width 该属性是一个元素的左边框的宽度。 | 1 |
| border-right | border-right 该属性是元素的右边框属性。 | 1 |
| border-right-color | border-right-color 该属性是用于规定元素的右边框的颜色。 | 2 |
| border-right-style | border-right-style 该属性是用于规定元素右边框的样式。 | 2 |
| border-right-width | border-right-width 该属性是用于规定元素右边框的宽度。 | 1 |
| border-style | border-style 该属性是用作规定元素所有边框的样式。 | 1 |
| border-top | 在一个声明中设置所有的上边框属性。 | 1 |
| border-top-color | border-top 该属性表示元素的上边框属性。 | 2 |
| border-top-style | border-top-style 该属性是用于规定元素的上边框的样式。 | 2 |
| border-top-width | border-top-width 该属性是用于规定元素的上边框的宽度。 | 1 |
| border-width | border-width 该属性是用于规定元素四条边框的宽度。 | 1 |
| outline | outline 该属性是用于规定元素的轮廓属性。 | 2 |
| outline-color | outline-color 该属性是用于规定元素的轮廓的颜色。 | 2 |
| outline-style | outline-style 该属性是用于规定元素的轮廓样式属性。 | 2 |
| outline-width | outline-width 该属性是用于规定元素的轮廓的宽度。 | 2 |
| border-bottom-left-radius | border-bottom-left-radius 该属性用于规定元素的左下角边框的形状。 | 3 |
| border-bottom-right-radius | border-bottom-right-radius 该属性用于规定元素的右下角边框的形状。 | 3 |
| border-image | border-image 该属性用作给元素的边框添加背景图片。使用该属性时，会替换掉 border-style 属性所设置的边框样式。 | 3 |
| border-image-outset | border-image-outset属性规定边框图像可超出边框盒的大小。 | 3 |
| border-image-repeat | border-image-repeat 该属性用于规定图片如何填充边框。单个值，设置所有的边框；两个值，分别设置水平和垂直的边距。 | 3 |
| border-image-slice | border-image-slice 该属性用于划分边框图片在9个区域所制定的图像：4个角，4个边和中间。 | 3 |
| border-image-source | border-image-source 该属性规定<image>代替边框的样式。若此属性设置为none，使用边框样式代替。 | 3 |
| border-image-width | border-image-width 该属性用作规定图像边框宽度。若 border-image-width 大于已指定的 border-width 则将向内部扩展。 | 3 |
| border-radius | border-radius 该属性用作规定边框圆角。一个半径确定一个圆形；当使用两个半径时确定一个椭圆，该椭圆同边框的交集形成圆角效果。 | 3 |
| border-top-left-radius | border-top-left-radius 该属性是用来规定元素左上角的圆角效果。圆角可以是圆或者椭圆的一部分。若其中有一个值为0，则无圆角效果。 | 3 |
| border-top-right-radius | border-top-right-radius 该属性用于规定元素的右上角弧形。该弧形可能为一个椭圆，若一个值为0，就没有圆形。 | 3 |
| box-shadow | box-shadow 该属性是用逗号分割列表来描述一个或多个阴影效果，几乎可用到任何元素。若同时在元素上设置了border-radius，阴影依然有圆角的效果。多个阴影的 z-ordering 和多个 text-shadows 规则相同。 | 3 |
文本
| 元素 | 描述 | 版本 |
|---|---|---|
| color | color 属性规定文本的颜色。 | 1 |
| direction | 规定文本的方向 / 书写方向。 | 2 |
| letter-spacing | letter-spacing 属性增加或减少字符间的空白（字符间距）。 | 1 |
| line-height | line-height属性规定行高。 | 1 |
| text-align | text-align属性规定元素文本的水平对齐方式。 | 1 |
| text-decoration | text-decoration 属性规定添加到文本的修饰。 | 1 |
| text-indent | text-indent 属性规定文本块中首行文本的缩进。 | 1 |
| text-shadow | text-shadow规定添加到文本的阴影效果。 | 2 |
| text-transform | text-transform 属性规定文本的大小写。 | 1 |
| unicode-bidi | unicode-bidi 属性与 direction 属性一起使用，来规定或返回文本是否被重写，以便在同一文档中支持多种语言。规定文本方向。 | 2 |
| white-space | white-space属性规定元素内的空白怎样处理。 | 1 |
| word-spacing | word-spacing属性规定增加或减少字与字之间的空白。 | 1 |
| hanging-punctuation | hanging-punctuation属性指定一个标点符号是否会在启动或在结束时文本行框以外。 | 3 |
| punctuation-trim | punctuation-trim 属性规定是否应修饰，当它出现在一条线，或相邻的另一个全形标点符号字符开头或结束标点字符。 | 3 |
| text-align-last | text-align-last 属性规定如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
| text-emphasis | text-emphasis 属性是简写属性，用于在一个声明中规定 text-emphasis-style 和 text-emphasis-color。 | 3 |
| text-justify | text-justify 属性规定应怎样对齐文本以及对齐间距。 | 3 |
| text-outline | text-outline 属性规定文字大纲轮廓。 | 3 |
| text-overflow | text-overflow 属性规定当文本溢出包含它的元素，应该发生什么。 | 3 |
| text-shadow | text-shadow 规定添加到文本的阴影效果。 | 3 |
| text-wrap | text-wrap 属性规定文本换行规则。 | 3 |
| word-break | word-break 属性规定定非CJK脚本的断行规则。 | 3 |
| word-wrap | word-wrap 属性允许长的内容可以自动换行。 | 3 |
字体
| 元素 | 描述 | 版本 |
|---|---|---|
| font | font 简写属性在一个声明中规定所有字体属性。 | 1 |
| font-family | font - family 属性规定一个元素的字体。 | 1 |
| font-kerning | font-kerning 字体字符间距处理 CSS 属性参数控制字符之间的间距。 此功能允许非常相似的字符之间的间距、无论是什么字符。 | - |
| font-language-override | font-language-override 字体-语言-重写 CSS 属性参数控制特定语言的字体中的字形。 | |
| font-style | font-style 属性规定文本的字体样式。 | 1 |
| font-synthesis | font-synthesis 用来对字体进行加粗或者让字体变成斜体。 | |
| font-size | font-size 属性规定文本的大小。 | 1 |
| font-size-adjust | font-size-adjust 为元素规定 aspect 值。 | 2 |
| font-stretch | font-stretch 字体拉伸属性,对字体进行正常、缩小、或扩大处理。 | 2 |
| font-variant | font-variant 属性规定小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 | 1 |
| font-variant-alternates | font-variant-alternates 字体变形候补 CSS 属性参数控制替代符号的用法。通过在 @font-feature-values 中定义的替代名称就可以引用这些备用标志符号。 | - |
| font-variant-caps | font-variant-caps 属性将字符替代为大写字母。 | |
| font-variant-east-asian | font-variant-east-asian 属性参数控制替代字形为东亚的脚本，如日文和中文的用法。 | |
| font-weight | font-weight 属性规定文本的粗细。 | 1 |
动画
| 元素 | 描述 | 版本 |
|---|---|---|
| animation | animation所有动画属性的简写属性，除了 animation-play-state 属性。 包括animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-timing-function。 | 3 |
| @keyframes | 动画可以根据帧定制不同的动画效果。 | 3 |
| animation-delay | animation-delay规定动画何时开始。默认是 0。 | 3 |
| animation-direction | animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
| animation-duration | animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-fill-mode | animation-fill-mode规定对象动画时间之外的状态。 | 3 |
| animation-iteration-count | animation-iteration-count规定动画被播放的次数。默认是 1。 | 3 |
| animation-name | animation-name规定 @keyframes 动画的名称。 | 3 |
| animation-play-state | animation-play-state规定动画是否正在运行或暂停。默认是 “running”。 | 3 |
| animation-timing-function | animation-timing-function规定动画的速度曲线。默认是 “ease”。 | 3 |
| transition | 3 | |
| transition-delay | transtion-delay规定动画在过渡效果开始等待的时间。值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。 | 3 |
| transition-duration | transition-duration 属性以秒或毫秒为单位规定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。 | 3 |
| transition-property | transition-property 规定应用过渡效果的 CSS 属性的名称。（当规定的 CSS 属性改变时，过渡效果将开始）。 | 3 |
| transition-timing-function | transition-timing-function 规定过渡效果的速度曲线。 | 3 |
变形
| 元素 | 描述 | 版本 |
|---|---|---|
| transform | transform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。值包含（translate()，scale()，rotate(),skew(),perspective()等）。 | 3 |
| <transform-function> | 规定一个为了改变元素显示效果而应用到该元素上的函数，这些变换函数通常代表一类矩阵，最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。 | ３ |
| transform-origin | transform-origin 属性更改元素变形的原点。例如，rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，然后再用这个属性的值把元素translate回去)。 | 3 |
| transform-style | transform-style规定该元素的嵌套元素如何在3D空间中呈现。 | 3 |
列表
| 元素 | 描述 | 版本 |
|---|---|---|
| liststyle | list-style 简写属性在一个声明中规定所有的列表属性。包括 list-style-type，list-style-position 和 list-style-image。 | 1 |
| list-style-type | list-style-type 属性规定列表项标记的类型。 | 1 |
| list-style-position | list-style-position属性指示如何相对于对象的内容绘制列表项标记。 | 1 |
| list-style-image | list-style-image 属性使用图像来替换列表项的标记。 | 1 |
表格
| 元素 | 描述 | 版本 |
|---|---|---|
| border-collapse | border-collapse 属性规定表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 | 2 |
| border-spacing | border-spacing 属性规定相邻单元格的边框间的距离（仅用于“边框分离”模式）。 | 2 |
| caption-side | caption-side 属性规定表格标题的位置。 | 2 |
| empty-cells | empty-cells 属性规定是否显示表格中的空单元格（仅用于“分离边框”模式）。 | 2 |
| table-layout | table-layout 属性为表规定表格布局算法。 | 2 |
多列
| 元素 | 描述 | 版本 |
|---|---|---|
| column-count | column-count 属性用来描述元素应该被划分的列数。 | 3 |
| column-fill | column-fill 属性用来规定如何填充列(是否进行填充)。 | 3 |
| column-gap | column-gap 属性用来规定元素列间距的大小。 | 3 |
| column-rule | column-rule 属性用来规定列间分隔线的宽度，样式及颜色。 | 3 |
| column-rule-color | column-rule-color 属性用来规定列间分隔线的颜色规则。 | 3 |
| column-rule-style | column-rule-style 属性用来规定列间分隔线的样式规则。 | 3 |
| column-rule-width | column-rule-width 属性用来规定列间分隔线的宽度。 | 3 |
| column-span | column-span 属性用来规定元素应当横跨多少列。 | 3 |
| column-width | column-width 属性用来规定列的宽度。 | 3 |
| columns | columns 属性是一个简写的属性，允许同时规定 column-width 和 column-count 属性。 | 3 |
用户界面
| 元素 | 描述 | 版本 |
|---|---|---|
| appearance | appearance 属性规定元素看上去像标准的用户界面元素。 | 3 |
| box-sizing | box-sizing 属性以特定的方式规定匹配某个区域的特定元素。 | 3 |
| icon | icon 属性为创作者提供了将元素设置为图标等价物的能力。 | 3 |
| nav-down | nav-down 属性规定当使用 nav-down 导航键时，向何处进行导航。 | 3 |
| nav-index | nav-index 属性规定元素的连续导航次序 (“tabbing order”)。 | 3 |
| nav-left | nav-left 属性规定当使用 nav-left 导航键时，向何处进行导航。 | 3 |
| nav-right | nav-right 属性规定当使用 nav-right 导航键时，向何处进行导航。 | 3 |
| nav-up | nav-up 属性规定当使用 nav-up 导航键时，向何处进行导航。 | 3 |
| outline-offset | outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。 | 3 |
| resize | resize 属性规定是否可由用户调整元素的尺寸。 | 3 |