1.在css中首先写好(*号作用于所有标签)
*{
margin: 0;
padding: 0;
}
2.使div设计的内容区域居中
<div style="float: left; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);">（absolute是绝对定位相对于整个屏幕界面， transform是平移位置，translate将元素向指定的方向移动）
3.
选择器：
（1）标签选择器 关键字{}
（2）类选择器 .自定义名称{}
（3）ID选择器 #自定义名称{}（只使用一次）
优先级：标签选择器<类选择器<id选择器
（4）后代选择器 .父代选择器 子代名{}（中间是空格，作用于所有后代）
注意：块级元素可以包含行级元素，且行级必须包含在块级里
（5）交集选择器 p.txt{}作用于同级class里的txt之后的内容
P .txt{}作用于p的下一级的class的txt的内容
（6）并集选择器 逗号隔开
4.
分离设计
在<head>标签之中：
（1）内部：
头部（如果希望某一网页有特殊的样式）
<style type="text/css">
</style>
行内（如果希望突出显示某一标签的样式）
（2）外部（整个网站的样式统一）
<link rel="stylesheet" type="text/css" href="" />
5.
链接伪类名：
a:link{} 链接文字属性
a:visited{} 链接后文字的文字属性
a:hover{} 正在访问文字属性
a:active{} 鼠标点击未松
a:{ text-decoration:none}去掉下划线
顺序：link-visited-hover-active
6.
行级容器：<span><a><label><strong><td>
块级容器：<div><h1><p><form><ul>
行级变块级：display:block
块级变行级：display:inline
注：display:none 使内容隐藏
7.style
字体——font:字体风格 字体粗细 字体大小 字体类型（顺序一定，但不一定都要有）
文字——text-decoration/vertical-align/text-align/text-indent/line-height
图片——background-image: url(img/arrow-down.gif);
background-repeat: no-repeat;
background-position: 280px 10px;
简写： background:#CC0000 url(img/arrow-down.gif) 280px 10px no-repeat;
列表——list-style-type:none;将列表的标签去掉
border——2px 颜色 boild
8.浮动
float（左右，相当于层的浮出，将脱离最底层的区域束缚）
Clear（让自己的区域的上方不能叠加层，也就是上空禁浮）
当想要父层包裹全部子层，可以在最下面写一个为空的子层（这个子层设置为clear：both）
9.overfloat
visible 默认在盒子外显示超出的部分
hidden 直接在超出盒子的部分砍掉
scroll 无论内容是否会溢出都有滚动条
auto 自动判断，溢出就出现滚动条（推荐）
10.盒子中的元素，都含有两个堆叠层级
z-index:auto/数字; 正数>0>负数（默认等级为0，仅能在定位元素上起作用）
11.使得div容器居中
.wide{
width: 600px;
margin: 0 auto;
}
12.将height和line-height的设成一致有什么作用？
文字能够上下居中
注意：
（1）对不同的class要区分开，有相同效果的就一起设置
（2）要非常注意格式和检查代码的用法，因为style出错是不会报错的
（3）先设置大范围的效果，然后逐步求精
（4）一定要记得先导入样式表
（5）对容器内的文字进行设置上下对齐时，可以不用在文字外加span，直接在容器里设置line-height最好。