CSS基础整合5

【定位的盒子居中】

 margin：0 auto；只能让标准流的盒子居中对齐

 定位的盒子居中：先向右走父元素盒子的一半50%，再向左走子盒子的一半

  left：50%;

  magin-left：-480px；

  控制元素的层叠顺序用：z-index：；值越大，越在上层。

【标签的包含规范】

1. div可以包含所有的标签

2. p标签不能包含div、h1等标签

3. h1可以包含p、div等标签

4. 行内元素尽量包含行内元素，行内元素不要包含块元素。

【规避脱标流】

  尽量使用标准流

  只有当标准流解决不了，使用浮动；

  浮动解决不了才使用定位。

margin-left：auto；设置盒子左外边距为auto，盒子冲到最右边

margin-right：auto；设置盒子右外边距为auto，盒子冲到最左边

margin：0 auto；盒子居中

【图片和文字居中对齐】

vertical-align对inline-block最敏感，主要用于行内块。

默认属性是：vertical-align：baseline；默认基线对齐

vertical-align：middle；让文字和图片垂直居中对齐

vertical-align：top、bottom；顶端|底端对齐

【CSS可见性】

overflow：hidden；溢出隐藏

visibility：hidden；隐藏元素（隐藏之后还占据原来的位置）

display：none；隐藏元素（隐藏之后不占据原位置）

display：block；元素可见（常配合js使用，鼠标经过元素可见）

【css内容移出，网页优化】

a{

  display：inline-block；

  text-indent：-5000em；（向左缩进，将a链接移出显示面，对搜索引擎更友好）

}

【CSS精灵图】

为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度。

CSS精灵是一种处理网页背景图像的方式，将小图都集中到一张大图中去，然后将大图应用于网页。

background：url（“精灵图.jpg”） 0 -46px； 图片向上走46像素

【属性选择器】

input[type=text][class]{

属性：值；}

【CSS滑动门】

left ，center（repeat）， right