精灵图，滑动门，宽高自适应,伪元素

发表于 | 分类于

一、精灵图（图片整合）

图片整合的优势：1.通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。

​ 2.通过整合图片来减小图片的体积。

原理：将导航背景图片、按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用 background-position”来实现背景图片的定位技术。

二、滑动门

滑动门：通过多张背景图片进行层叠，从而在视觉上达到同一张图片的效果
a{padding-left存放左边的背景图片}>span{padding-right以实现文本居中}

三、自适应布局

一、宽高自适应
（一）宽度自适应
当块级元素的宽度设置成100%，或者不设置，宽度默认都是占父级元素的100%。
经验：当父元素脱离了标准流，可以由子元素撑开它的宽度。

二、父元素的高度由子元素撑开 （高度自适应）

​ 1. 最小高度 min-height

* 当内容高度小于最小高度，按最小高度显示；
* 当内容高度大于最小高度，按内容高度显示。
应用场景：内容不确定，无法较好地控制父元素高度

兼容ie6： ie6中，height代表的是最小高度。若想这个属性只让ie6识别，通过过滤器_height。

2.高度塌陷:当子元素都浮动了，父元素会没有子元素撑开高度。
解决办法：
（1）给父元素加overflow:hidden; 缺点:若存在内容溢出，会被裁剪掉。
（2）给父元素添加最后一个子元素（块级){height:0;clear:both;overflow:hidden;} 缺点：会产生很多多余的标签
（3）伪元素清除法，

1
2
3
4
5
6
7
8
.clearfix::after{
            content:"";
            display:block;
            height:0;
            clear:both;
            overflow:hidden;
            visibility: hidden;
	}

​ 一般我们用的时候,我们只需要将类名.clearfix添加到父元素上即可。

四、伪元素

1.E::before 给E元素添加第一个子元素,content:””不能省略
元素类型默认为行内元素 content:url();添加图片

2.E::after 给E元素添加最后一个子元素

  1. E::first-letter 给E元素的第一个文本添加样式
  2. E::first-line 给E元素的第行文本添加样式