凯的个人博客

flex布局

4/25/2024 css

# 1.flex 布局

  • 容器属性
1.设置盒子为容器
display:flex

2.设置容器的主轴 及 主轴方向 
flex-direction: row;

3.设置主轴项目的对齐方式  
  justify-content: space-evenly;

4.单行侧轴对齐方式  
 align-items: center;

5.是否换行
  flex-wrap: nowrap;

6.多行侧轴对齐方式
align-content:flex-start;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 项目属性

# flex 伸缩属性

放大倍数： 将容器剩余的空间 分为多少份，然后给这个项目 【0-任意数字 支持小数但不推荐使用小数】

缩小倍数：将项目总的宽度超出的部分宽度 分为多少份，这个项目 扣除的宽度【最简单的理解 0-任意数字 支持小数但不推荐使用小数】

固定值： 不放大 不缩小 可以设置固定值，这个固定值会代替原有的with （主轴水平），原有的height(主轴垂直)

注意：放大 缩小 固定值 ，永远只设置一个参数

代码简写

放大： 
flex: 1;
缩小：
flex:0 2;
固定值：
flex:0 0 300px;
1
2
3
4
5
6
.box1{
	flex:放大倍数 缩小倍数 固定值;
}
1
2
3

# iconfont 使用

  • 在线图标使用
  • 通过 unicode 方式
  • class 类名的方式
  • 通过js引入使用

通过 unicode 方式

1.复制提供的代码 到 本地的 iconfont.css 文件中

2.将iconfont.css 文件引入到html文件中

3.使用这个图表

<span class="iconfont">&#xe600;</span>
1

class 类名的方式

1.复制提供的代码 html中 通过 link 引入这个css文件 【注意：添加一个协议】

2.使用这个图标

<span class="iconfont icon-car"></span>
1
  • 本地图标使用
  • 通过 unicode 方式
  • class 类名的方式 【重点 掌握】
  • 通过js引入使用

class 类名的方式 【重点 掌握】

1.点击下载所有图标

2.获取出所有的 字体文件（eot| woff|woff2|ttf|svg） + iconfont.css 文件

3.在自己的项目建文件夹 iconfont/所有的文件

4.在html中 引入iconfont.css

5.使用图标

    <!-- 引入iconfont字体图标 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./01.jd.css">
</head>
<body>
    <header>
        <div class="logo">logo</div>
        <div class="search"></div>
        <div class="login">登录</div>
    </header>
    <main>
    
        <i class="iconfont icon-car"></i>
 
        <span class="iconfont icon-car"></span>
        <span class="iconfont icon-jd"></span>
        <span class="iconfont icon-fanhuidingbu"></span>
    </main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

面试题1：

问 iconfont 本地使用和 在线链接使用有什么区别？

本地使用方式优点：断网以后仍然有效

本地使用方式缺点： 如果字体图标发生增删改操作 都必须要重新下载

js基础