CSS——属性列表

尺寸

元素

描述

版本

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

本文分享自微信公众号 - Html5知典(gh_5b9c8e323efa)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全栈者

渲染树的形成原理你真的很懂吗?

看了上面的概念好像太“官方”,解释就是 DOM 是对 HTML 文档结构化的表述,后端服务器返回给浏览器渲染引擎的 HTML 文件字节流是无法直接被浏览器渲染引...

11930
来自专栏算法与编程之美

前端|如何用HTML打印一个六边形

六边形在我们网页的制作中,运用得并不是特别广泛。但在一些制作精美,要求创新的一些网页上,我们还是不难看到六边形的身影,如下图1.1所示。用六边形组合的蜂窝状图形...

10120
来自专栏前端之旅

《JavaScript 高级程序设计》阅读笔记 1:最佳实践

6610
来自专栏前端之旅

CSS 基础系列:水平垂直居中方案

比较全面的水平垂直居中方案。水平垂直居中问题大体分为两类,一类目标元素是行内元素,一类目标元素是块级元素(其中,块级元素又包括定宽高和不定宽高)。

10010
来自专栏前端之旅

「译」前端项目中常见的 CSS 问题

快速摘要:近年来,跨浏览器的渲染和交互已经愈加一致。不过,它仍然没有达到完全一致,有很多小问题会让你出错。除了这些问题之外,还有不同的屏幕尺寸、语言偏好和明显的...

5610
来自专栏前端之旅

前端学习知识体系

原文题目是《一名合格前端工程师的自检清单》,我目前的水平离前端工程师还很遥远,所以更愿意把这篇文章当作是对知识体系或者学习路线的总结。同时也是对自己的一个警醒,...

11310
来自专栏编程微刊

从零开始学习React-属性绑定(三)

前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

4420
来自专栏前端之旅

CSS 基础系列:flex 布局

1)初代:table 布局 在网页布局没有进入 CSS 的时代,排版几乎是通过 table 元素实现的。虽然它可以很方便地实现水平和垂直对齐,但是缺点也很明显:...

5810
来自专栏老码农的一亩三分地

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

3910
来自专栏移动大前端

前端框架汇总

6110

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励