字体图标:
定义:展示的是图标,本质是字体。
作用:再网页中添加简单的,颜色单一的小图标。
优点:
- 灵活性:灵活地修改样式,例如:尺寸,颜色等
- 轻量级:体积小,渲染快,降低服务器请求次数
- 兼容性:几乎兼容所有主流浏览器
- 使用方便:先下载,再使用
使用方法:
- 浏览器搜索“字体图标”,找到 iconfont-阿里巴巴矢量图标库
- 进入图标库,素材库,找到官方图标库(免费)
- 找到需要的图标,建议先一并添加入库(购物车图标),再统一下载。
- 没有项目可以新建一个,在项目中下载到本地,然后解压
- 然后添加到VScode中。
- 在需要用字体图标的html中用link标签引入iconfont.css地址
- 在需要用的地方新添加一个span标签,类名起“iconfont 字体图标类名”
- 设置好其相关属性后就可以用了
定位:
定位分有:
- 相对定位 relative
- 绝对定位 absolute
- 固定定位 flexed
- 粘性定位 sticky
- 静态定位 static(默认)
相对定位(position: relative;):
不脱(离)标(准流),即占位置,可相对原位置移动。
例如:top: 10p;表示图的顶部(以图为例)在原图的顶部下方10px处
绝对定位(position: absolute;):
1.脱标,不占位
2.参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位,参照浏览器的可视区改位置
3.绝对定位的显示模式特点改变:宽高生效(具备了行内块的特点)
使用场景:子级绝对定位,父级相对定位(子绝父相)或定位居中
定位居中:
1.绝对定位
2.水平,垂直边偏移为50%
3.子级向左上移动自身尺寸的一半(左,上的外边距为“-尺寸的一半”//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>
body {
background-color: skyblue;
}
img {
position: absolute;
left: 50%;
top: 50%;
/* transform: translate(水平,垂直); */
transform: translate(-50%,-50%);
/* margin-left: -250px;
margin-top: -148.59px; */
width: 500px;
}
</style>
</head>
<body>
<!--
1.绝对定位
2.水平,垂直边偏移为50%
3.子级向左上移动自身尺寸的一半(左,上的外边距为“-尺寸的一半”//transform:translate(-50%,-50%)
-->
<img src="../原神启动.png" alt="">
</body>
</html>
效果:
固定定位(position: flexed;):
1.脱标,不占位
2.参照物是浏览器窗口
3.显示模式特点具备行内块的特点
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;
}
/*
1.脱标,不占位
2.参照物是浏览器窗口
3.显示模式特点具备行内块的特点
*/
div {
position: fixed;
top: 0;
/* left: 0; */
right: 0;
width: 500px;
}
</style>
</head>
<body>
<h3>固定定位</h3>
<!-- position:fixed;当元素的位置在网页上滚动时不会改变 -->
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
<div><img src="../早柚.gif" alt=""></div>
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
<p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
</body>
</html>
效果:
粘性定位(position: sticky;):
粘性定位:相当于是相对定位和固定定位的结合体,默认是相对定位,只要left,right,bottom,top任意一个属性达到满足条件,就自动转换成固定定位
注意事项:
1、sticky元素必须要做父元素中
2、父元素的高度大于设置粘性定位元素的高度
3、父元素不能设置overflow
4、必须设置一个top,right,left,bottom(不设置则一直处于相对定位)
具体理解请看:菜鸟教程在线编辑器 (runoob.com)
平面转换(transform):
作用:为元素添加动态效果,一般与过渡(transition)配合使用
概念:改变盒子在平面内的形态(位移,旋转,缩放,倾斜)又称为2D转换
位移(translate):
translate()只写一个值时,表示x轴
translateX()和translateY()单独设置X与Y
取值:像素,百分比(参照盒子自身尺寸计算结果),正负均可
代码如下:
<!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>
.father {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son{
width: 200px;
height: 100px;
background-color: pink;
transition: all 0.5s;
}
/* 鼠标移入父盒子,son移动位置 */
.father:hover .son {
transform: translate(200px,100px);
/* 百分比参照盒子自身的尺寸计算 */
transform: translate(50%,100%);
/* transform: translate(-50%,100%); */
/* transform: translateX(100px); */
/* transform: translateY(200px); */
}
</style>
</head>
<body>
<p>属性:transform: translate(x正左,y正下)</p>
<p>取值:像素,百分比(参照盒子自身尺寸计算结果),正负均可</p>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
旋转:
旋转:rotate:
单位:deg
取正,顺时针旋转
取负,逆时针旋转
代码:
<!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;
transition: all 2s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="../早柚.gif" alt="">
</body>
</html>
改变旋转中心:
transform-origin:水平原点位置 垂直原点位置;
默认下:转换中心是盒子中心点
取值:
方位名词:left top right bottom center
像素单位值
百分比
多重转换:
先平移在旋转
transform: translate() rotate();
旋转会改变坐标轴。 多重转换以第一重转换形态的坐标为准 。 不能拆开写,属性会被重叠 。
代码:
<!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>
.f {
width: 1000px;
height: 200px;
border: 1px solid #000;
}
.f img {
width: 200px;
transition: all 2s;
}
.f:hover img {
transform: translate(800px) rotate(360deg);
/* 旋转会改变坐标轴向 */
/* 多重转换以第一重转换形态的坐标为准 */
/* 不能拆开写,属性会被重叠 */
/* transform: rotate(360deg) translate(800px); */
}
</style>
</head>
<body>
<div class="f"><img src="../右箭头.png" alt=""></div>
</body>
</html>
缩放:
缩放:scale:
transform: scale(X,Y);
通常,scale只有一个值,表示x与y等比例缩放
大于1放大,小于1缩小(大于0),小于0倒像
倾斜:
倾斜:skew:
transform: skew();
角度度数deg
正逆时针,负顺时针
渐变:
分为:
线性渐变:上到下,左到右
径向渐变:中心到四周
线性渐变:
blackground-imge: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
·············
);
透明颜色:transparent变化的结果,一般用于设置盒子背景
渐变方向(可选):
to 方位名词(默认to 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 {
width: 200px;
height: 200px;
background-color: green;
/* 方向: */
background-image: linear-gradient(
to right,
red,
green
);
background-image: linear-gradient(
45deg,
red,
green
);
/* 终点: */
background-image: linear-gradient(
red 80%,
green
);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果:
径向渐变:
blackground-imge: radial-gradient(
半径 at 圆心水平位置 圆心垂直位置,
颜色1 终点位置,
颜色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>
div {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(
50px at center center,
red,
pink
);
background-image: radial-gradient(
50px 20px at center center,
red,
pink
);
}
button {
width: 100px;
height: 40px;
background-color: green;
border: 0;
border-radius: 5px;
color: #fff;
background-image: radial-gradient(
30px at 30px 20px,
rgba(255,255,255,0.2),
transparent
);
}
</style>
</head>
<body>
<div></div>
<button>按钮</button>
</body>
</html>
效果: