Html-字体图标、弹性布局的使用
一、字体图标
字体图标:
优点:占用带宽小，不会失真，可以随意调节字体大小和颜色。
图片:比较占用带宽，放大有可能会产生失真的效果，图片改变颜色不方便。
选择要下载的图标添加到购物车
查看购物车清单
点击下载代码
双击demo_index.html文件查看使用说明
三种引用方式
方法一：Unicode引用
Unicode引用
Unicode是字体在网页端最原始的应用方式，
特点是:兼容性最好，支持IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，
就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标，这些多色图标在 Unicode模式下将不能使用，如果有需求建议使用symbol的引用方式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@font-face {
font-family: 'iconfont';
src: url('../html练习/iconfont/iconfont.ttf?t=1636768760093') format('truetype');
}
</style>
<body>
<div class="iconfont"></div>
</body>
</html>
方法二：Font class引用
font-class是 Unicode使用方式的一种变种，主要是解决 Unicode书写不直观，
语意不明确的问题。
与Unicode使用方式相比，具有如下特点:
兼容性良好，支持IE8+，及所有现代浏览器。
相比于Unicode 语意明确，书写更直观。可以很容易分辨这个 icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改 class里面的 Unicode引用。
缺点:不过因为本质上还是使用的字体，所以多色图标还是不支持的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="iconfont/iconfont.css">
</head>
<body>
<span class="iconfont icon-chat-color"></span>
</body>
</html>
方法三：Symbol引用
Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流也是平台目前推荐的用法。
相关介绍可以参考这篇文章这种用法其实是做了一个SVG 的集合，与另外两种相比具有如下特点:
支持多色图标了，不再受单色限制。
通过一些技巧。
支持像字体那样，通过font-size, color来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG的性能一般，还不如png。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="iconfont/iconfont.js"></script>
</head>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-box-color"></use>
</svg>
</body>
</html>
tip:一定要引入正确文件夹目录，否则就会出现空白乱码情况(一个白色的框框)。
二、弹性布局
弹性容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.perent {
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
display: flex;
}
.child {
width: 100px;
height: 100px;
}
.btn_1 {
background-color: skyblue;
}
.btn_2 {
background-color: rgb(249, 253, 7);
}
.btn_3 {
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
flex-direction: column;column从上单下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.perent {
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
display: flex;
flex-direction: column;
}
.child {
width: 100px;
height: 100px;
}
.btn_1 {
background-color: skyblue;
}
.btn_2 {
background-color: rgb(249, 253, 7);
}
.btn_3 {
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
justify-content: center; center:向主轴的中心位靠拢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.perent {
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
display: flex;
flex-direction: column;
justify-content: center;
}
.child {
width: 100px;
height: 100px;
}
.btn_1 {
background-color: skyblue;
}
.btn_2 {
background-color: rgb(249, 253, 7);
}
.btn_3 {
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
justify-content:space-around;
space-around:平均分布，两边有距离，两边距离是中间的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.perent {
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
display: flex;
flex-direction: column;
justify-content:space-around;
}
.child {
width: 100px;
height: 100px;
}
.btn_1 {
background-color: skyblue;
}
.btn_2 {
background-color: rgb(249, 253, 7);
}
.btn_3 {
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
justify-content:space-between;
space-between:平均分布，两边没有距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.perent {
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
display: flex;
flex-direction: column;
justify-content:space-between;
}
.child {
width: 100px;
height: 100px;
}
.btn_1 {
background-color: skyblue;
}
.btn_2 {
background-color: rgb(249, 253, 7);
}
.btn_3 {
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
justify-content:space-evenly;
space-evenly:(新)平均分布，两边都有距离，两边的距离和中间的是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.perent {
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
display: flex;
flex-direction: column;
justify-content:space-evenly;
}
.child {
width: 100px;
height: 100px;
}
.btn_1 {
background-color: skyblue;
}
.btn_2 {
background-color: rgb(249, 253, 7);
}
.btn_3 {
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
align-items: center;
设置测轴的内容分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.perent {
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
display: flex;
flex-direction: column;
justify-content:space-evenly;
align-items: center;
}
.child {
width: 100px;
height: 100px;
}
.btn_1 {
background-color: skyblue;
}
.btn_2 {
background-color: rgb(249, 253, 7);
}
.btn_3 {
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
汇总：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.perent{
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
/* 弹性容器 */
display: flex;
/* 设置主轴方向
column从上到下
row(默认)从左到右
row-reverse 从右到左
column-revese从下到上
*/
flex-direction: column;
/* 设置主轴的内容分布
flex-start：向主轴的开始方向靠拢默认
center:向主轴的中心位靠拢
space-around:平均分布，两边有距离，两边距离是中间的一半
space-between:平均分布，两边没有距离
space-evenly:(新)平均分布，两边都有距离，两边的距离和中间的是一样的
*/
justify-content: space-evenly;
/* 设置测轴的内容分布
flex-start：向主轴的开始方向靠拢
center:向主轴的中心位靠拢
flex-end:向测轴的结束位置靠拢
stretch:拉伸(默认),如果设置高度此拉伸无效
*/
/* align-items: stretch; */
/* 设置多行的测轴分布
align-content:flex-start多行内容往内容开端靠拢
center多行内容居中
flex-end多行内容向结尾靠拢
space-between两边没有边距
space-around两边有边距，两边间距是中间的一半
space-evently：平均分布两边都有距离，两边的距离和中间的是一样的
flex-wrap: wrap; */
}
/* child为弹性容器的直接子元素 */
.child{
width: 100px;
height: 100px;
}
.btn_1{
background-color:skyblue;
}
.btn_2{
background-color:rgb(249, 253, 7);
}
.btn_3{
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.perent{
margin: 0 auto;
width: 500px;
height: 500px;
background-color: rgb(155, 106, 233);
display: flex;
flex-direction: row;
justify-content: space-evenly;
/* 换行
flex-wrap：默认nowarp
*/
flex-wrap: wrap;
/* 设置多行的测轴分布
align-content:flex-start多行内容往内容开端靠拢
center多行内容居中
flex-end多行内容向结尾靠拢
space-between两边没有边距
space-around两边有边距，两边间距是中间的一半
space-evently：平均分布两边都有距离，两边的距离和中间的是一样的
*/
align-content:center;
}
/* child为弹性容器的直接子元素 */
.child{
width: 100px;
height: 100px;
}
.btn_1{
background-color:skyblue;
}
.btn_2{
background-color:rgb(249, 253, 7);
}
.btn_3{
background-color: rgb(255, 164, 235);
}
</style>
<body>
<div class="perent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.control {
width: 500px;
height: 400px;
display: flex;
margin: 0 auto;
border: 1px solid #999;
}
body {
display: flex;
}
.left {
flex: 1;
background: pink;
}
.main {
flex: 2;
background: darkolivegreen;
}
.right {
width: 200px;
background: #fff;
}
</style>
<body>
<div class="control">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
比例划分
排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.parent{
display: flex;
flex-direction: row;
width: 900px;
height: 600px;
}
.btn_1{
background-color:skyblue;
width: 200px;
height: 200px;
order: 4;
}
.btn_2{
background-color:rgb(249, 253, 7);
width: 200px;
height: 200px;
/* order子元素排序按照从小到大顺序排序 */
order: 3;
}
.btn_3{
background-color: rgb(255, 164, 235);
width: 200px;
height: 200px;
order: 2;
}
.btn_4{
background-color: rgb(103, 153, 247);
width: 200px;
height: 200px;
order: 1;
}
</style>
<body>
<div class="parent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
<div class="child btn_4">4</div>
</div>
</body>
</html>
给子元素单独设置居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.parent{
display: flex;
flex-direction: row;
width: 900px;
height: 600px;
}
.btn_1{
background-color:skyblue;
width: 200px;
height: 200px;
}
.btn_2{
background-color:rgb(249, 253, 7);
width: 200px;
height: 200px;
}
.btn_3{
background-color: rgb(255, 164, 235);
width: 200px;
height: 200px;
/* 给子元素单独设置居中 */
align-self: center;
}
.btn_4{
background-color: rgb(103, 153, 247);
width: 200px;
height: 200px;
}
</style>
<body>
<div class="parent">
<div class="child btn_1">1</div>
<div class="child btn_2">2</div>
<div class="child btn_3">3</div>
<div class="child btn_4">4</div>
</div>
</body>
</html>
856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
