目标：掌握定位的作用及特点；掌握 CSS 高级技巧
一、定位
作用：灵活的改变盒子在网页中的位置
实现：
1.定位模式：position
2.边偏移：设置盒子的位置
- left
- right
- top
- bottom
水平方向偏移：left、right，垂直方向偏移：top、bottom
1、相对定位
position: relative
特点：
- 不脱标，占用自己原来位置
- 显示模式特点保持不变（如：块级显示模式使用相对定位后还是块级显示模式）
- 设置边偏移则相对自己原来位置移动
div {
position: relative;
top: 100px;
left: 200px;
}
因为相对定位不脱标，即使自己发生了偏移，还占用自己原来的位置，后面的元素没办法顶上去，会留下一片空白，所以实际开发中很少单独使用相对定位，经常配合着绝对定位一起使用。
2、绝对定位
position: absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：
- 脱标，不占位
- 显示模式具备行内块特点（即使是行内元素，使用了绝对定位后，设置宽高生效）
- 设置边偏移则相对最近的，已经定位的祖先元素改变位置
- 如果祖先元素都未定位，则相对浏览器可视区改变位置
.father {
position: relative;
}
.father span {
position: absolute;
top: 0;
right: 0;
}
练习：使用绝对定位，实现图片在浏览器居中定位。
实现步骤：
- 设置元素绝对定位，没有最近的祖先元素设置定位属性，则该元素的绝对定位相对于浏览器可视窗口改变位置；
- 水平、垂直边偏移为 50%，此时图片的左上角正好在浏览器的中心位置，需要向左、向上偏移，使图片中心移动到浏览器可视窗口的中心；
- 子级向左、向上移动自身尺寸的一半。
- 量出图片尺寸，设置 margin-left: -宽度的一半，margin-top: -高度的一半。
- 使用 transform 属性，transform 是元素位置偏移，transform: translate(-50%, -50%)。
代码如下：
<head>
<style>
img {
/* 子级设置为绝对定位，没有父级，相对浏览器可视区域改变位置 */
position: absolute;
left: 50%;
top: 50%;
/* 设置 margin-left: -宽度的一半，margin-top: -高度的一半 */
/* margin-left: -265px;
margin-top: -127px; */
/* 方便：50% 就是自己宽高的一半 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<img src="./images/login.webp" alt="">
</body>
3、固定定位
position: fixed
场景：元素的位置在网页滚动时不会改变
特点：
- 脱标，不占位
- 显示模式具备行内块特点
- 设置边偏移相对浏览器窗口改变位置
- 元素的位置相对浏览器窗口，不会改变
div {
position: fixed;
top: 0;
right: 0;
background-color: blue;
width: 500px;
height: 200px
}
二、堆叠层级 z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
属性名：z-index
属性值：整数数字（默认值为0，取值越大，层级越高）
<head>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
/* 取值是整数，默认是0，取值越大显示顺序越靠上 */
z-index: 3;
}
.box2 {
background-color: skyblue;
left: 100px;
top: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
三、CSS 高级
1、精灵图
CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。
实现步骤：
- 创建盒子，盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加 background-position 属性，改变背景图位置
3.1 使用 PxCook 测量小图片左上角坐标
3.2 取负数坐标为 background-position 属性值（因为3.1量出来图片左上角的坐标，要向左、向上移动精灵图，才能使要显示的部分移动到盒子的位置）
<head>
<style>
div {
width: 112px;
height: 110px;
background-color: pink;
background-image: url(./images/abcd.jpg);
background-position: -256px -276px;
}
</style>
</head>
<body>
<div></div>
</body>
2、字体图标
字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便：先下载再使用
（1）下载字体图标
国内免费的字体图标网站：iconfont 阿里巴巴矢量图标库
流程：登录 → 寻找图标 → 加入购物车 → 购物车，添加至项目，确定 → 下载至本地
（2）使用字体图标
下载解压的文件如下：
- demo_index.html：查看字体图标，双击打开后，点击 font class 选项，复制需要使用的字体图标名称
- iconfont.css 使用时，需要通过 link 引入到 html 中的 css 文件
- ttf、woff、woff2 真正的字体文件
流程：
- 将下载好的字体图标文件全部拖到项目中；
- 在 html 中引入字体样式表 iconfont.css ；
- 标签使用字体图标类名;
- iconfont：字体图标基本样式（字体名，字体大小等等）
- icon-xxx：图标对应的类名，在 demo_index.html 中复制字体图标名称
- 如果要修改字体图标样式，至少要使用类选择器进行修改，不能使用标签选择器，因为在 iconfont.css 中已经使用了
.iconfont {}类选择器，至少要使用类选择器修改字体图标样式才能覆盖生效。
<head>
<style>
.iconfont {
font-size: 200px;
color: red;
}
/* 通过字体图标的名称作为类选择器修改样式 */
.icon-icon-test1 {
color: green;
}
/* 自定义一个类选择器，修改图标样式 */
.myClass {
font-size: 100px;
color: palevioletred;
}
</style>
</head>
<body>
<span class="iconfont icon-icon-test2"></span>
<span class="iconfont icon-icon-test1"></span>
<span class="iconfont myClass icon-icon-test3"></span>
</body>
（3）上传矢量图
作用：项目特有的图标上传到 iconfont 图标库，生成字体，再按照（2）步骤下载使用。（需要上传的图标需要是 svg 的格式）。
上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核
四、CSS 修饰属性
1、垂直对齐方式
（1）基线
在行内和行内块元素中，一行的元素默认是基线对齐，图片是行内块元素，默认也是基线对齐。
（1）当一行只有图片一个元素时，图片底部为什么会有留白。
（2）当一行有图片和文字时，图片和文字为什么没有居中对齐。
通过这个图，可以很清楚的了解到为什么会出现（1）（2）问题，因为浏览器在处理行内、行内块元素时，会使用基线对齐的方式，图片的底部和文字的基线对齐，这就是为什么会出现（2）问题。图片的底部为什么会留白，因为有的字母下面会超过基线，比如图片中的p字母，所以浏览器会给基线下面留出一些空白间距，图片是行内块元素，所以浏览器也会给图片下面流出一些空白间距。
（2）对齐方式
属性名：vertical-align
| 属性值 | 效果 |
|---|---|
| baseline | 基线对齐（默认） |
| top | 顶部对齐 |
| middel | 居中对齐 |
| bottom | 底部对齐 |
<head>
<style>
div {
border: 1px solid #000;
}
img {
/* 居中对齐 */
vertical-align: middle;
/* 顶对齐：最高内容的顶部 */
/* vertical-align: top; */
/* 底对齐：最高内容的底部 */
/* vertical-align: bottom; */
/* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
/* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
/* display: inline-block; */
}
</style>
</head>
<body>
<div>
<img src="./images/1.webp" alt="">
<span>我是谁？我在哪？</span>
</div>
</body>
居中对齐属性要添加到比较大的元素身上。
只要不是默认的基线对齐方式，图片的底部就没有留白，bottom 对齐方式，图片底部也没有留白。
如果一行只有图片这一个元素，可以给图片转换显示模式：display: block; 也可以去除底部留白。
2、过渡
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费时间 (秒)
提示：
- 过渡的属性可以是具体的 CSS 属性
- 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
- transition 设置给元素本身
<head>
<style>
img {
width: 200px;
height: 150px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<img src="./images/huawei.jpg" alt="">
</body>
3、透明度 opacity
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0 – 1
- 0：完全透明（元素不可见）
- 1：不透明
- 0-1之间小数：半透明
4、光标类型cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
只是改变了鼠标的样式，具体效果还需要配合 js 来实现。
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
