1.背景
background-color
background-image
background-repeat
background-attachment
background-position

2、文本
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
body {color:red;}

p.small {line-height:70%;}
p.big {line-height:200%;}
div.ex1 {direction:rtl;} //从右到左的书写方向
p{ word-spacing:30px;}

3、字体
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

4、链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */

5、表格
table, th, td{border: 1px solid black;}
table{ width:100%; text-align:right;vertical-ali}
td{padding:15px;}
th{background-color:green;color:white;}

6、盒子模型
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

7、边框border-style:dotted solid double dashed;
p{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

8、margin(外边距)
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

9、padding（填充）
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

10、CSS 分组 和 嵌套 选择器
h1,h2,p{
color:green;
}
p{
color:blue;
text-align:center;
}
.marked{
background-color:red;
}
.marked p{
color:white;
}

11、尺寸
line-height max-height
p.small {line-height:90%}
p.big {line-height:200%}

12、display
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}

li {display:inline;}
span {display:block;}

13、定位static relative fixed absolute sticky
p.pos_fixed //元素的位置相对于浏览器窗口是固定位置。
{
position:fixed;
top:30px;
right:5px;
}

h2.pos_left //

样式 “left:-20px” 从元素的原始左侧位置减去 20 像素。

h2 //absolute 定位
{
position:absolute;
left:100px;
top:150px;
}

div.sticky { //粘性定位
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

img{ //重叠元素
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

14、浮动
.thumbnail //彼此相邻的浮动元素
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
}

15、对齐
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
text-align: center; //文本居中对齐
margin: auto; //图片居中对齐
左右对齐
right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
//注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。
.clearfix {
overflow: auto;
}
//垂直居中
.center {
height: 200px;
position: relative;
border: 3px solid green;
}

.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}