【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧

文章目录

1.定位
- 1.1相对定位
- [1.2 绝对定位](#1.2 绝对定位)
- 1.3定位居中
- [1.4 固定定位](#1.4 固定定位)
- [1.5 堆叠层级z-index](#1.5 堆叠层级z-index)
2.CSS精灵
[3. 字体图标](#3. 字体图标)
- [3.1 字体图标-下载字体](#3.1 字体图标-下载字体)
- [3.2 使用步骤](#3.2 使用步骤)
4.CSS部分高级技巧
- [4.1 过渡 transiton](#4.1 过渡 transiton)
- [4.2 透明度opacity](#4.2 透明度opacity)
- [4.3 光标类型cursor](#4.3 光标类型cursor)
- [补充知识点垂直对齐方式vertical-align](#补充知识点垂直对齐方式vertical-align)

1.定位

定位

作用:灵活的改变盒子在网页中的位置

实现:

1．定位模式:position

2．边偏移∶设置盒子的位置

left
right
top
bottom

1.1相对定位

相对于原先位置的定位

相对定位

position: relative

特点

1️⃣改变位置的参照物是自己原来的位置

2️⃣不脱标,占位

3️⃣标签显示模式特点不变

1.2 绝对定位

子集使用绝对定位,父级使用相对定位

子集悬浮在父亲的内容.用绝对定位,固定的显示

position: absolute

使用场景:子级绝对定位，父级相对定位（子绝父相)

特点

1️⃣脱标,不占位

2️⃣参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位，参照浏览器可视区改位置

3️⃣显示模式特点改变:宽高生效（具备了行内块的特点)

1.3定位居中

实现步骤:

1．绝对定位

2．水平、垂直边偏移为50%

3．子级向左、上移动自身尺寸的一半

左、上的外边距为-尺寸的一半
transform: translate(-50%, -50%)

1.4 固定定位

元素的位置在网页滚动时不会改变

position: fixed

特点

1️⃣脱标,不占位

2️⃣参照物:参照物:浏览器窗口

3️⃣显示模式特点具备行内块特点

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属性值（向左上移动图片位置)

代码举例

html 复制代码

<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 使用步骤

1️⃣引入字体样式表（iconfont.css)

link上字体样式表

2️⃣标签使用字体图标类名

html 复制代码

<span class="iconfont icon-xxx"></span>

代码样例

html 复制代码

<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设置给元素本身

html 复制代码

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

属性值

属性值	效果
default	默认值,通常是箭头
pointer	小手效果,提示用户可以点击
text	工字型,提示用户可以选择文字
move	十字光标,提示用户可以移动

补充知识点垂直对齐方式vertical-align

属性名: vertical-align

属性值

属性值	效果
baseline	基线对齐(默认)
top	顶部对齐
middle	居中对齐
bottom	底部对齐

【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧

文章目录

1.定位

1.1相对定位

1.2 绝对定位

1.3定位居中

1.4 固定定位

1.5 堆叠层级z-index

2.CSS精灵

3. 字体图标

3.1 字体图标-下载字体

3.2 使用步骤

4.CSS部分高级技巧

4.1 过渡 transiton

4.2 透明度opacity

4.3 光标类型cursor

补充知识点 垂直对齐方式vertical-align

补充知识点垂直对齐方式vertical-align