一、#定位
1、相对定位
- 相对定位：position:relative;
- 相对于元素本身的位置发生移动；如果设置边偏移量，对元素没有任何影响
1、>特点：
- 相对于元素本身的位置发生移动
- 不脱离文档流
- 提升层级
2、> 边偏移量
- 上top 下bottom
- 左left 右right
- 案例
<style>
.wrap{
width: 600px;
height: 600px;
background-color: red;
}
.box1{
width: 100px;
height: 100px;
background-color: green;
/* 相对定位 */
position:relative;
/* 边偏移量
top bottom
left right
*/
top: 30px;
left: 80px;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
}
.box3{
width: 100px;
height: 100px;
background-color: pink;
/* 相对定位 */
position:relative;
/* 边偏移量
top bottom
left right
*/
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<!--
相对定位：
相对于元素本身的位置发生移动；如果设置边偏移量，对元素没有任何影响
特点：
相对于元素本身的位置发生移动
不脱离文档流
提升层级
-->
<div class="wrap">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>- 效果
2、绝对定位
- 绝对定位: 相对于定位父元素进行位置移动，如果没有定位父级，会一层一层往上找，一直找到body
1、>特点：
- 会脱离文档流
- 提升层级
- 案例
<style> .wrap{ width: 600px; height: 600px; background-color: red; margin: 0 auto; position: relative; } .box1{ width: 100px; height: 100px; background-color: green; /* 绝对定位 */ position: absolute; top: 50px; left: 100px; } .box2{ width: 100px; height: 100px; background-color: orange; } .box3{ width: 100px; height: 100px; background-color: pink; position: absolute; top: 50px; left: 100px; } </style> </head> <body> <!-- 绝对定位: 相对于定位父元素进行位置移动，如果没有定位父级，会一层一层往上找，一直找到body 特点： 会脱离文档流 提升层级 --> <div class="wrap"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </div> </body> - 效果
三、固定定位
- 固定定位：相对于浏览器的窗口进制定位
1、>特点：
- 会脱离文档流，不占位
- 提升层级
- 案例
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
/*
固定定位：
相对于浏览器的窗口进制定位
特点：
会脱离文档流，不占位
提升层级
*/
position: fixed;
top: 0px;
left: 0px;
}
.box1{
width: 200px;
height: 200px;
background-color: aqua;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
position: fixed;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>- 效果
四、盒子居中的方法
- 案例
<style>
.box{
width: 300px;
height: 200px;
background-color: red;
/* 第一种方法 */
/* position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; */
/* 第二种方法 */
/* position: fixed;
top: calc(50% - 100px);
left: calc(50% - 150px); */
position: fixed;
top: 50%;
left: 50%;
/* transform: translateX(-50%); */
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<div class="box">11111</div>
</body>- 效果
五、Unicode 引用
1、Unicode 引用
- Unicode 是字体在网页端最原始的应用方式
1、>特点：
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 默认情况下不支持多色，直接添加多色图标会自动去色。
- 注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
2、>Unicode 使用步骤如下：
第一步：拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1657696548234') format('woff2'),
url('iconfont.woff?t=1657696548234') format('woff'),
url('iconfont.ttf?t=1657696548234') format('truetype');
}第二步：定义使用 iconfont 的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
2、font-class 引用
- font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
1、与 Unicode 使用方式相比，具有如下特点：
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
2、使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
三、Symbol 引用
- 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合
1、与另外两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。 - 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。
- 通过一些技巧，支持像字体那样，通过
2、使用步骤如下：
第一步：引入项目下面生成的 symbol 代码：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代码（引入一次就行）：
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>- 案例
<!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/iconfont.css">
<style>
.wrap{
font-size: 30px;
color: #000;
float: left;
}
.icon {
width: 5em;
height: 5em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<div class="iconfont icon-xuegao wrap"></div>
<div class="iconfont icon-kafei wrap"></div>
<div class="iconfont icon-shutiao wrap"></div>
<div class="iconfont icon-zhenzhunaicha wrap"></div>
<div class="iconfont icon-nailao wrap"></div>
<br>
<br>
<div class="iconfont wrap"></div>
<div class="iconfont wrap"></div>
<div class="iconfont wrap"></div>
<div class="iconfont wrap"></div>
<div class="iconfont wrap"></div>
<br>
<br>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-kafei"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shutiao"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhenzhunaicha"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xuegao"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-nailao"></use>
</svg>
<script src="./font/iconfont.js">
</script>
</body>
</html>- 效果
7073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
