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

刚刚学完CSS ：display float，flex flow 傻傻分不清了

news 2026/3/24 16:37:51

目录

描述

示例：

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 傻傻分不清了

目录 描述 示例&#xff1a; CSS 中的 display CSS 中的 float CSS 中的 flex 描述 刚刚学完CSS ,导致浮动&#xff08;float&#xff09;&#xff0c;弹性布局&#xff08;display:flex&#xff09;好几个字段配置属性已经分不清了。 display float 就同层级别&#xf…...

编程日记 2023/3/11 6:49:26

python建立图片索引数据库，根据一段文字，找到存放在电脑上最匹配的图片

python建立图片索引数据库&#xff0c;根据一段文字&#xff0c;找到存放在电脑上最匹配的图片 作者&#xff1a;虚坏叔叔 博客&#xff1a;https://xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; 一、程序的用处 一键视频 可以根据一…...

编程日记 2023/3/11 6:48:23

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&#xff1a;mysqldumpslow - 总结缓慢的查询日志文件4、实验4.1、实验14.1.1、实验目的4.1.2、实验前准备4.1.3、实验步骤4.1.4、实验结论5、总结1、原题 1.1…...

编程日记 2023/3/11 6:47:21

数据采集 - 笔记 2

1快速实现西门子S7系列PLC数据采集 快速实现西门子S7系列PLC数据采集 - 知乎 2 什么是时序数据库&#xff1f; 时序数据库&#xff08;Time Series Database&#xff09;是一种特殊类型的数据库&#xff0c;用于存储和处理时间序列数据。时间序列数据是指按时间顺序排列的数…...

编程日记 2023/3/11 6:45:09

电子技术——数字IC技术，逻辑电路和设计方法

电子技术——数字IC技术&#xff0c;逻辑电路和设计方法 在我们之前的学习中&#xff0c;我们学习了CMOS技术&#xff0c;然而CMOS技术并不是唯一的数字逻辑技术&#xff0c;因此&#xff0c;本节系统的介绍当今使用的数字技术和逻辑电路族。 数字IC技术和逻辑电路族 逻辑电…...

编程日记 2023/3/11 6:44:06

[ROS2 知识] 包依赖关系和rosdep详述

一、说明 如果你建立一个工作空间，试图将所有包的依赖项搞明白，或者期望将包的依赖项全部安装到工作空间中，您看本文是正确选择。本文将解释如何使用 rosdep 管理外部依赖项。 二、介绍rosdep 2.1 rosdep是何物？ rosdep 是 ROS 的依赖管理实用程序，可以与 ROS 包和外部库…...

编程日记 2023/3/11 6:43:02

mysql创建索引导致死锁，数据库崩溃，完美解决方案

文章目录写在前面一、短事务场景下&#xff0c;执行DDL语句场景分析1、短事务场景下&#xff0c;执行表字段添加操作2、短事务场景下&#xff0c;执行表字段修改操作3、短事务场景下&#xff0c;执行表字段删除操作&#xff08;1&#xff09;往里添加一条数据试试4、短事务场景…...

编程日记 2023/3/11 6:41:59

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…...

编程日记 2023/3/11 6:40:57

企业ISO体系认证办理，可以自行申请吗？为什么都要找咨询公司？

企业ISO体系认证办理&#xff0c;可以自行申请吗&#xff1f;为什么都要找咨询公司&#xff1f; 很多人认为ISO咨询公司为中介机构&#xff0c;希望直接找认证公司进行认证。其实认证机构担任的是认证审核职责&#xff0c;咨询机构担任的是咨询职责。按中国国家任可监委员会的…...

编程日记 2023/3/11 6:38:45

二、Neo4j源码研究系列 - 单步调试

二、Neo4j源码研究系列 - 单步调试 一、背景介绍 上一篇我们已经把了neo4j的源码准备以及打包流程完成了&#xff0c;本篇将讲解如何对neo4j进行单步调试。对于不了解如何编译打包neo4j的读者&#xff0c;请阅读《一、Neo4j源码研究系列 - 源代码准备》。 大纲&#xff1a; …...

编程日记 2023/3/11 6:37:40

基于Qt WebEngine 的Web仪器面板GUI程控技术

随着IIoT的发展&#xff0c;很多工业仪器也具备了远程管理的GUI。与早期使用串口进行命令交互不同&#xff0c;这些GUI可以直接在远程呈现数据。 作为希望对仪器、软件进行二次开发的小公司来说&#xff0c;会遇到GUI人工操作转自动化的需求。在无法通过串口等传统接口进行自动…...

编程日记 2023/3/11 6:36:38

海康摄像头使用RTSP

1.协议格式。海康威视IP摄像头rtsp协议地址如下&#xff1a;rtsp://[username]:[passwd][ip]:[port]/[codec]/[channel]/[subtype]/av_stream主码流&#xff1a;rtsp://admin:12345192.168.1.64:554/h264/ch1/main/av_streamrtsp://admin:12345192.168.1.64:554/MPEG-4/ch1/mai…...

编程日记 2023/3/11 6:35:35

编程语言分类

目录 ❤ 机器语言 机器语言的编程 ❤ 汇编语言 ❤ 高级语言(编程语言) 编译型 解释型 ❤ 动态语言和静态语言 ❤ 强类型定义语言和弱类型定义语言 ❤ 主流语言介绍 C语言 C java python JavaScript SQL PHP python从小白到总裁完整教程目录:https://blog…...

编程日记 2023/3/11 6:34:31

[nodejs开发] typescript引入js模块或文件

首先更改tsconfig.json 中的compilerOptions属性&#xff1a;"moduleResolution": "Node"假设有一个abc.js其内容如下&#xff1a;var Circle (function () {function Circle() {}Circle.prototype.draw function () {console.log("Cirlce is drawn…...

编程日记 2023/3/11 6:33:26

小帮软件机器人应用于通信集团财务数据填报、编制、稽核、银企对账

某大型通信集团是国有控股通信运营服务提供商&#xff0c;主要从事国内外通信设施服务业务、固定通信业务、移动通信业务、数据通信业务、网络接入业务、卫星国际专线业务和通信业务相关系统集成业务&#xff0c;管辖20多家子&#xff08;分&#xff09;公司、服务运营和支持网…...

编程日记 2023/3/11 6:32:23

37. CF-Weights Distributing

链接 这是一个比较经典的题目。容易想到求出两段路径重合的部分&#xff0c;然后贪心的放权值。那么跑三次最短路&#xff0c;枚举重合部分的端点即可。 正解没什么好说的。这题有趣的地方在于&#xff0c;如果数据比较弱&#xff0c;可能会把一些错误做法放过去。 一种错误…...

编程日记 2023/3/11 6:31:19

百丽时尚×优维科技×道客战略启动「云原生一体化项目」

3月7日&#xff0c;由百丽时尚集团&#xff08;以下简称&#xff1a;百丽时尚&#xff09;联合优维科技、道客共同举办的「云原生一体化项目启动会」在深圳百丽国际大厦圆满落幕&#xff0c;项目合作三方齐聚一堂&#xff0c;就云原生一体化建设战略方案达成合作共识&#xff0…...

编程日记 2023/3/11 6:30:16

小诺开源技术

小诺开源技术 文章目录小诺开源技术前言页面演示介绍文档学习建议登录地址下载地址前言 近期接触了小诺开源技术的一个前端框架&#xff0c;底层是蚂蚁框架&#xff0c;感觉很好用&#xff0c;不过需要稍微学习并适应一下&#xff0c;推荐给大家&#xff0c;本篇仅用于学习&am…...

编程日记 2023/3/11 6:29:14

AidLux AI应用案例悬赏选题 | 纺织品表面瑕疵检测

AidLux AI 应用案例悬赏征集活动 AidLux AI 应用案例悬赏征集活动是AidLux推出的AI应用案例项目合作模式&#xff0c;悬赏选题将会持续更新。目前上新的选题涉及泛边缘、机器人、工业检测、车载等领域&#xff0c;内容涵盖智慧零售、智慧社区、智慧交通、智慧农业、智能家居等…...

编程日记 2023/3/11 6:28:11

UE官方教程笔记02-实时渲染基础下

对官方教程视频[官方培训]02-实时渲染基础下 | 陈拓 Epic的笔记没听懂的地方就瞎写反射实时渲染中反射是一个非常有挑战的特性UE中有多种不同的方案&#xff0c;各有各的优势和缺点反射捕获屏幕空间反射平面反射LumenRT Reflection反射捕获在指定位置捕获一张Cube Map需要预计算…...

编程日记 2023/3/11 6:27:06

SI4735开源库实战指南：从零构建多模式无线电接收系统

SI4735开源库实战指南&#xff1a;从零构建多模式无线电接收系统 【免费下载链接】SI4735 SI473X Library for Arduino 项目地址: https://gitcode.com/gh_mirrors/si/SI4735 SI4735库是一款专为Silicon Labs SI473X系列调谐器芯片设计的开源Arduino库&#xff0c;提供从…...

编程新知 2026/3/24 15:44:04

高德地图MassMarks技术解析：如何高效渲染海量点数据

1. 为什么传统Marker标点会卡顿&#xff1f; 第一次用高德地图JS API开发地图应用时&#xff0c;我兴冲冲地在地图上标注了几百个点位。结果页面直接卡成了PPT&#xff0c;鼠标移动都一顿一顿的。相信很多开发者都遇到过类似问题——当标点数量超过1000个时&#xff0c;页面性能…...

编程新知 2026/3/24 15:36:03

WindowsCleaner：3步解决C盘爆红难题，让你的电脑重获新生！[特殊字符]

WindowsCleaner&#xff1a;3步解决C盘爆红难题&#xff0c;让你的电脑重获新生&#xff01;&#x1f680; 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否…...

编程新知 2026/3/24 13:49:28

【社会学】洞察社会复杂系统四个认知透镜:关系、情绪、决策和稀缺性

我们终其一生&#xff0c;都在与人相处、处理情绪、做出选择、创造价值&#xff0c;可大多数人忙忙碌碌&#xff0c;却始终困在情绪内耗、关系纠结、决策迷茫的泥潭里。其实&#xff0c;世间万事万物都有底层逻辑&#xff0c;社会运行也有一套简洁的源代码。真正成熟的人&#…...

编程新知 2026/3/24 13:16:51

3个理由告诉你为什么Mermaid Live Editor是技术文档创作的终极工具

3个理由告诉你为什么Mermaid Live Editor是技术文档创作的终极工具 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-edito…...

编程新知 2026/3/24 12:48:46

iOS微信聊天记录备份完全指南：使用WeChatExporter永久保存你的数字回忆

iOS微信聊天记录备份完全指南&#xff1a;使用WeChatExporter永久保存你的数字回忆 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 你是否曾经因为手机存储空间不足而不得…...

编程新知 2026/3/24 12:46:46

设备班组必看：为什么长期选用该品牌的防爆重型扳手

作为企业设备维护班组负责人&#xff0c;我在挑选工具时&#xff0c;不仅看重安全与效率&#xff0c;更要综合考量耐用性与整体使用成本。经过长期实际使用&#xff0c;宇晶峰防爆重型扳手&#xff0c;成为我们班组公认性价比最高、用着最省心的选择。在耐用性上&#xff0c;这…...

编程新知 2026/3/24 12:44:44

FlowState Lab 辅助教学：生成物理实验仿真数据用于课堂

FlowState Lab 辅助教学&#xff1a;生成物理实验仿真数据用于课堂 1. 教育实验的数字化新解法 物理课堂上&#xff0c;老师们常常面临一个两难困境&#xff1a;真实实验能带来直观感受&#xff0c;但准备过程耗时耗力&#xff1b;而单纯的理论推导又缺乏实践验证。特别是在讲…...

编程新知 2026/3/24 10:37:52

【OpenClaw 全面解析：从零到精通】第 004 篇：OpenClaw 在 Linux/Ubuntu 上的安装与部署实战

系列说明&#xff1a;本系列共计 20 余篇&#xff0c;全面介绍 OpenClaw 开源 AI 智能体框架。本文为系列第 004 篇&#xff0c;聚焦于 OpenClaw 在 Linux/Ubuntu 上的安装与部署实战。建议先阅读 第 003 篇&#xff1a;OpenClaw 技术依赖与生态栈详解。 摘要 本文详细介绍在 …...

编程新知 2026/3/24 10:13:42

Emotion2Vec+ Large商业落地：智能音箱如何利用情感识别提升用户体验？

Emotion2Vec Large商业落地&#xff1a;智能音箱如何利用情感识别提升用户体验&#xff1f; 1. 情感识别技术概述 1.1 语音情感识别的发展现状 语音情感识别技术正在经历从实验室研究到商业落地的关键转折期。传统的情感识别主要依赖面部表情和肢体语言分析&#xff0c;但这…...

编程新知 2026/3/24 10:01:38