CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

规避脱标

 

定位的盒子居中显示

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格式