当前位置： 首页 > news >正文

flex弹性盒模型与阿里图标的使用

news 文章来源：https://blog.csdn.net/huaz_md/article/details/132879052 2025/2/1 8:53:22

华子目录

  • flex布局
    • flex布局原理
    • flex使用三要素
  • 阿里图标（字体）

flex布局

相关学习网站：http://c.biancheng.net/css3/flex.html
1.flex是当前最主流的布局方式：用它布局起来更方便，取代了浮动的作用。
2.浮动布局有缺陷，会脱离文档流，可能会导致布局崩塌
注：用flex布局的元素成为flex容器，它里面的子元素为容器项目或flex项目
父级：容器
子级：项目

flex布局原理

就是通过两个轴，把网页分割成一行行，一列列

flex主轴：从左往右
flex副轴：从上往下

flex使用三要素

1.主轴的方向（左右水平布局/上下垂直布局）
2.主轴的对齐方式
3.副轴的对齐方式

flex使用：display: flex;flex-wrap: wrap;/*多行显示*/display样式说明：设置主轴方向（决定左右/上下）：flex-directionrow;默认属性 行 从左往右column; 列 从上往下row-reverse;行反转，从右往左column-reverse;列反转，从下往上
设置主轴对齐方式：justify-contentflex-start;默认值 按照起点对齐 flex-end; 终点对齐space-around;均分布局space-between;两端对齐center;居中
设置副轴对齐方向：align-itemscenter;居中flex-end;靠终点flex-start;靠起点align-content: space-around; 副轴均分布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;background-color: pink;display: flex;   /*设置弹性盒模型*/}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: yellow;}.box3{width: 100px;height: 100px;background-color: rgb(28, 8, 8);}</style>
</head>
<body><div class="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;background-color: pink;display: flex;   /*设置弹性盒模型*//* flex-direction: column;   主轴从上往下 *//* flex-direction: row;主轴从左往右 *//* flex-direction: row-reverse;主轴从右往左 *//* flex-direction: column-reverse;主轴从下往上 *//* justify-content: flex-end;偏向箭头方向 *//* justify-content: flex-start;偏向剑尾方向 *//* justify-content: space-around;均匀分布 *//* justify-content: space-between;两端对齐 *//* align-items: center;副轴居中 *//* align-items: flex-end;偏向副轴箭头方向 *//* align-items: flex-start;偏向副轴剑尾方向 */}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: yellow;}.box3{width: 100px;height: 100px;background-color: rgb(28, 8, 8);}</style>
</head>
<body><div class="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div>
</body>
</html>

阿里图标（字体）

原理：将小图标定义成为字体，通过引入字体来展示这些小图标。因为此时的小图标相当于文字，所以支持文字对应的所有样式。（字体大小，颜色等等）
类似于我们的颜表情，它不是图片而是特殊字体。

免费将图标以字体的形式加载页面使用步骤：1.打开阿里图标官网：https://www.iconfont.cn/2.注册，登录3.选择需要的图标加入购物车4.下载代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./Ali_icon/download/font_8k7a6w8dx2i/iconfont.css">
</head>
<body><span class="iconfont icon-huafei"></span>
</body>
</html>

在这里插入图片描述

相关文章：

flex弹性盒模型与阿里图标的使用

华子目录 flex布局flex布局原理flex使用三要素 阿里图标&#xff08;字体&#xff09; flex布局 相关学习网站&#xff1a;http://c.biancheng.net/css3/flex.html 1.flex是当前最主流的布局方式&#xff1a;用它布局起来更方便&#xff0c;取代了浮动的作用。 2.浮动布局有缺…...

编程日记 2023/9/15 7:14:36

linux 应用中offsetof ()是个啥?

#include <stdio.h> #include <stddef.h> // 需要包含 <stddef.h> 否则会有以下错误, 是因为找不到offsetof()而引起 // printf("age offset:%d\n",offsetof(Persion,age)); //main.cpp|11 col 43| error: expected primary-expression before …...

编程日记 2023/9/15 7:10:32

ununtu中vim的使用

插入命令 i&#xff1a;表示输入 退出命令 :w - 保存文件&#xff0c;不退出 vim :w file -将修改另外保存到 file 中&#xff0c;不退出 vim :w! -强制保存&#xff0c;不退出 vim :wq -保存文件&#xff0c;退出 vim :wq! -强制保存文件&#xff0c;退出 vim …...

编程日记 2023/9/15 7:09:31

SqlServer在尝试加载程序集 ID 65917 时 Microsoft .NET Framework 出错。服务器可能资源不足，或者不信任该程序集

问题&#xff1a;在尝试加载程序集 ID 65917 时 Microsoft .NET Framework 出错。服务器可能资源不足&#xff0c;或者不信任该程序集&#xff0c;因为它的 PERMISSION_SET 设置为 EXTERNAL_ACCESS 或 UNSAFE。 检查数据库属性&#xff1a;检查服务器是否信任该程序集 解决方法…...

编程日记 2023/9/15 7:08:30

Discourse 如何下载备份并恢复本地数据库

进入网站的备份界面&#xff0c;会看到当前所有的备份情况。 单击下载按钮。 需要注意的是&#xff0c;当你下载后&#xff0c;系统将会发送一个链接到你的邮箱地址中。 你可以使用邮箱地址中收到的链接进行数据下载。 下载链接 单击邮件中收到的下载链接地址进行下载。 下载…...

编程日记 2023/9/15 7:07:28

激光焊接汽车PP塑料配件透光率测试仪

随着汽车主机厂对车辆轻量化的需求越来越强烈&#xff0c;汽车零部件轻量化设计、制造也成为汽车零部件生产厂商的重要技术指标。零部件企业要实现产品的轻量化&#xff0c;在材料指定的情况下&#xff0c;要通过产品设计优化、产品壁厚减小和装配方式的优化来解决。使用PP材料…...

编程日记 2023/9/15 7:05:26

Android面试题汇总（二）

一、Java集合 1、谈谈 Java 中 List、Set 以及 Map 的区别&#xff1f; List&#xff1a;有序的&#xff0c;数据可以重复。。 Set&#xff1a;无序的&#xff0c;数据不能重复。 Map&#xff1a;键值对存储。键是唯一的&#xff0c;值不是唯一的。 2、谈谈 ArrayList 和 Link…...

编程日记 2023/9/15 7:03:24

最新模块化设计小程序系统源码完整版：开源可二开，支持DIY

随着互联网的快速发展&#xff0c;小程序已成为各行各业开展业务的重要工具。而模块化设计小程序系统源码完整版则是一种高效、灵活、易维护的解决方案。 分享一个最新的模块化设计小程序系统源码完整版&#xff0c;源码开源可二开&#xff0c;支持自由DIY设计&#xff0c;含完…...

编程日记 2023/9/15 7:02:22

edge扩展下载出现Download interrupted

一、Edge扩展下载失败无法下载网络问题完美解决方案 1.首先我们找到我的电脑双击我的电脑&#xff0c;找到C盘并打开C盘&#xff0c;并找到windows选项 双击打开windows并找到system32 2.双击打开system32并找到drivers 4.双击打开drivers找到etc选项 5.双击打开etc选项找到hos…...

编程日记 2023/9/15 7:01:21

Dokcer搭建Apache Guacamole堡垒机

一、什么是堡垒机 “堡垒机” 这个词通常指的是 “堡垒机器”&#xff08;Bastion Host&#xff09;的简称。堡垒机是一种计算机系统或网络设备&#xff0c;用于增强计算机网络的安全性。它在网络中充当一个重要的安全关口&#xff0c;通过限制对内部网络的访问&#xff0c;帮…...

编程日记 2023/9/15 6:59:19

【Spring Boot自动装配】

Spring Boot启动的时候会通过EnableAutoConfiguration注解找到META-INF/spring.factories配置文件中的所有自动配置类&#xff0c;并对其进行加载&#xff0c;而这些自动配置类都是以AutoConfiguration结尾来命名的&#xff0c;它实际上就是一个JavaConfig形式的Spring容器配置…...

编程日记 2023/9/15 6:57:18

windows彻底卸载unity

1.控制面板卸载 双击打开桌面的控制面板&#xff0c;选择卸载程序&#xff0c;选中Unity和UnityHub右击卸载。 2.清除unity的注册表 在运行中输入“regedit”双击打开注册表界面 删除 HKEY_CURRENT_USER\Software\Unity 下所有项 删除 HKEY_CURRENT_USER\Software\Unity Tec…...

编程日记 2023/9/15 6:53:14

Java项目-苍穹外卖-Day10-SpirngTask及WebSocket

文章目录 前言SpringTask介绍SpringTask_corn表达式Spring_Task入门案例 订单状态定时处理需求分析代码开发功能测试 WebScoket介绍入门案例 来单提醒需求分析代码开发功能测试 客户催单代码开发功能测试 前言 本章实现的业务功能 超时未支付订单自动取消&#xff0c;配送中订…...

编程日记 2023/9/15 6:51:12

Spring IOC 容器：掌握 Spring 的核心技术

Spring 是一个非常流行和强大的 Java 开发框架&#xff0c;它可以帮助我们简化和优化 Java 项目的开发过程。Spring 的核心技术之一就是 IOC&#xff08;Inversion of Control&#xff0c;控制反转&#xff09;&#xff0c;它可以实现对象之间的解耦&#xff0c;让对象的创建和…...

编程日记 2023/9/15 6:50:11

python实现批量从excel列表显示图片网址中下载图片

遇到一个需求&#xff1a;给了一个excel表&#xff0c;里面有很多网址图片&#xff0c;要把图片下载到本地。手动操作的话就是在浏览器里输入网址&#xff0c;再图片另存为保存。这篇文章介绍一下使用python代码批量实现 第一步操作就是实现从网上下图片&#xff0c;这个用到了…...

编程日记 2023/9/15 6:49:10

java 单元测试Junit

所谓单元测试&#xff0c;就是针对最小的功能单元&#xff0c;编写测试代码对其进行正确性测试。为了测试更加方便&#xff0c;有一些第三方的公司或者组织提供了很好用的测试框架&#xff0c;给开发者使用。这里介绍一种Junit测试框架。Junit是第三方公司开源出来的&#xff0…...

编程日记 2023/9/15 6:48:09

Java中Timer和TimerTask的使用

这两个类使用起来非常方便&#xff0c;可以完成我们对定时器的绝大多数需求 Timer类是用来执行任务的类&#xff0c;它接受一个TimerTask做参数 Timer有两种执行任务的模式,最常用的是schedule,它可以以两种方式执行任务:1:在某个时间(Data)&#xff0c;2:在某个固定的时间之后…...

编程日记 2023/9/15 6:45:07

计算机竞赛 机器视觉 opencv 深度学习 驾驶人脸疲劳检测系统 -python

文章目录 0 前言1 课题背景2 Dlib人脸识别2.1 简介2.2 Dlib优点2.3 相关代码2.4 人脸数据库2.5 人脸录入加识别效果 3 疲劳检测算法3.1 眼睛检测算法3.2 打哈欠检测算法3.3 点头检测算法 4 PyQt54.1 简介4.2相关界面代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#x…...

编程日记 2023/9/15 6:44:06

DFS寻找从s到t的所有路径

问题描述&#xff1a; 输入一个有向图&#xff0c;输出从s到t的所有路径的结点 输入&#xff1a; 3 3 0 1 1 2 0 2输出&#xff1a; 0 1 2 0 2 代码&#xff1a; #include<bits/stdc.h> using namespace std;const int N 103; vector<int>e[N];//用行为N的…...

编程日记 2023/9/15 6:38:02

分享！JetBrains IDE中的GitLab支持

GitLab是流行的基于git的软件开发和部署平台之一&#xff0c;虽然很长一段时间以来&#xff0c;所有基本git操作都已经可以通过GitLab实现&#xff0c;但GitLab集成仍是JetBrains社区的一大最热门请求。为此&#xff0c;JetBrains团队今年与GitLab联手提供了这种类型的集成。 …...

编程日记 2023/9/15 6:37:01

jq弹窗拖动改变宽高

预览效果 <div classtishiMask><div class"tishiEm"><div id"coor"></div><div class"topNew ismove"><span class"ismove">提示</span><p onclick"closeTishi()"></p&…...

编程日记 2023/9/15 6:35:59

时间不确定度在分布式系统中的说明

On the one hand 时间不确定度问题和影响在分布式系统中 说明 时钟不确定度&#xff08;Clock Uncertainty&#xff09;是指在分布式系统中&#xff0c;由于网络延迟、时钟漂移等因素导致系统中各个节点时钟的不同步现象。这种不同步可能会影响到分布式系统的一致性和正确性…...

编程日记 2023/9/15 6:34:58

VMware vCenter 从6.7跨版本升级至7.0U3N

本文尝试使用 vCenter Server Appliance 管理界面 (VAMI) 进行对vCenter Server Appliance7应用进行小版本升级&#xff0c;从6.7.0.47000升级到7.0.3.01600&#xff08;7.0U3N&#xff09;。 一、升级前的准备工作 1、检查当前运行环境&#xff08;当前为6.7.0.47000&#x…...

编程日记 2023/9/15 6:33:58

大麦订单生成器最新版 大麦订单一键生成截图

1.可以一键添加&#xff0c;生成的假订单没有水印&#xff0c;界面也很真实。 2.在软件中输入生成的信息&#xff0c;这是产品信息&#xff0c;选择生成的产品图像&#xff0c;最后生成它。 后台一键生成&#xff0c;独立后台管理 教程&#xff1a;解压源码&#xff0c;修改数…...

编程日记 2023/9/15 6:32:57

如何对Map集合的key进行大小写转换？

工具类&#xff1a; ToUpperCaseKeyMapUtil.java public class ToUpperCaseKeyMapUtil {//对单一的mappublic static <T> Map<String, T> toUpperCaseKeyMap(Map<String, T> map) {if (map ! null) {List<String> mapKeyList new ArrayList<>…...

编程日记 2023/9/15 6:31:56

将函数实现放到CPP报“无法解析的外部符号...”，系VS Bug

发现一个现象&#xff0c;就是项目中有一个类&#xff0c;如果将函数实现全部放到头文件中&#xff0c;编译不报错&#xff0c;如果将函数实现放到CPP中则始终提示“无法解析的外部符号...”&#xff0c;考虑到放到头文件中能正常编译运行&#xff0c;显然这里不符合“无法解析…...

编程日记 2023/9/15 6:29:54

异步FIFO设计的仿真与综合技术（3）

概述 本文主体翻译自C. E. Cummings and S. Design, “Simulation and Synthesis Techniques for Asynchronous FIFO Design 一文&#xff0c;添加了笔者的个人理解与注释&#xff0c;文中蓝色部分为笔者注或意译。前文链接&#xff1a; 异步FIFO设计的仿真与综合技术&#xf…...

编程日记 2023/9/15 6:28:53

什么是区块链，解释区块链的原理和应用场景

1、什么是区块链&#xff0c;解释区块链的原理和应用场景。 区块链是一种分布式数据库&#xff0c;它由一系列按照时间顺序排列的数据块组成&#xff0c;并采用密码学方式保证不可篡改和不可伪造。区块链技术最初起源于比特币&#xff0c;作为比特币的底层技术&#xff0c;用于…...

编程日记 2023/9/15 6:27:52

使用bert进行文本二分类

构建BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;的训练网络可以使用PyTorch来实现。下面是一个简单的示例代码&#xff1a; import torch import torch.nn as nn from transformers import BertModel, BertTokenizer# Load BERT to…...

编程日记 2023/9/15 6:26:51

用Windows Installer CleanUp Utility 在windows server上面将软件卸载干净，比如SQLSERVER

这里写自定义目录标题 下载文件&#xff1a;Windows Installer CleanUp Utility。 通过以上工具可以将一个应用程序卸载干净。...

编程日记 2023/9/15 6:25:50

网站维护推广/关于友情链接的作用有

data的复数形式是datas还是data?rt爱做梦的小菇凉 *|用户&#xff1a;要求回答的带个面包去流浪|用户:优质回答&#xff1a;不可数用户:惯性宠爱i的其他回答&#xff1a;不可数名词用户:失控的其他回答&#xff1a;不可数名词 只有data一个形式用户:别动我爱人我谢你全家的其他…...

编程日记 2025/2/1 8:32:21

天眼查询企业信息官网登录/seo在线推广

1, 下载地址http://xamarin.com/download 2&#xff0c; 安装后&#xff0c;发现xamarin并没有在visual studio 2015中找到&#xff0c; 去Control Panel -> Open Programs and Features -> 右键Xamarin -> 点击"Change" button. 3, 选择Xamarin for Visual…...

编程日记 2025/2/1 8:26:10

自己建设个人网站要花费多少/本周新闻热点

请帮助我。我正在编写以下代码来挂载vhd文件。但我无法安装它。它在本地很好地工作&#xff0c;但是当我将它部署在Azure服务器上时&#xff0c;webrole仍处于脱机状态。我尝试删除下面的foreach块但徒劳无功。但是当我删除代码“Global.driveLetter drive.Mount(localCache.M…...

编程日记 2025/2/1 3:43:32

怎样做网站建设/建设网站流程

图片来自WENN/网络卡莉克劳斯 (Karlie Kloss)图片延伸阅读&#xff1a;Karlie Kloss如今都市年轻人群开始关注健康和生活领域&#xff0c;他们积极追求更健康更多彩的生活方式。他们热爱分享健身技巧&#xff0c;关注青年潮流文化&#xff0c;认真选择自己喜欢的城市&#xff0…...

编程日记 2025/2/1 3:33:21

聊天app搭建/关键词排名优化提升培训

展开全部b4造成这个现象的原因是636f70793231313335323631343130323136353331333365633866row默认不指定align-items这个样式, 而该样式不指定默认为stretch(拉伸), 因此当第一列将row撑高后, 第二列也会被拉伸, 这种情况给row指定下align-item可以解决, 使用b4的align-item-st…...

编程日记 2025/2/1 0:17:02

常州发布信息的有什么网站/成都网站维护

如&#xff1a;假设你想备份一个叫做 /home/joeuser/ 的目录&#xff0c;但是不想包括子目录 /home/joeuser/junk/&#xff0c;因为其中包括的都是不必要的文件。你想创建一个叫做 backup.iso 的映像&#xff0c;然后把它刻写到 CD-R(W) 去&#xff0c;因而你能够在办公时在你的…...

编程日记 2025/1/31 23:27:36