2020-11-04 学习总结 css基础6 相对定位绝对定位，元素的层叠顺序z-index，精灵图，创建锚点，浏览器相关，简单bug处理

1.相对定位和绝对定位的区别

			相对定位是相对于元素本身定位 通过偏移量设置定位元素与原来位置的距离、
			绝对定位是相对于祖先元素定位 子集开启绝对定位 父级开启相对定位

2.元素的层叠顺序z-index

			值为整数 值较大的元素会叠加到值较小的元素之上
			默认层是0 可以设置负值

3.精灵图/雪碧图

			网页图片处理的方式 将零星的图片整合成一张大图片
			
			优点：减少服务器的请求次数 提高页面的加载速度
			缺点：不利于后期维护，需要合理规划

4.创建锚点

				<a name="锚点名"></a>
				<a href="#锚点名"></a>
				
				<div id="锚点名"></div>
				<a href="#锚点名"></a>

5.浏览器的发展史

6.主流浏览器

			Internet Explorer(IE)、safari、edge、Mozilla Firefox、Google Chrome、
			Opera、360、遨游

7.浏览器内核及代表作

			Trident（MSHTML）（三叉戟；三叉线；三齿鱼叉）IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器---双核
			Gecko（壁虎）代表作品Mozilla Firefox 是开源的--跨平台兼容
			Presto（ 迅速的）代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
			Webkit Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的[Safari]()浏览器使用的内核：[Chromium（Blink，V8）（开源）]

8.属性的前缀

			-webkit-：safari(苹果) chrome(谷歌)私有属性 用于移动端网页开发
			-o-：Opera(欧朋)
			-moz-:firefox（火狐）浏览器私有属性
			-ms-：ie浏览器私有属性	

9.选择器前缀法

			选择器{*属性:属性值} IE7及以下版本
			选择器{_属性:属性值} IE6及以下版本

10.注释法

			<!--[if IE xxx]>
			<![endif]-->

11.图片下方3px

			div嵌套img产生的bug
			设置div的高度
			设置img的display:block;
			设置img的vertical-align:top;

12.换行产生的3px

			不折行 把元素放在一行
			给元素加浮动

13.图片链接边框

			设置img的border:none;

14.margin重叠

			给子集加浮动
			给父级设置padding或border
			overflow:hidden; 给父级加