刚刚学完CSS ：display float，flex flow 傻傻分不清了
目录
描述
示例：
CSS 中的 display
CSS 中的 float
CSS 中的 flex
描述
刚刚学完CSS ,导致浮动（float），弹性布局（display:flex）好几个字段配置属性已经分不清了。
display float 就同层级别，都是布局的配置项目。
flex是display一个可选值。
flow ：不存在这个值或者配置项。但是由它组成单词倒是有仨：
text-overflow: inherit; //文本溢出如何显示 display: flow-root; //开启BFC, 解决塌陷问题 overflow: hidden; //内容溢出时的设置
示例：
display: flex; //实现弹性盒子
float: right; //靠右浮动
在CSS布局中，flex、grid以及float属性的差别是flex属性适用于小的UI元素，grid属性适合用于为网站整体进行布局而float属性适合在较大的文本文章中设置图像。
CSS 中的 display
display 是CSS一个布局的配置项，他可使用值如下：
/* precomposed values */ display: block; display: inline; display: inline-block; display: flex; display: inline-flex; display: grid; display: inline-grid; display: flow-root;/* box generation */ display: none; display: contents;/* multi-keyword syntax */ display: block flow; display: inline flow; display: inline flow-root; display: block flex; display: inline flex; display: block grid; display: inline grid; display: block flow-root;/* other values */ display: table; display: table-row; /* all table elements have an equivalent CSS display value */ display: list-item;/* Global values */ display: inherit; display: initial; display: revert; display: revert-layer; display: unset;和 float 都可以使元素在同一行，但是也各有缺点。
display：元素方向不可能控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
CSS 中的 float
float 是CSS一个针对子元素布局的配置项，它可使用的值： right,left,top,bottom 不需要配合display使用。不需要对父元素设置/*float：浮动是一种传统网页的布局方式通过浮动脱离文档而横向排列None：默认不浮动*/
float示例：
.box2 {width: 400px;height: 300px;border: 10px solid #eee8d5;}.box3 {width: 290px;height: 100px;background-color: #e0c46c;float: right;/*margin:0 auto;*/}//...
<body><div class="box2"><div class="box3"></div> </div>
</div></body>CSS 中的 flex
flex呢，是display配置项一个可选值，实现弹性盒子:
display: flex;
/*弹性容器 display: flex; 块级 display:inline-block;行内弹性容器 容器里的所有子元素都自动变成 弹性项 主轴： 元素排列方向flex-direction:row：自右向右column：自上向下row-reverse:自右向左column-reverse:自下向上 侧轴： 与主轴垂直方向flex-wap:设置是否自动换行none 不换行wrap 按侧轴换行*/ display: flex;
flex 示例：
<style>ul {list-style: none}ul {width: 900px;background-color: #eeeeee;border: 10px solid red;/*弹性盒子*/display: flex;/* 修改容器子元素方向*/flex-flow: row;}li {width: 200px;line-height: 50px;font-size: 30px;color: white;/*弹性盒子控制子元素填充,根据当前主轴长度，均匀放大或者缩小*/flex-basis: auto;/*当总长度超出主轴时，根据主轴长度进行等比缩小0： 不缩小1：等比缩小*/flex-shrink: 0;}</style>
//...
<ul><li>1</li><li>2</li>
</ul>相关文章：
刚刚学完CSS ：display float，flex flow 傻傻分不清了
目录 描述 示例： CSS 中的 display CSS 中的 float CSS 中的 flex 描述 刚刚学完CSS ,导致浮动（float），弹性布局（display:flex）好几个字段配置属性已经分不清了。 display float 就同层级别…...
python建立图片索引数据库，根据一段文字，找到存放在电脑上最匹配的图片
python建立图片索引数据库，根据一段文字，找到存放在电脑上最匹配的图片 作者：虚坏叔叔 博客：https://xuhss.com 早餐店不会开到晚上，想吃的人早就来了！😄 一、程序的用处 一键视频 可以根据一…...
MySQL OCP888题解048-letter N in slow query log(慢查询日志里的字母N)
文章目录1、原题1.1、英文原题1.2、中文翻译1.3、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3.1、知识点1：mysqldumpslow - 总结缓慢的查询日志文件4、实验4.1、实验14.1.1、实验目的4.1.2、实验前准备4.1.3、实验步骤4.1.4、实验结论5、总结1、原题 1.1…...
数据采集 - 笔记 2
1快速实现西门子S7系列PLC数据采集 快速实现西门子S7系列PLC数据采集 - 知乎 2 什么是时序数据库？ 时序数据库（Time Series Database）是一种特殊类型的数据库，用于存储和处理时间序列数据。时间序列数据是指按时间顺序排列的数…...
电子技术——数字IC技术，逻辑电路和设计方法
电子技术——数字IC技术，逻辑电路和设计方法 在我们之前的学习中，我们学习了CMOS技术，然而CMOS技术并不是唯一的数字逻辑技术，因此，本节系统的介绍当今使用的数字技术和逻辑电路族。 数字IC技术和逻辑电路族 逻辑电…...
[ROS2 知识] 包依赖关系和rosdep详述
一、说明 如果你建立一个工作空间，试图将所有包的依赖项搞明白，或者期望将包的依赖项全部安装到工作空间中，您看本文是正确选择。本文将解释如何使用 rosdep 管理外部依赖项。 二、介绍rosdep 2.1 rosdep是何物？ rosdep 是 ROS 的依赖管理实用程序，可以与 ROS 包和外部库…...
mysql创建索引导致死锁，数据库崩溃，完美解决方案
文章目录写在前面一、短事务场景下，执行DDL语句场景分析1、短事务场景下，执行表字段添加操作2、短事务场景下，执行表字段修改操作3、短事务场景下，执行表字段删除操作（1）往里添加一条数据试试4、短事务场景…...
c++11 标准模板（STL）（std::unordered_map）（八）
定义于头文件 <unordered_map> template< class Key, class T, class Hash std::hash<Key>, class KeyEqual std::equal_to<Key>, class Allocator std::allocator< std::pair<const Key, T> > > class unordered…...
企业ISO体系认证办理，可以自行申请吗？为什么都要找咨询公司？
企业ISO体系认证办理，可以自行申请吗？为什么都要找咨询公司？ 很多人认为ISO咨询公司为中介机构，希望直接找认证公司进行认证。其实认证机构担任的是认证审核职责，咨询机构担任的是咨询职责。按中国国家任可监委员会的…...
二、Neo4j源码研究系列 - 单步调试
二、Neo4j源码研究系列 - 单步调试 一、背景介绍 上一篇我们已经把了neo4j的源码准备以及打包流程完成了，本篇将讲解如何对neo4j进行单步调试。对于不了解如何编译打包neo4j的读者，请阅读《一、Neo4j源码研究系列 - 源代码准备》。 大纲： …...
基于Qt WebEngine 的Web仪器面板GUI程控技术
随着IIoT的发展，很多工业仪器也具备了远程管理的GUI。与早期使用串口进行命令交互不同，这些GUI可以直接在远程呈现数据。 作为希望对仪器、软件进行二次开发的小公司来说，会遇到GUI人工操作转自动化的需求。在无法通过串口等传统接口进行自动…...
海康摄像头使用RTSP
1.协议格式。海康威视IP摄像头rtsp协议地址如下：rtsp://[username]:[passwd][ip]:[port]/[codec]/[channel]/[subtype]/av_stream主码流：rtsp://admin:12345192.168.1.64:554/h264/ch1/main/av_streamrtsp://admin:12345192.168.1.64:554/MPEG-4/ch1/mai…...
编程语言分类
目录 ❤ 机器语言 机器语言的编程 ❤ 汇编语言 ❤ 高级语言(编程语言) 编译型 解释型 ❤ 动态语言和静态语言 ❤ 强类型定义语言和弱类型定义语言 ❤ 主流语言介绍 C语言 C java python JavaScript SQL PHP python从小白到总裁完整教程目录:https://blog…...
[nodejs开发] typescript引入js模块或文件
首先更改tsconfig.json 中的compilerOptions属性："moduleResolution": "Node"假设有一个abc.js其内容如下：var Circle (function () {function Circle() {}Circle.prototype.draw function () {console.log("Cirlce is drawn…...
小帮软件机器人应用于通信集团财务数据填报、编制、稽核、银企对账
某大型通信集团是国有控股通信运营服务提供商，主要从事国内外通信设施服务业务、固定通信业务、移动通信业务、数据通信业务、网络接入业务、卫星国际专线业务和通信业务相关系统集成业务，管辖20多家子（分）公司、服务运营和支持网…...
37. CF-Weights Distributing
链接 这是一个比较经典的题目。容易想到求出两段路径重合的部分，然后贪心的放权值。那么跑三次最短路，枚举重合部分的端点即可。 正解没什么好说的。这题有趣的地方在于，如果数据比较弱，可能会把一些错误做法放过去。 一种错误…...
百丽时尚×优维科技×道客战略启动「云原生一体化项目」
3月7日，由百丽时尚集团（以下简称：百丽时尚）联合优维科技、道客共同举办的「云原生一体化项目启动会」在深圳百丽国际大厦圆满落幕，项目合作三方齐聚一堂，就云原生一体化建设战略方案达成合作共识࿰…...
小诺开源技术
小诺开源技术 文章目录小诺开源技术前言页面演示介绍文档学习建议登录地址下载地址前言 近期接触了小诺开源技术的一个前端框架，底层是蚂蚁框架，感觉很好用，不过需要稍微学习并适应一下，推荐给大家，本篇仅用于学习&am…...
AidLux AI应用案例悬赏选题 | 纺织品表面瑕疵检测
AidLux AI 应用案例悬赏征集活动 AidLux AI 应用案例悬赏征集活动是AidLux推出的AI应用案例项目合作模式，悬赏选题将会持续更新。目前上新的选题涉及泛边缘、机器人、工业检测、车载等领域，内容涵盖智慧零售、智慧社区、智慧交通、智慧农业、智能家居等…...
UE官方教程笔记02-实时渲染基础下
对官方教程视频[官方培训]02-实时渲染基础下 | 陈拓 Epic的笔记没听懂的地方就瞎写反射实时渲染中反射是一个非常有挑战的特性UE中有多种不同的方案，各有各的优势和缺点反射捕获屏幕空间反射平面反射LumenRT Reflection反射捕获在指定位置捕获一张Cube Map需要预计算…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
云计算——弹性云计算器（ECS）
弹性云服务器：ECS 概述 云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
MySQL账号权限管理指南：安全创建账户与精细授权技巧
在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号？ 最小权限原则…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。 目录 …...