目录

属性列表

 

尺寸

元素描述版本
heightheight 规定元素内容区高度。1
max-heightmax-height 规定元素设置最大高度。2
max-widthmax-width 规定元素设置最大宽度。2
min-heightmin-height 规定元素设置最小高度。2
min-widthmin-width 规定元素设置最小宽度。2
widthwidth规定元素内容区的宽度。1

边距

元素描述版本
marginmargin规定元素中四个方向的外边距属性。1
margin-bottom 设置元素的下外边距。 1
margin-left 设置元素的左外边距。 1
margin-right 设置元素的右外边距。 1
margin-top 设置元素的上外边距。 1
paddingpadding规定元素的内边距,该属性不可为负值,其简写形式可一次性设置四个边的内边距。1
padding-bottom 设置元素的下内边距。 1
padding-left 设置元素的左内边距。 1
padding-right 设置元素的右内边距。 1
padding-top 设置元素的上内边距。 1

定位

元素描述版本
bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 2
clearclear 指定一个元素是紧挨着上一个浮动元素,并必须移动到该元素的下方。1
clip 剪裁绝对定位元素。 2
cursor 规定要显示的光标的类型(形状)。 2
displaydisplay指定元素中渲染出来的显示盒类型。1
floatfloat 可使一个元素脱离文档流,然后被放置在它所在的容器的左侧或右侧,另外其他的文本或行内元素围绕该元素放置。1
left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 2
overflowoverflow该属性作用在block型元素上。2
positionposition该属性设置元素的定位方式, 且在动画特效脚本化时效果很好。1
right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2
top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2
vertical-align 设置元素的垂直对齐方式。 1
visibilityvisibility 属性有两种用法:取值为 hidden 时隐藏元素,并将其所占空间用空白占位。取值为 collapse 时隐藏表格的一行或一列。2
z-indexz-index该属性指定元素及其子元素的z-order。当元素之间重叠时,z-order可决定元素显示的顺序。一般z-index较大的元素会在z-index较小的上方显示。2

弹性盒

元素描述版本
align-content规定弹性内容的侧轴方向上右额外的空间时,如何排布每一行。当弹性容器只有一行时无作用。3
align-items定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用3
align-self设允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。3
flexflex属性是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

背景

元素描述版本
backgroundbackground 包括background-colorbackground-imagebackground-repeatbackground-attachmentbackground-originbackground-positionbackground-size1
background-colorbackground-color设置元素的背景颜色。1
background-imagebackground-image 设置元素的背景图片。1
background-repeatbackground-repeat设置background-image在元素中的铺放格式的。其默认为repeat。1
background-attachmentbackground-attachment设置背景图像是否固定或者随着页面的其余部分滚动,其默认值为scroll。1
background-positionbackground-position属性规定背景图像的开始位置。1
background-originbackground-origin该属性用于规定指定背景图片 background-image 属性的原点位置的相对区域。。3
background-clipbackground-clip 规定元素的背景(背景图片或颜色)的绘制区域。3
background-sizebackground-size 属性规定背景图像的尺寸。3
opacity opacity 该属性规定了一个元素的透明度3

边框

元素描述版本
border border 属性是规定各种单独的边界属性的简写属性,可用于设置一个或多个以下属性的值:border-widthborder-styleborder-color1
border-bottom border-bottom 该属性是用来将下边框的所有属性:border-bottom-color, border-bottom-styleborder-bottom-width 设置到一个声明中。1
border-bottom-colorborder-bottom-color该属性是用于规定一个元素底部边框的颜色。2
border-bottom-styleborder-bottom-style该属性是规定元素下边框的样式。2
border-bottom-widthborder-bottom-width该属性是一个用于规定一个元素下边框的宽度。1
border-colorborder-color该属性是一个用于规定元素四个边框颜色的快捷属性:border-top-colorborder-right-colorborder-bottom-colorborder-left-color1
border-left border-left 该属性规定元素的左边框属性。 1
border-left-color border-left-color 该属性是一个用于规定元素的左边框的颜色。 2
border-left-style border-left-style 该属性是一个用于设置各种单独的边界属性的简写属性,可用于设置一个或多个以下属性的值:border-widthborder-styleborder-color2
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-radiusborder-bottom-left-radius 该属性用于规定元素的左下角边框的形状。 3
border-bottom-right-radiusborder-bottom-right-radius 该属性用于规定元素的右下角边框的形状。 3
border-imageborder-image 该属性用作给元素的边框添加背景图片。使用该属性时,会替换掉 border-style 属性所设置的边框样式。 3
border-image-outset border-image-outset属性规定边框图像可超出边框盒的大小。3
border-image-repeat border-image-repeat 该属性用于规定图片如何填充边框。单个值,设置所有的边框;两个值,分别设置水平和垂直的边距。3
border-image-sliceborder-image-slice 该属性用于划分边框图片在9个区域所制定的图像:4个角,4个边和中间。 3
border-image-sourceborder-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

文本

元素描述版本
colorcolor 属性规定文本的颜色。1
direction 规定文本的方向 / 书写方向。2
letter-spacingletter-spacing 属性增加或减少字符间的空白(字符间距)。1
line-heightline-height属性规定行高。1
text-aligntext-align属性规定元素文本的水平对齐方式。1
text-decorationtext-decoration 属性规定添加到文本的修饰。1
text-indenttext-indent 属性规定文本块中首行文本的缩进。1
text-shadow text-shadow规定添加到文本的阴影效果。 2
text-transformtext-transform 属性规定文本的大小写。1
unicode-bidi unicode-bidi 属性与 direction 属性一起使用,来规定或返回文本是否被重写,以便在同一文档中支持多种语言。规定文本方向。 2
white-spacewhite-space属性规定元素内的空白怎样处理。1
word-spacingword-spacing属性规定增加或减少字与字之间的空白。1
hanging-punctuationhanging-punctuation属性指定一个标点符号是否会在启动或在结束时文本行框以外。 3
punctuation-trimpunctuation-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

字体

元素描述版本
fontfont 简写属性在一个声明中规定所有字体属性。1
font-familyfont - family 属性规定一个元素的字体。1
font-kerningfont-kerning 字体字符间距处理 CSS 属性参数控制字符之间的间距。 此功能允许非常相似的字符之间的间距、无论是什么字符。-
font-language-overridefont-language-override 字体-语言-重写 CSS 属性参数控制特定语言的字体中的字形。
font-stylefont-style 属性规定文本的字体样式。1
font-synthesisfont-synthesis 用来对字体进行加粗或者让字体变成斜体。
font-sizefont-size 属性规定文本的大小。1
font-size-adjust font-size-adjust 为元素规定 aspect 值。 2
font-stretch font-stretch 字体拉伸属性,对字体进行正常、缩小、或扩大处理。 2
font-variantfont-variant 属性规定小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。1
font-variant-alternatesfont-variant-alternates 字体变形候补 CSS 属性参数控制替代符号的用法。通过在 @font-feature-values 中定义的替代名称就可以引用这些备用标志符号。-
font-variant-capsfont-variant-caps 属性将字符替代为大写字母。
font-variant-east-asianfont-variant-east-asian 属性参数控制替代字形为东亚的脚本,如日文和中文的用法。
font-weightfont-weight 属性规定文本的粗细。1

动画

元素描述版本
animationanimation所有动画属性的简写属性,除了 animation-play-state 属性。 包括animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-function3
@keyframes动画可以根据帧定制不同的动画效果。3
animation-delayanimation-delay规定动画何时开始。默认是 0。3
animation-directionanimation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3
animation-durationanimation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-fill-modeanimation-fill-mode规定对象动画时间之外的状态。3
animation-iteration-countanimation-iteration-count规定动画被播放的次数。默认是 1。3
animation-nameanimation-name规定 @keyframes 动画的名称。3
animation-play-stateanimation-play-state规定动画是否正在运行或暂停。默认是 “running”。3
animation-timing-functionanimation-timing-function规定动画的速度曲线。默认是 “ease”。3
transition3
transition-delaytranstion-delay规定动画在过渡效果开始等待的时间。值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡立即开始。3
transition-durationtransition-duration 属性以秒或毫秒为单位规定过渡动画所需的时间。默认值为 0s ,表示不出现过渡动画。3
transition-propertytransition-property 规定应用过渡效果的 CSS 属性的名称。(当规定的 CSS 属性改变时,过渡效果将开始)。3
transition-timing-functiontransition-timing-function 规定过渡效果的速度曲线。3

变形

元素描述版本
transformtransform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。值包含(translate()scale()rotate(),skew(),perspective()等)。3
<transform-function>规定一个为了改变元素显示效果而应用到该元素上的函数,这些变换函数通常代表一类矩阵,最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。
transform-origintransform-origin 属性更改元素变形的原点。例如,rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素,进行变形,然后再用这个属性的值把元素translate回去)。3
transform-styletransform-style规定该元素的嵌套元素如何在3D空间中呈现。3

列表

元素描述版本
liststylelist-style 简写属性在一个声明中规定所有的列表属性。包括 list-style-typelist-style-positionlist-style-image1
list-style-typelist-style-type 属性规定列表项标记的类型。1
list-style-positionlist-style-position属性指示如何相对于对象的内容绘制列表项标记。1
list-style-imagelist-style-image 属性使用图像来替换列表项的标记。1

表格

元素描述版本
border-collapseborder-collapse 属性规定表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。 2
border-spacing border-spacing 属性规定相邻单元格的边框间的距离(仅用于“边框分离”模式)。 2
caption-side caption-side 属性规定表格标题的位置。 2
empty-cells empty-cells 属性规定是否显示表格中的空单元格(仅用于“分离边框”模式)。 2
table-layout table-layout 属性为表规定表格布局算法。 2

多列

元素描述版本
column-countcolumn-count 属性用来描述元素应该被划分的列数。3
column-fillcolumn-fill 属性用来规定如何填充列(是否进行填充)。3
column-gapcolumn-gap 属性用来规定元素列间距的大小。3
column-rulecolumn-rule 属性用来规定列间分隔线的宽度,样式及颜色。3
column-rule-colorcolumn-rule-color 属性用来规定列间分隔线的颜色规则。3
column-rule-stylecolumn-rule-style 属性用来规定列间分隔线的样式规则。3
column-rule-widthcolumn-rule-width 属性用来规定列间分隔线的宽度。3
column-spancolumn-span 属性用来规定元素应当横跨多少列。3
column-widthcolumn-width 属性用来规定列的宽度。3
columnscolumns 属性是一个简写的属性,允许同时规定 column-widthcolumn-count 属性。 3

用户界面

元素描述版本
appearanceappearance 属性规定元素看上去像标准的用户界面元素。3
box-sizingbox-sizing 属性以特定的方式规定匹配某个区域的特定元素。3
iconicon 属性为创作者提供了将元素设置为图标等价物的能力。3
nav-downnav-down 属性规定当使用 nav-down 导航键时,向何处进行导航。3
nav-indexnav-index 属性规定元素的连续导航次序 (“tabbing order”)。3
nav-leftnav-left 属性规定当使用 nav-left 导航键时,向何处进行导航。3
nav-rightnav-right 属性规定当使用 nav-right 导航键时,向何处进行导航。3
nav-upnav-up 属性规定当使用 nav-up 导航键时,向何处进行导航。3
outline-offsetoutline-offset 属性对轮廓进行偏移,并在边框边缘进行绘制。3
resizeresize 属性规定是否可由用户调整元素的尺寸。3