(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）
目录
定位
相对定位
绝对定位
定位居中
<!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: -265px;
margin-top: -127px;
}
</style>
</head>
<body>
<img src="./images/login.webp" alt="">
</body>
</html>固定定位
堆叠层级 z-index
定位-总结
高级技巧
CSS 精灵
<!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-image: url(./images/abcd.jpg);
/* 在图片中找到n的位置并输出 */
background-position: -256px -276px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>字体图标
字体图标 – 下载字体
字体图标 – 使用字体
CSS 修饰属性
垂直对齐方式 vertical-align
<!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;
}
img
{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="./images/1.webp" alt="">
嘿嘿嘿,猫猫可爱吗？
</div>
</body>
</html>
