CSS：
一、常用样式：字体，颜色，背景
二、布局：浮动 定位 标签特性
三、标签盒子模型： 边距 边框
四、动画：旋转 渐变
注意：子标签会继承父标签的样式但不是所有的样式都会被继承。
1.1、文本字体
①文本颜色
h1 {color:#ccc;}
②文本对齐方式
h1 {text-align:center;}
h2 {text-align:right;}
h3 {text-align:justify;}
justify(每一行被展开为宽度相等，左，右外边距是对齐）
③文本修饰
h1 {text-decoration:none;}
none（无效果）
overline（上横线）
line-through（删除线）
underline（下划线）
④文本缩进
p {text-indent:50px;}
⑤字体样式
font-family
⑥字体形态
h1l {font-style:normal;}
h2 {font-style:italic;}
h3 {font-style:oblique;}
⑦字体大小
font-size
单位：em 1em的默认大小是16px
1.2、列表样式
①list-style-type指定列表项标记的类型
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
②list-style-image指定列表项标记的图像
ul
{
list-style-image: url(‘风景.jpg‘);
}
③list-style-position设置列表中列表项标志的位置
1.3、背景
①背景颜色：
body {background-color:#ccc;}
②背景图片：
div {background-image:url(‘大海.jpg‘);}
注意：
（路径html和js从html找 css从css找）
③背景图像水平或垂直平铺：
div
{
background-image:url(‘大海.jpg‘);
background-repeat:repeat-x;
}
repeat-x（x轴方向平铺）
repeat-y（y轴方向平铺）
no-repeat（不平铺）
④背景图像的位置：
用background-position改变图像在背景中的位置（right top）或（50% 50%）有空格
④简写
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
实例：
{background:#ccc url(‘123.jpg‘) no-repeat right top;}
1.4、表格
①边框
table
{
border: 1px solid red;
}
②边框折叠
实例：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid red;
}
③高度宽度
width；height
2.1布局
①元素居中对齐
div {
margin: auto;
width: 50%;
border: 1px solid red;
padding: 10px;
}
②文本居中对齐
div {
text-align: center;
border: 1px solid blue;
}
③图片居中对齐
img {
display: block;
margin: auto;
width: 50%;
}
④左右对齐（使用定位）
.right {
position: absolute;
left: 0px;
width: 100px;
border: 1px solid #CCC;
padding: 10px;
}
⑤垂直居中对齐
div {
line-height: 200px;
height: 200px;
border: 1px solid green;
text-align: center;
}
⑥浮动
float 给要浮动的元素加父标签 设定父标签的宽高（导航栏常用浮动+li）
⑦Position定位：
fixed relative absolute
fixed：相对于窗口来定位 不在乎是否嵌套 没有本身位置
absolute：相对于标签定位 body 在乎嵌套，
相对于最近的有position属性的父标签定位 最终标签是body 没有本身位置
relative：相对于自身定位 位置还有 常用在微调和父标签（对齐）
⑦标签特性
display：block（块标签） inline-block（行内快标签） inline（行标签） none（隐藏，位置不在）
style="visibility:hidden"（隐藏，位置还在）
⑧盒子模型
padding
border
margin
实例：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式
附加：
border-radius(圆角）
box-sizing:border-box(边框自适应）
margin-top:当写在子标签时会做用在父标签。
原文地址：https://www.cnblogs.com/Ace-suiyuan008/p/9157439.html