规避脱标
定位的盒子居中显示
Margin：0 auto ； 只能让标准流的盒子居中对齐
当A是B的父系，B可以使用 margin-left：auto； 来获得相当于定位right：0；的效果
Margin-right：auto；
定位的盒子剧中 先左右走父元素盒子的一半50%，在向左走盒子的一半（margin-left：负值）
步骤: 设置父盒子为相对定位 / 设置盒子left 值为父盒子宽度一半 / 设置子盒子左边距为自己宽度一半
CSS标签包含规范
规范：
行内元素尽量包含行内元素
有些块级元素不能包含其他块级元素
Div可包含所有标签。
p标签不能包含div h1 等标签
H1 可以包含p，div 等标签
下面是具体的包含规范；
规避脱标流
由于浮动，定位都脱离了标准流，会对网页布局造成一定的影响，在以后的网页布局中优先考虑：标准流，浮动，定位。
优先级： 标准流》浮动float》定位position
可使用margin-left：auto； 避免脱标
Margin-left：auto ； 让盒子左侧充满
Margin-right：auto；让盒子右侧充满
Margin : 0 auto ;
规避脱标流之：让图片和文字垂直对齐
使用 vertical -align：middle 让行内，行内块元素设置垂直距离
Vertical-align：middle 常与display：inline-block 配合使用
默认属性：vertical-align：baseline;
CSS可见性
Overflow：hidden； 溢出隐藏
Visibility：hidden； 隐藏元素 隐藏之后依然占据原来的位置
Display：line-block 隐藏元素 隐藏之后不占据原来的位置
Display：block 元素可见
Display：none 和display：block 常配合js使用
CSS之内容移除(网页优化）
使用tezt-indent：-500em； 把元素 移除屏幕，行内元素需转换为行内块元素
将元素高度设置为0，使用内边距将盒子撑开，给盒子使用overflow：hidden； 将文字隐藏
.box{
Width:300px;
Height:0 ;
Padding-top: 100px;
Overflow:hidden;
Background:red;
}
CSS精灵图
1：上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
2：然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。
工作原理
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位
div{
height：34px；
width : 66px ;
background: url( "精灵图.png" ) -33px -77px;
position;absolute;
left:345px;
top:99px;
}
即可取出在”精灵图“ 坐标为（33，77）的图片(34X66). 并显示在父系的 （345，99）位置
可使用z-index 200； 调整其浮层，越大 越安全。
可使用FireWorks CS6制作图片，在制作时，选择大小的时间，选择透明即可制作精灵图。
尽量贴边，图片之间要有间距。 最后保存为png格式