1.CSS可以提高代码的复用性，将内容和表现分离。
2.使用CSS的三种方式：行内式，内联式，外联式。
*检查：F12-->网络 刷新页面时加载两个文件：html,css。如果有一个文件没有加载则表示加载时有问题。
3.CSS常用选择器
*元素选择器 元素名{ }
*类选择器 .类名{ }
*id选择器 #id名{ }
*并集选择器 选择器1 选择器2 { }
*儿子选择器 选择器1>选择器 { }（下一级所有）
*伪类选择器 link(默认状态) hover(鼠标悬停) active(鼠标按下) visited(访问之后)
4.CSS特性
*继承性（如颜色，字体）
*层叠性
同一个元素如果存在多个选择器对其进行了css设置,对于不冲突的样式可以叠加，冲突的样式进行层叠覆盖，覆盖时参考下一特性。
*优先级 行内>内部>外部 同一级，看权重。id>class>标记 继承过来的权重为0
5.CSS声明
*边框 border 三要素四方向
border-style: border-width: border-color: top right bottom left
合并写法：border: 1px solid red;(三要素)
6.盒子模型 四大元素：宽，内边距（padding），外边距(margin)，边框 四大方向：上左下右
*背景 background
background-color
background-img
background-repeat
background-attachment
background-position
合并写法：
background:色 图 铺 定 位/大小
ps：颜色 rgba
***快速开发指南：
1.新建页面之后，编写外部样式表文件，引入到html页面
2.浏览器打开页面->f12->sources->打开css文件右边编写样式,左边查看效果
3.样式编写完成将样式文件整体复制到自己项目的css文件中保存
1.居中问题（水平）
1）文字居中
text-align:center
2)表格整体居中
align:center
3)已知宽度的盒子居中
margin:0 auto;
*里面盒子的margin-left:(外width-内width)/2
2.margin-外边距（top,right,bottom,left）
合并写法：中间用空格
上 左右 下（三个值）
上下 左右（两个值）
上下左右（四个值）
padding-内边距（同margin）
不同：会撑开盒子宽高
3.元素的分区
块级（div h1）
独占一行，可以设置宽高 从上往下
行内（span label）
可以跟其它元素共享一行，不可以设置宽高 从左往右
行内块 可以设置宽高，并且可以跟其它元素共享一行 从左往右
可以通过display属性修改元素分区形式（显示方式）
display
block:块级元素
inline:行内元素
inline-block行内块
none:隐藏（释放空间）
opacity:0;（不释放空间）
4.定位
流布局（默认的）
定位：指定元素相对于正常位置应该出现的位置
position
relative->相对定位->不脱标 不会让出原来的位置
相对于原本应该出现的位置移动
absolute->绝对定位->脱标 让出原先的位置
相对于定位了的祖先节点移动
fixed固定定位 脱标
通常固定定位结合bottom一起使用
z-index堆叠 10数值变大 距离用户越近
浮动定位->脱标
float:left float:right
可以用浮动将li显示在同一行，结合list-style:none
浮动的元素无法撑开父盒子的高度
此时需要清除浮动带来的影响
清除的方式3种：
1)给父盒子添加overflow:hidden
2)给父盒子添加固定高度
3)给父元素添加用来清除浮动的节点，只是该节点添加clear：both属性
4)伪元素法：div:after