1、标签包含规范
◆ div可以包含所有的标签。
◆ p标签不能包含div h1等标签。
◆ h1可以包含p，div等标签。
◆ 行内元素尽量包含行内元素，行内元素不要包含块元素。
2、规避脱标流
◆尽量使用标准流。
◆标准流解决不了的使用浮动。
◆浮动解决不了的使用定位。
margin: 0 auto;/*就是左边向中间移动，右侧也向中间移动，最后就在中间停留了，所以结果就居中显示了*/
margin-right: auto;/*右边距设置为自动，盒子将自动移动到左边，而不用顾忌在不同屏幕的大小导致移动位置错误的状况*/
margin-left: auto;
3、图片和文字垂直居中
vertical-align 对 inline-block最敏感。
默认属性是:vertical-align:baseline;/*图片与文字默认是基线对齐的，不是底部对齐*/
img{
vertical-align: middle;/*图片和文字垂直居中，区分text-align是内容水平居中*/
}
了解：
（1） sub 垂直对齐文本的下标；
（2） super 垂直对齐文本的上标；
（3） top 把元素顶端与行中最高元素的顶端对齐；
（4） text-top 把元素的顶端与父元素字体的顶端对齐；
（5） text-bottom 把元素的底端与父元素字体低端对齐；
（6） bottom 把元素的顶端与行中最低元素的顶端对齐；
（7） middle 把元素放在中部；
（8） baseline: 默认，放在基线上；
（9） inherit 规定从父元素继承vertical-align属性的值。
4、css可见性
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置，就是说下面的内容不会往上移动。
display:none; 隐藏元素 隐藏之后不占据原来的位置，下面的内容会往上移。
display:block; 元素可见
display:none 和display:block 常配合js使用。/*比如鼠标悬停在一个文字图标上后会显示下拉框，display就为block值，可见*/
5、css内容移除
（1）
a标签 是行内元素，要先转成行内块才可使用text-indent:-5000em;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.logo{
width: 143px;
height: 76px;
background: url("../03-练习/logo.png");
}
a{
display: inline-block;
text-indent: -5000px;
}
</style>
</head>
<body>
<div class="logo">
<h1>
<a href="#"></a>
</h1>
</div>
</body>
</html>
（2）将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。
.box{
width: 300px;
height: 0;
background: red;
padding-top: 100px;
overflow: hidden;
}
<div class="box">每个人都一条抛物线，天赋决定其开口，而最高点则需后天的努力。</div>
6、精灵图（CSS Sprites）:是一种处理网页背景图像的方式
将网页上大量的图片同一放在一起进行请求:有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
各个网页通常只需要精灵图中的不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的
background-image/background-repeat/和background-position属性进行背景定位，其中最关键的是使用backg
round-position属性精确地定位。
在Fw中确定位置的时候Y的值是顶部到图像的距离，X的值是左边到图像的距离（其中宽、高直接输入即可）
注意：因为文档流的原因，X/Y的值除了0，都是负值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 24px;
height: 20px;
background: url("../03-练习/tbbg.png") 0 -45px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
7、精灵图的制作
（1）透明背景图
在Fireworks中点击新建选择“透明”，创建任意画布大小即可；
（2）将小图标放入背景图中
注意：最好靠边放置，方便取值；
（3）导出仅图像或保存
8、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type="text"][class="pwd"]{
/*如果只写class则class="user"和class="pwd"都被选中*/
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<input type="text" class="user">
<input type="text" class="pwd">
<input type="password">
<input type="button">
<input type="submit">
</body>
</html>
9、emmet快捷键：首选项》插件设置》Emmet
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
（1）html:
生成结构的快捷键：
！+ tab,可以生成html5的结构代码。
（2）生成id名和类名
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
（3）生成同级元素：
标签名+标签名+标签名 “+”tab
（4）生成子类标签
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
.search>.logo>img[src="1.png"]+^.search01>input/*往上一级*/
（5）带固定数量的标签:
ul>li*5+tab
（6）带有序号名称
ul>li.abc$*3 + tab