摘要:本文是我在学习前端的过程中整理的一些常用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 设置元素为相对定位元素
元素设置为相对定位之后,不会脱离文档流,不影响