css属性（常用属性整理）

摘要：本文是我在学习前端的过程中整理的一些常用css属性，部分是css3新增的，因能力有限，文中如有错误，欢迎提出，我会及时修改。希望对大家有帮助！

 

CSS属性

CSS属性 1

1. css颜色属性 5

1.1. 字体颜色 5

1.2. 背景颜色 5

2. 页面布局相关属性 5

2.1. display 5

2.2. position 6

2.2.1. position:relative 6

2.2.2. position:absolute 6

2.2.3. position:fixed 7

2.2.4. z-index:number 7

2.3. clear 7

2.4. float 8

2.5. visibility 8

2.6. overflow 8

2.6.1. visible 8

2.6.2. hidden 8

2.6.3. auto 8

2.6.4. scroll 9

2.7. overflow-x 9

2.8. overflow-y 9

2.9. padding(内边距属性已说明) 9

2.10. margin 9

2.10.1. margin-left 9

2.10.2. margin-top 9

2.10.3. margin-right 9

2.10.4. margin-bottom 9

2.10.5. margin 多个值 9

3. css字体属性 10

3.1. font-family 10

3.2. font-size 10

3.3. font-weight 10

3.4. font-style 10

3.5. font-varient 10

3.6. font 复合属性 10

4. css文本属性 10

4.1. word-spacing 10

4.2. letter-spacing 10

4.3. text-align 11

4.4. vertical-align 11

4.5. line-height 11

4.6. text-decoration 11

4.7. text-indent 11

4.8. word-wrap 11

4.9. overflow-wrap 12

4.10. white-space 12

5. 尺寸属性 12

5.1. width 12

5.2. height 12

6. 边框属性 12

6.1. border-style 12

6.2. border-width 12

6.3. border-color 13

6.4. border复合属性 13

7. 内边距属性 13

7.1. padding-left 13

7.2. padding-right 13

7.3. padding-top 13

7.4. padding-botom 13

7.5. padding 13

8. 背景颜色属性 14

8.1. background-color 14

8.2. background-image 14

8.3. background-repeat 14

8.4. background-position 14

8.5. background-attachment 14

8.6. background复合属性 14

8.7. background-size 15

9. 游标 cursor 15

10. 列表相关的css属性 15

10.1. list-style-type 15

10.2. list-style-position 16

10.3. list-style-image 16

10.4. list-style: 复合属性 16

11. 表格相关的css属性 16

11.1. table-layout 16

11.2. border-collapse 16

11.3. border-spacing 16

11.4. caption-side 16

11.5. empty-cells 17

12. css3新增属性 17

12.1. box-sizing 17

12.2. outline 17

12.3. opacity 17

12.4. border-radius 18

12.4.1. border-top-left-radius 18

12.4.2. border-top-right-radius 18

12.4.3. border-bottom-left-radius 18

12.4.4. border-bottom-right-radius 18

12.5. outline 18

12.5.1. outline-style 18

12.5.2. outline-color 18

12.5.3. outline-width 18

12.5.4. outline复合属性 18

12.6. box-shadow 19

12.7. transform 19

12.7.1. transform-origin 19

12.8. transition 19

12.8.1. transition-property 19

12.8.2. transition-duration 20

12.8.3. transition-timing-function 20

12.8.4. transition-delay 20

12.8.5. transition 复合属性 20

12.9. animation 20

12.9.1. animation-name 20

12.9.2. animation-duration 20

12.9.3. animation-timing-function 20

12.9.4. animation-delay 21

12.9.5. animation-iteration-count 21

12.9.6. animation-direction 21

12.9.7. animation-play-state 21

12.9.8. animation 复合属性 21

 

附上整篇文章的思维导图

 

1. css颜色属性

1.1. 字体颜色

 

字体颜色相关属性设置：

 

color：red

 

color：#f90

 

color:rgb(250,250,0)

 

color:rgba(r,g,b,透明度（0-1）)

 

 

1.2. 背景颜色

 

背景颜色相关属性设置：

 

background:#f90;

 

background:rgb(255,255,0);

 

background:red;

 

background:rgba()

2. 页面布局相关属性

2.1. display

 

display

 

block 设置元素为块状元素

<div>、 <p>、<h1>、<form>、<ul> 和 <li>是块级元素

 

inline 设置元素为内联（又叫行内）

<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>是典型的内联元素（行内元素）

 

inline-block 兼具两者

 

 有些html元素，默认就是inline-block （img, input, textarea ，td,th）

 

none 隐藏 该元素不会显示，也不会占据空间

 

 

 

 

2.2. position

2.2.1. position:relative

 

 相对定位

 

通过 position:relative 设置元素为相对定位元素

 

元素设置为相对定位之后，不会脱离文档流，不影响其他元素

 

可以通过 left、top、right、bottom给相对定位的元素设置位置

 

定位元素： 根据 原先默认的位置 去定位

2.2.2. position:absolute

 

绝对定位

 

通过position:absolute来设置绝对定位

 

元素绝对定位后，脱离文档流，影响后面的元素。 宽度默认会被内容撑开

 

可以通过 left、top、right、bottom给绝对定位的元素设置位置

 

定位规则： 根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素。 祖先元素什么定位都可以

2.2.3. position:fixed

 

position: fixed;

left/top/right/bottom: 长度单位；

根据屏幕进行定位

 

脱离文档流 （宽度默认变成内容撑开）

 

元素设置为固定定位或绝对定位之后，会变为块状元素

 

2.2.4. z-index:number

 

垂直高度，z是指向自己方向的，主要是为了调浮动的高度

 

为了让下面的元素能够浮到上面

2.3. clear

 

消除元素对后面元素的影响， 在后面的元素设置 clear:both/left/right

 

<div style="border:2px solid red;">

<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

<div style="clear:both;"></div>

</div>

 

后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

 

 

 

2.4. float

 

1、 浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。

2、 浮动元素后边的非浮动元素显示问题。

3、 多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。

4、子元素全为浮动元素的元素高度自适应问题。

2.5. visibility

 

visibility: visible/hidden

 

规定元素是否可见，就算不可见，元素依然会占据一片空间。

2.6. overflow

 

overflow: hidden/auto/scroll/visible

 

规定当内容溢出元素框时发生的事情。

 

2.6.1. visible

 

默认值。内容不会被修剪，会呈现在元素框之外。

2.6.2. hidden

 

内容会被修剪，并且其余内容是不可见的

2.6.3. auto

 

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

2.6.4. scroll

 

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

2.7. overflow-x

 

水平方向

2.8. overflow-y

 

垂直方向

2.9. padding(内边距属性已说明)

2.10. margin

2.10.1. margin-left

 

左侧外边距

2.10.2. margin-top

2.10.3. margin-right

2.10.4. margin-bottom

2.10.5. margin 多个值

 

margin: 值; 上下左右

　　margin: 值1 值2； 上下 左右

　　margin: 值1 值2 值3; 上 左右 下

　　margin: 值1 值2 值3 值4； 上 右 下 左  后面要加单位px。

3. css字体属性

3.1. font-family

 

font-family:Arial,Sans-serif;

3.2. font-size

 

font-size:2em

3.3. font-weight

 

font-weight: bold

3.4. font-style

 

font-style: italic (斜体)

3.5. font-varient

 

font-variant: small-caps

3.6. font 复合属性

 

font:italic bold 12px/30px Georgia, serif;

4. css文本属性

4.1. word-spacing

 

词的间距，通过空格来识别

4.2. letter-spacing

 

字母间隔，可以为负值

4.3. text-align

 

text-align:left/right/center  横向排列 

 

text-align:center

让文字水平居中

内联元素(inline 和 inline-block)

4.4. vertical-align

 

vertical-align: middle/top/bottom 垂直对齐

4.5. line-height

 

line-height 设置行间距离

 

line-height

 

让一行文字垂直居中。 line-height的值等于元素的高

 

内联元素(inline inline-block)

4.6. text-decoration

 

text-decoration: underline(下划线) / overline （上划线）/ line-through（横穿） / none（默认为none）

 

4.7. text-indent

 

text-indent:50px

 

设定首行文本缩进

4.8. word-wrap

 

word-wrap: break-word / overflow-wrap 允许长单词或url地址换到下一行

4.9. overflow-wrap

 

同word-wrap

4.10. white-space

 

white-space: pre / pre-wrap

对空白的处理方式

white-space :nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

 

white-space:pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

 

white-space:pre-wrap 保留空白符序列，但是正常地进行换行。

5. 尺寸属性

5.1. width

 

width: max-width   min-width 设置最大宽度和设置最小宽度

5.2. height

 

height :max-height min-height

6. 边框属性

6.1. border-style

 

border-style 边框风格 

solid 实线 / dotted 点线 / dashed 虚线 / double 双层 / none 设置边框：无边框

6.2. border-width

 

border-width 边框宽度

6.3. border-color

 

border-color 边框颜色 

 

border-color:red;

 

border-color:#ff6700;

 

border-color:rgb();

 

border-color:rgba();

 

 

6.4. border复合属性

 

border 复合属性

 

border: 1px solid #ff6700;

7. 内边距属性

7.1. padding-left

 

左侧内边距

7.2. padding-right

7.3. padding-top

7.4. padding-botom

7.5. padding

 

padding: 值; 上下左右

　　padding: 值1 值2； 上下 左右

　　padding: 值1 值2 值3; 上 左右 下

　　padding: 值1 值2 值3 值4； 上 右 下 左  后面要加单位px。

8. 背景颜色属性

8.1. background-color

 

 

background-color 背景颜色 ">透明）

8.2. background-image

 

背景图片 url()

8.3. background-repeat

 

background-repeat 背景图片平铺 repeat/ no-repeat（不重复平铺）

repeat-x（水平方向重复平铺） repeat-y（竖直方向重复平铺）

8.4. background-position

 

background-position 背景图片位置 10px,10px 根据坐标显示具体图片位置

坐标原点以盒子左上角为准

 

background-position : right center(右中) / center center 居中 

8.5. background-attachment

 

background-attachment 背景图片固定 scroll / fixed

 scroll---滚动  fixed --固定

8.6. background复合属性

 

background: #ccc url（) no-repeat 10px 10px；

 

background: color url postion/size repeat attachment；

8.7. background-size

 

 规定背景图像的尺寸(css3新增)

 

background-size: cover / contain / 400px 300px / 100% 100%

 

cover:background-size: cover; 优先 铺满元素。 多余的图片裁掉 保证原图比例

 

contain:background-size: contain; 优先 保证图片显示完整，可能元素不能铺满。 保证原图比例

 

 

9. 游标 cursor

 

pointer /  move / no-drop

 

cursor:move 表示对象可被移动

 

cursor:pointer 指示链接的指针为一双手

cursor:no-drop 无法释放 通常是一个禁止符号。

 

10. 列表相关的css属性

 

适用于<ol>和<ul> 也可以设置给 <li>

10.1. list-style-type

 

list-style-type: disc/circle/square.../none 列表项前面的符号

 none常用（去掉前面图标）

10.2. list-style-position

 

list-style-position: outside/inside

 加个边框就能看到明显的效果inside前面的点在边框里

10.3. list-style-image

 

list-style-image: url()  

把符号变成图片 最好是小的图片，可以显示完整。

10.4. list-style: 复合属性

 

ul li:first-child{

list-style:circle inside;

}

11. 表格相关的css属性

11.1. table-layout

 

table-layout: auto / fixed  

 列宽固定(相等)

11.2. border-collapse

 

border-collapse: separate/ collapse

collapse:合并单元格边框

 

seperate:分开单元格边框

11.3. border-spacing

 

border-spacing: 长度;  单元格和单元格之间的间隙 

单元格不能合并的前提下，才可以设置border-spacing

11.4. caption-side

 

caption-side: top/bottom  标题的位置

11.5. empty-cells

 

empty-cells:hide/show   空的单元格显示/隐藏 单元格不能合并

12. css3新增属性

12.1. box-sizing

 

重新设置 盒子模型的规则

box-sizing: content-box(默认) / border-box （width/height盒子的宽高）

 

border-box：

允许以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

 

为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

 

content-box:

在宽度和高度之外绘制元素的内边距和边框

12.2. outline

 

外轮廓  在border的外面 不算盒子

outline:

outline-style

outline-color

outline-width

12.3. opacity

 

不透明度

opacity 0~1 小数

12.4. border-radius

 

边框圆角，值超过一定范围就会整个变成圆形

12.4.1. border-top-left-radius

 

左上角设置圆角

12.4.2. border-top-right-radius

 

右上角设置圆角

12.4.3. border-bottom-left-radius

 

左下角设置圆角

12.4.4. border-bottom-right-radius

 

右下角设置圆角

12.5. outline

 

外轮廓

12.5.1. outline-style

12.5.2. outline-color

12.5.3. outline-width

12.5.4. outline复合属性

 

outline:1px solid #ccc

12.6. box-shadow

 

阴影

 

box-shadow:水平偏移 垂直偏移;   偏移可以负值

box-shadow:水平偏移 垂直偏移 颜色;

box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/

box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

12.7. transform

 

transform

 

下面是属性值：

translatex()  水平移动，括号里是长度单位

translatey() 垂直方向移动

translate(x, y) 先水平后垂直移动

 

rotate()  括号里单位：角度 deg

比如：transform:rotate(60deg)   翻转

 

skewx()  括号里单位角度deg

skewy()

skew(x, y)  扭曲

 

12.7.1. transform-origin

 

transform-origin:left top;

设定左上角为变换原点

 

transform-origin 变换的原点。 对translate没有意义。 对rotate影响大

12.8. transition

12.8.1. transition-property

 

transition-property  指定要过渡的属性 用,隔开。默认是 all

12.8.2. transition-duration

 

transition-duration  过渡持续时间

12.8.3. transition-timing-function

 

transition-timing-function  过渡线性效果  默认 ease

12.8.4. transition-delay

 

transition-delay   过渡延迟

12.8.5. transition 复合属性

 

transition：property timing-function duration delay

12.9. animation

12.9.1. animation-name

 

animation-name  指定动画的名字

规定需要绑定到选择器的 keyframes 名称

12.9.2. animation-duration

 

animation-duration  动画的执行时间

 

规定完成动画所花费的时间，以秒或毫秒计。

12.9.3. animation-timing-function

 

animation-timing-function  执行效果速度

 

规定动画的速度曲线。

 

linear:动画从头到尾的速度是相同的。

 

ease:默认。动画以低速开始，然后加快，在结束前变慢。

12.9.4. animation-delay

 

animation-delay   延迟

 

规定在动画开始之前的延迟。

12.9.5. animation-iteration-count

 

animation-iteration-count  

 循环次数  infinite(无限)

 

规定动画应该播放的次数。

12.9.6. animation-direction

 

animation-direction:  alternate （正向 反向 交替）\ reverse（反向）

 

规定是否应该轮流反向播放动画。

12.9.7. animation-play-state

 

animation-play-state: running / paused

 

规定动画的播放状态

12.9.8. animation 复合属性

 

animation: myanimate 2s linear 2s alternate;

 

myanimate是绑定到选择器的keyframes名称

 

2s是完成动画所需时间

 

linear 动画匀速播放

 

2s动画开始之前的延迟

 

alternate正反向交替播放

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有