设为首页 加入收藏

TOP

css属性(常用属性整理)(一)
2019-09-03 02:12:24 】 浏览:49
Tags: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 设置元素为相对定位元素

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

首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇一张图一个表——CSS选择器总结 下一篇BootStrap的动态模态框及静态模态..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目