目录
一、定位
作用:灵活的改变盒子在网页中的位置
实现:
- 定位模式:position
- 边偏移:设置盒子的位置 :left 、right 、 top 、 bottom
1. 相对定位(position: relative)
特点:
- 不脱标,占用自己原来位置
- 显示模式特点保持不变
- 设置边偏移则相对自己原来位置移动
拓展:很少单独使用相对定位,一般是与其他定位方式配合使用
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
position: relative;
top: 80px;
}
</style>
</head>
<body>
<p>猫(拉丁学名:Felis silvestris
catus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<div><img src="./dog.png" alt=""></div>
<p>猫(拉丁学名:Felis silvestris
catus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
</body>
</html>
网页运行结果:
2. 绝对定位(position: absolute)
使用场景:子级绝对定位,父级相对定位(子绝父相)
特点:
- 脱标,不占位
- 显示模式具备行内块特点
- 设置边偏移则相对最近的已经定位的祖先元素改变位置
- 如果祖先元素都未定位,则相对浏览器可视区改变位置
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
img {
width: 400px;
}
.news {
position: relative;
margin: 100px auto;
width: 400px;
height: 350px;
background-color: #f8f8f8;
}
.news span {
position: absolute;
top: 0;
right: 0;
display: block;
width: 92px;
height: 32px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
line-height: 32px;
color: #fff;
}
</style>
</head>
<body>
<div class="news">
<img src="./chang.webp" alt="">
<span>展会活动</span>
<h4>2022世界移动大会</h4>
</div>
</body>
</html>
网页运行结果:
3. 定位居中(transform: translate)
实现步骤:
- 绝对定位
- 水平、垂直边偏移为 50%
- 子级向左、上移动自身尺寸的一半
- 左、上的外边距为 –尺寸的一半
- transform: translate(-50%, -50%)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<img src="./dog.png" alt="">
</body>
</html>
网页运行结果:
4. 固定定位(position: fixed)
场景:元素的位置在网页滚动时不会改变
特点:
- 脱标,不占位
- 显示模式具备行内块特点
- 设置边偏移相对浏览器窗口改变位置
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: fixed;
;
}
</style>
</head>
<body>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<div><img src="./dog.png" alt=""></div>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
<p>猫(拉丁学名:Felis
silvestriscatus),是食肉目猫科猫属的脊索动物。猫体型小,体色由蓝灰色到棕黄色,体型瘦削,身长0.3-0.5米,全身毛被密而柔软,锁骨小,吻部短,眼睛圆,颈部粗壮,四肢较短,足下有数个球形肉垫;舌面被有角质层的丝状钩形乳突。
</p>
</body>
</html>
网页运行结果:
5. 堆叠层级 (z-inde)
默认效果:按照标签书写顺序,后来者居上
作用:设置定位元素的层级顺序,改变定位元素的显示顺序
属性名:z-index
属性值:整数数字(默认值为0,取值越大,层级越高)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
z-index: 1;
}
.box2 {
background-color: skyblue;
left: 100px;
top: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
网页运行结果:
6. 总结
二、高级技巧
1. CSS 精灵
CSS 精灵,也叫 CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再 background-position 精确的定位出背景图片的位置
优点:减少服务器被请求次数,减轻服务器的压力,提高页面加载速度
实现步骤:
- 创建盒子,盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加 background-position 属性,改变背景图位置
- 3.1 使用 PxCook 测量小图片左上角坐标
- 3.2 取负数坐标为 background-position 属性值(向左上移动图片位置)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 112px;
height: 110px;
background-color: pink;
background-image: url(./aowu.jpg);
background-position: -210px -230px;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
网页运行结果:
2. 案例
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.service {
margin: 100px auto;
width: 1190px;
height: 110px;
/* background-color: pink; */
}
ul {
display: flex;
}
li {
display: flex;
padding-left: 10px;
width: 297px;
height: 110px;
background-color: skyblue;
}
h5 {
margin-right: 10px;
width: 110px;
height: 110px;
background-image: url(./aowu.jpg);
background-position: -210px -230px;
border-radius: 50%;
}
p {
font-size: 18px;
color: #444;
font-weight: 700;
line-height: 100px;
}
li:nth-child(2) h5 {
background-position: -620px -300px;
}
li:nth-child(3) h5 {
background-position: -950px -330px;
}
li:nth-child(4) h5 {
background-position: -670px 0;
}
</style>
</head>
<body>
<div class="service">
<ul>
<li>
<h5>1</h5>
<p>品类齐全,轻松购物</p>
</li>
<li>
<h5>2</h5>
<p>多仓直发,极速配送</p>
</li>
<li>
<h5>3</h5>
<p>正品行货,精致服务</p>
</li>
<li>
<h5>4</h5>
<p>天天低价,畅选无忧</p>
</li>
</ul>
</div>
</body>
</html>
网页运行结果:
3. 字体图标
字体图标:展示的是图标,本质是字体
作用:在网页中添加简单的、颜色单一的小图标
优点:
- 灵活性:灵活地修改样式,例如:尺寸、颜色等
- 轻量级:体积小、渲染快、降低服务器请求次数
- 兼容性:几乎兼容所有主流浏览器
- 使用方便:先下载再使用
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.iconfont {
font-size: 200px;
color: red;
}
</style>
</head>
<body>
<div class="iconfont icon-icon-test2"></div>
</body>
</html>
网页运行结果:
4. 字体图标 – 下载字体
iconfont 图标库:iconfont-阿里巴巴矢量图标库
下载字体:登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标,加入购物车 → 购物车,添加至项目,确定 → 下载至本地
5. 字体图标 – 使用字体
引入字体样式表(iconfont.css)
标签使用字体图标类名
- iconfont:字体图标基本样式(字体名,字体大小等等)
- icon-xxx:图标对应的类名
6. 字体图标 – 上传矢量图
作用:项目特有的图标上传到 iconfont 图标库,生成字体
上传步骤:上传 → 上传图标 → 选择 svg 矢量图,打开 → 提交 → 系统审
三、CSS 修饰属性
1. 垂直对齐方式 vertical-align
属性名:vertical-align
默认是基线对齐,就会出现文字偏下,图片偏上,加入属性就能对齐
属性值 | 效果 |
---|---|
baseline | 基准对齐(默认) |
top | 顶部对齐 |
middle | 居中对齐 |
bottom | 底部对齐 |
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid #000;
}
img {
/* vertical-align: top; */
/* vertical-align: bottom; */
/* vertical-align: baseline; */
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="./cat.png" alt="">
我是谁?我在哪?
</div>
</body>
</html>
网页运行结果:
2. 过渡 transition
作用:可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名:transition(复合属性)
属性值:过渡的属性 花费时间 (s)
提示:
- 过渡的属性可以是具体的 CSS 属性
- 也可以为 all(两个状态属性值不同的所有属性,都产生过渡效果)
- transition 设置给元素本身
使用方法:
img {
width: 200px;
height: 200px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
}
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
height: 200px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div>
<img src="./cat.png" alt="">
我是谁?我在哪?
</div>
</body>
</html>
网页运行结果:
3. 透明度 opacity
作用:设置整个元素的透明度(包含背景和内容)
属性名:opacity
属性值:0 – 1
- 0:完全透明(元素不可见)
- 1:不透明
- 0-1之间小数:半透明
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
background-color: orange;
opacity: 0.5;
}
</style>
</head>
<body>
<div><img src="./cat.png" alt=""></div>
</body>
</html>
网页运行结果:
4. 光标类型 cursor
作用:鼠标悬停在元素上时指针显示样式
属性名:cursor
属性值 | 效果 |
---|---|
default | 默认值,通常是箭头 |
pointer | 小手类型,提示用户可以点击 |
text | 工字型,提示用户可以选择文字 |
move | 十字光标,提示用户可以移动 |
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* cursor: pointer; */
/* cursor: text; */
cursor: move;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
网页运行结果:
四、综合案例-轮播图
技术点:
- 定位
- 字体图标
- Flex 布局
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.banner {
position: relative;
margin: 100px auto;
width: 472px;
height: 315px;
/* background-color: pink; */
overflow: hidden;
}
img {
height: 315px;
/* padding-left: 50px; */
border-radius: 12px;
vertical-align: middle;
}
ul {
display: flex;
}
.banner .prev,
.banner .next {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
text-decoration: none;
line-height: 30px;
}
.banner:hover .prev,
.banner:hover .next {
display: block;
}
.prev {
left: 0;
border-radius: 0 15px 15px 0;
}
.next {
right: 0;
border-radius: 15px 0 0 15px;
text-align: center;
}
.banner ol {
display: flex;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
height: 13px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
.banner ol li {
margin: 3px;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.banner ol .active {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="banner">
<!-- 图 -->
<ul>
<li><a href="#"><img src="./bgc.jpg" alt=""></a></li>
<li><a href="#"><img src="./bgc.jpg" alt=""></a></li>
<li><a href="#"><img src="./bgc.jpg" alt=""></a></li>
</ul>
<!-- 箭头 -->
<a href="#" class="prev">
<i class="iconfont icon-icon-test4"></i>
</a>
<a href="#" class="next">
<i class="iconfont icon-icon-test5"></i>
</a>
<!-- 圆点 -->
<ol>
<li></li>
<li class="active"></li>
<li></li>
</ol>
</div>
</body>
</html>
网页运行效果: