web前端零基础入门
本章节需要重点掌握相对定位和绝对定位的使用！
69. 相对定位
大规模布局使用浮动，微调的地方使用定位
定位（position）：
定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值：
static：默认值，元素是静止，没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky：开启元素的粘滞定位
相对定位：当元素的position设置为relative时开启了元素的相对定位
特点：1.元素开启相对定位后，如果不设置偏移量，元素不会发生任何变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质（块元素还是行内元素）
偏移量（offset）：当元素开启了定位以后，可以通过偏移量来设置元素的位置
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下只会使用其中一个
top越大，定位元素越向下移动
bottom越大，定位元素越向上移动
left：定位元素和定位位置左侧距离
right：定位元素和定位位置右侧距离
定位元素水平方向的位置由left和right两个属性来控制
通常情况下只会使用其中一个
left越大，定位元素越向右移动
right越大，定位元素越向左移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 200px;
top: -200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
70. 绝对定位
绝对定位：当元素的position属性值设置为absolute时，则开启了元素的绝对定位
特点：1.开启绝对定位，如果不设置偏移量，元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内元素变成块元素，块元素高度由内容撑开
4.绝对定位会使元素提升一个层级
5.绝对元素是相对于其它包含块进行定位的
包含块（containing block）：
正常情况下包含块就是离当前元素最近的祖先块元素
开启绝对定位的包含块是离它最近的开启了定位的祖先元素，如果所有祖先都没开启定位则根元素就是它的包含块（html：根元素、初始包含块）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 400px;
height: 400px;
background-color: greenyellow;
position: relative;
}
.box5{
width: 300px;
height: 300px;
background-color: gold;
position: relative;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">4
<div class="box5">5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>
71. 固定定位
固定定位：将元素的position属性设置为fixed，则开启了元素的固定定位
固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样
唯一不一样的固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 2000px;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
top: 400px;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div class="box1">fixed</div>
<div class="box2">absolute</div>
</body>
</html>
72. 粘滞定位
粘滞定位：当元素的position属性设置为sticky时，则开启了元素的粘滞定位
粘滞定位和相对定位特点基本一样
不同的是粘滞定位可以在元素达到某个位置时将其固定不动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 2000px;
}
.box2{
width: 400px;
height: 400px;
background-color: aqua;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
position: sticky;
top: 100px;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box1">sticky</div>
</body>
</html>
73. 绝对定位元素的位置
绝对定位一般和相对定位一起搭配使用，而粘滞定位因为兼容性问题使用较少
元素开启了绝对定位之后：水平布局公式必须满足
包含块内容区的宽度 = left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right
发生过度约束时：
如果9个值中没有auto，则会自动调整right的值使等式成立
如果有auto的值，则会调整auto的值以使等式成立
可以设置为auto的值：margin width left right
left和right的值默认为auto，如果不指定left和right的值，则会调整这两个值
元素开启了绝对定位之后：垂直布局公式必须满足
包含块内容区的高度 = top + margin-top + border-top + padding-top + width + padding-bottom + border-bottom + margin-bottom + bottom
发生过度约束时：
如果9个值中没有auto，则会自动调整bottom的值使等式成立
如果有auto的值，则会调整auto的值以使等式成立
top和bottom的值默认为auto，如果不指定top和bottom的值，则会调整这两个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
background-color: aquamarine;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
74. 元素的层级
对于开启了定位元素，可以使用z-index属性来指定元素的层级，其值越大层级越高，元素越优先显示
祖先元素的层级再高也不会覆盖后代元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
}
.box2{
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, .3);
position: absolute;
top: 50px;
left: 50px;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 100px;
left: 100px;
z-index: 99;
}
.box4{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
<div class="box4">4</div>
</div>
</body>
</html>
75. 轮播图练习
图片全部摞在一起，通过修改元素的层级实现轮播图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../fontawesome-free-6.2.0-web/css/all.css">
<link rel="stylesheet" href="../resetstylesheet/reset.css">
<style>
.outer{
margin: 50px auto;
width: 400px;
height: 300px;
position: relative;
}
.inner{
height: 100%;
position: absolute;
}
.dot{
z-index: 1;
position: absolute;
color: rgb(134, 131, 131);
bottom: 20px;
left: 30px;
}
.dot a{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 2px;
background-color: rgba(255, 254, 253, 0.7);
background-clip: content-box; /* 将背景颜色值设置到内容区，边框和内边距不再有背景颜色 */
border: 2px solid transparent;
}
.dot a.activate,.dot a:hover{
background-color: aliceblue;
border: 2px solid rgba(255, 254, 253, 0.7);
}
div.left{
position: absolute;
z-index: 1;
top: 150px;
left: 3px;
font-size: 5px;
color: aliceblue;
}
div.right{
position: absolute;
z-index: 1;
top: 150px;
left: 390px;
font-size: 5px;
color: aliceblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<a href="javascript:;">
<img src="../img/1.gif">
</a>
</div>
<div class="inner">
<a href="javascript:;">
<img src="../img/2.gif">
</a>
</div>
<div class="inner">
<a href="javascript:;">
<img src="../img/3.gif">
</a>
</div>
<div class="inner">
<a href="javascript:;">
<img src="../img/4.gif">
</a>
</div>
<div class="inner">
<a href="javascript:;">
<img src="../img/5.gif">
</a>
</div>
<div class="inner">
<a href="javascript:;">
<img src="../img/6.gif">
</a>
</div>
<div class="dot">
<a class="activate" href="javascript:;">
<a href="javascript:;">
<a href="javascript:;">
<a href="javascript:;">
<a href="javascript:;">
<a href="javascript:;">
</div>
<div class="left">
<i class="fas fa-angle-left"></i>
</div>
<div class="right">
<i class="fas fa-angle-right"></i>
</div>
</div>
</body>
</html>
76. 字体族
字体相关的样式：
color：用来设置字体颜色
font-size：字体的大小
单位em：相当于当前元素的一个font-size
单位rem：相当于根元素的一个font-size
font-family：字体族（字体的格式）
可选值：serif（衬线字体） sans-serif（非衬线字体） monospace（等宽字体）
指定字体的类别，浏览器会自动使用该类别下的字体
可以同时指定多个字体，使用逗号隔开，按顺序优先使用
在style里使用font-face将服务器中字体提供给用户去使用
例如：@font-face{
font-family：’myfont’;
src：url(xxx);
}
问题：加载速度问题、版权问题、字体格式问题(一般ttf兼容还不错)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: myfont;
src: url("./numerous.ttf") format("turetype");
}
p{
color: gold;
font-size: 20px;
font-family: myfont;
}
div{
color: aqua;
font-size: 20px;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<p>今天天气真不错啊! Hello world</p>
<div>今天星期一!</div>
</body>
</html>
77. 图标字体简介
字体为矢量图，放大不会失真
在页面中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时可以将图标设置为字体，然后通过font-face的形式对字体进行引入
国外比较流行的图标字体库font-awesome
1.下载地址https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
使用：直接通过类名来使用图标字体，使用fas或fab，参考说明书
例如：class="fas fa-bell"，<i class="fab fa-accessible-icon"></i>
【注意】使用版权问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../fontawesome-free-6.2.0-web/css/all.css">
<style>
i{
font-size: 500px;
color: gold;
}
</style>
</head>
<body>
<i class="fas fa-bell"></i>
<i class="fab fa-accessible-icon"></i>
</body>
</html>
【注意】图标字体是单色的，彩色就用图片
78. 图标字体其它使用方式
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式
fab：fab：fab-family：‘Font Awesome 5 Brands’;
fas：fas：font-family：’Font Awesome 5 Free’
通过实体来设置图标字体
&#x图标的编码;
例如： <span class="fas"></span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../fontawesome-free-6.2.0-web/css/all.css">
<style>
li{
list-style: none;
}
li::before{
content: '\f164';
font-family: 'Font Awesome 5 Free';
color: red;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>今天星期一</li>
<li>今天星期三</li>
<li>今天星期五</li>
<li>今天星期天</li>
<span class="fas"></span>
</ul>
</body>
</html>
79. iconfont
很漂亮，但版权问题不清晰，商用时需要注意
1.地址https://www.iconfont.cn/
2. 把需要图标加入购物车，添加为项目，下载完解压
3.移动项目文件中，引用iconfont.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../font/font_3756984_vuy48tymz1/iconfont.css">
<style>
i.iconfont{
font-size: 100px;
}
p::before{
content: '\f167';
font-family: 'iconfont';
font-size: 100px;
}
</style>
</head>
<body>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont icon-tu"></i>
<p></p>
</body>
</html>
下一章节将对文本进行介绍并对导航条进行练习！
扫一扫
1989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
