1.定位
定位
作用:灵活的改变盒子在网页中的位置
实现:
1.定位模式:position
2.边偏移∶设置盒子的位置
- left
- right
- top
- bottom
1.1相对定位
相对于原先位置的定位
相对定位
position: relative
特点
:one:改变位置的参照物是自己原来的位置
:two:不脱标,占位
:three:标签显示模式特点不变
1.2 绝对定位
子集使用绝对定位,父级使用相对定位
子集悬浮在父亲的内容.用绝对定位,固定的显示
position: absolute
使用场景:子级绝对定位,父级相对定位(子绝父相)
特点
:one:脱标,不占位
:two:参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位,参照浏览器可视区改位置
:three:显示模式特点改变:宽高生效(具备了行内块的特点)
1.3定位居中
实现步骤:
1.绝对定位
2.水平、垂直边偏移为50%
3.子级向左、上移动自身尺寸的一半
- 左、上的外边距为-尺寸的一半
- transform: translate(-50%, -50%)
1.4 固定定位
元素的位置在网页滚动时不会改变
position: fixed
特点
:one:脱标,不占位
:two:参照物:参照物:浏览器窗口
:three:显示模式特点具备行内块特点
1.5 堆叠层级z-index
图片之间有重叠的部分,z-index能决定哪张图片在上面能压住哪张图片
默认效果:按照标签书写顺序,后来者居上
作用:设置定位元素的层级顺序,改变定位元素的显示顺序
z-index: 1
取值是整数,默认是e,取值越大显示顺序越靠上;
2.CSS精灵
CSS精灵,也叫CSS Sprites
,是一种网页图片
应用处理方式。把网页中一些背景图片整合到一张图片文件中,再background-position精确的定位出背景图片的位置。
优点:减少服务器被请求次数,减轻服务器的压力,提高页面加载速度
实现步骤:
1.创建盒子,盒子尺寸与小图尺寸相同
2.设置盒子背景图为精灵图
3.添加background-position 属性,改变背景图位置
- 使用 Pxcook测量小圈片左上角坐标
- 取负数坐标为background-position属性值(向左上移动图片位置)
代码举例
<style>div {
width: 112px;
height: 110px;
background-color:pink;
background-image: uri(./images/abcd.jpg);
background-position: -256px -276px;
}
</style>
3. 字体图标
字体图标:展示的是图标
,本质是字体
作用:在网页中添加简单的
、颜色单一
的小图标
优点
- 灵活性:灵活地修改样式,例如:尺寸、颜色等
- 轻量级:体积小、渲染快、降低服务器请求次数
- 兼容性:几乎兼容所有主流浏览器
- 使用方便:先下载再使用
3.1 字体图标-下载字体
- iconfont图标库: https://www.iconfont.cn/
- 下载字体
登录→素材库→官方图标库→进入图标库→选图标,加入购物车→购物车,添加至项目,确定→下载至本地
3.2 使用步骤
:one:引入字体样式表(iconfont.css)
link上字体样式表
:two:标签使用字体图标类名
<span class="iconfont icon-xxx"></span>
代码样例
<link rel="stylesheet" href="./iconfont/iconfont.css">
<span class="iconfont icon-icon-test3"></span>
注意:
类名在下载文件中的index.html文件中找到 能用.iconfont找到并修改图标大小,但是不能用上面如span标签修改,因为iconfont有默认的font-size |
4.CSS部分高级技巧
4.1 过渡 transiton
作用:可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名: transition(复合属性)
属性值:过渡的属性花费时间(s)
提示:
- 过渡的属性可以是具体的CSS属性
- 也可以为all (两个状态属性值不同的所有属性,都产生过渡效果)
- transition设置给元素本身
img {
width: 200px;height: 208px;
transition: all 1s;
}
img:hover{width: 500px;height: 500px;}
4.2 透明度opacity
作用:设置整个元素的透明度(包含背景和内容)
属性名: opacity
属性值:0-1
- 0:完全透明(元素不可见).
- 1:不透明
- 0-1之间小数:半透明
4.3 光标类型cursor
属性名: cursor
属性值
补充知识点 垂直对齐方式vertical-align
属性名: vertical-align
属性值