Day10-CSS

图片整合，精灵图，雪碧图:

什么是图片整合：
	1.把小的图片整合到一个大的图片上
为什么要图片整合：
	优点：
		较少对服务器的请求次数
		减少图片的内存
		增加页面的加载速度
	缺点：
		整合过程麻烦
		使用过程中适应性较差
		定位繁琐
		可维护性差
	怎么使用图片整合：
		通过background-position实现背景图定位技术
制作图片整合原则：
	1.边切图边整合
	2.单张图片的大大小不能超过200K
	3.小图标周围留有足够的空间
	4.背景透明，格式是.png/.gif
	5.避免使用right和bottom，使用具体数值
	6.为了方便计算把图的位置整合为整数倍
	7.分类整合

PS填充前景色：ALT+del
PS填充背景色：CTRL+del

定位：

什么是定位：
	指定一个元素在网页上的位置
定位作用：
	实现层叠布局；
	让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置；
定位属性：position:;
	定位的属性值：
		无特殊定位static
		相对定位 relative
		绝对定位 absolute
		固定定位 fixed
		粘性定位 sticky

定位的偏移量：

设置元素定位的偏移量：
	left:value;
	right:value;
	top:value;
	bottom:value;
说明：
	1.属性值数值型，px/%
	2.必须结合定位属性去使用，单独使用无效
	3.top和bottom同时使用优先识别top
	4.left和right同时使用优先识别left
	5.特殊情况下，top，bottom，left，right可以同时生效

设置定位元素的层级属性

设置定位元素的层级属性：z-index:;
	number 数值不加单位，默认值为0；值越大层级越高，支持负值；
	auto 默认值0
说明：
	1.默认是，定位元素的层级根据html书写顺序显示，先写层级低，后写层级高；
	2.必须配合定位属性使用，单独使用无效；

定位的属性值：

1.无特殊定位：static
	说明：
		没有定位效果，可以用来取消定位，标准流内显示
2.相对定位：relative
	说明：
		1.会发生层级变化
		2.相对元素原来的位置进行偏移
		3.相对定位元素不脱离文档流，原本位置保留，不影响页面布局，只是层级发生变化
	作用：
		1.想让元素相对自身所在位置发生偏移的时候
		2.给绝对定位元素定义包含块
3.绝对定位：absolute
	说明：
		1.绝对定位对margin属性失效
		2.绝对定位元素会脱离文档流，在文档流的位置不保留，后面的元素会把位置补上
		3.没有添加偏移量的时候，绝对定位元素在当前位置不动，但是会脱离文档流，发生层级变化
		6.默认情况下，添加偏移量之后，可视窗口的第一屏是一个大的包含块
		7.自定义包含块：
			必须是绝对定位元素的祖先级元素(优选父元素)
			祖先级元素必须要有定位属性:relative(推荐使用)、fixed、absolute
		8.多个祖先级元素都具有定位属性时，该元素相对离自己最近的祖先级元素进行定位
		9.绝对定位会跟随滚动条滚动

		width:max-content /** 根据最大内容显示 **/

3.固定定位：fixed
	特点：
		1.脱离文档流，位置不保留，后面的元素把位置补上
		2.没有添加偏移量的时候，在当前位置不动
		3.只对margin：auto；失效，对数值不失效
		4.参照物始终是可视窗口，不跟随滚动条滚动
	实现元素水平垂直居中的方法：
		方法一：
			position:fixed;
			top:50%;
			left:50%;
			margin-top:-(height/2)px;
			margin-left:-(width/2)px;
		方法二：
			特殊情况1
				position:fixed;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin:auto;
			特殊情况2：
			绝对定位和固定定位可以设置元素的大小

			特殊情况3:实现自适应两栏布局

	固定定位和绝对定位的特点：
		1.参照物不同：
			固定定位的参照物是可视窗口
			绝对定位的参照物是包含块，默认时是可视窗口的第一屏
		2.是否跟随滚动条滚动：
			固定定位不跟随滚动条滚动
			绝对定位跟随滚动条滚动

4.粘性定位：sticky
	C3新增的定位模式
	特点：
		1.在可视窗口范围内时，显示的是无定位的效果，超出屏幕窗口的时候显示为固定定位的效果