目录
一、定位
1、相对定位
position:relative
特点:
- 不脱标,占用自己原来位置
- 显示模式特点保持不变
- 设置边偏移,相对自己原来的位置移动
2、绝对定位
position:absolute
使用场景:子级绝对定位,父级相对定位(子绝父相)
特点:
- 脱标,不占位
- 显示模式具备行内块的特点(display:block)
- 设置边偏移,相对最近已经定位的祖先元素改变位置;若祖先元素都未定位,则相对浏览器可视区域改变位置
3、定位居中
实现步骤:
- 绝对定位
position:absolute
- 水平、垂直边偏移50%
left:50%;
right:50%;
- 子级向左、上移动自身尺寸的一半
· 方法一:左、上外边距为 -尺寸的一半
· 方法二:transform:translate(-50%,-50%)
4、固定定位
position:fixed
使用场景:元素的位置在网页滚动时不会改变
特点:
- 脱标,不占位
- 显示模式具备行内块的特点(display:block)
- 设置边偏移,相对浏览器窗口改变位置
5、堆叠层级
z-index:n(整数数字,默认为0,n越大,层级越高,显示在越上面)
默认效果:按照标签书写顺序,后来居上
作用:设置定位元素的层级顺序,改变定位元素的显示顺序、
二、CSS精灵
1、含义
把网页中一些背景图片整合到一张图片文件中,再使用background-position精确的定位出背景图片的位置。
2、优点
减少服务器被请求的次数,减轻服务器的压力,提高页面加载速度。
3、实现步骤
- 创建盒子div,div尺寸与小图尺寸相同
- 设置盒子背景background为精灵图
- 添加background-position属性,改变背景图位置
· 用PxCook测量小图标左上角图标
· 取坐标为bg-p的属性值(向 左-/上-/右+/下+ 移动)
三、字体图标
1、含义
展示的是图标,本质是字体
2、作用
在网页中添加简单的、颜色单一的小图标
3、优点
灵活性(灵活修改样式)、轻量级(体积小)、兼容性(支持所有主流浏览器)、使用方便(先下载在使用)
4、下载字体
5、使用步骤
- 引入字体样式表(iconfont.css)
- 标签使用字体图标类名
<span class="iconfont icon-xxx"><span>
· iconfont:字体图标基本样式(字体名,字体大小等)
· icon-xxx:图标对应的类名
- 如果要调整font-size,注意选择器的优先级要高于iconfont类!
- 所以要调用类选择器调整样式(.iconfont{}),如果调用标签选择器span,font-size不生效