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

CSS 元素的显示模式（块元素，行内元素，行内块元素）

news 来源：原创 2025/6/9 1:34:25

一. 块元素（block）

又称：块级元素
特点：
1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
2. 默认宽度：撑满父元素。
3. 默认高度：由内容撑开。
4. 可以通过 CSS 设置宽高。

例如：

1. 主体结构标签： <html> 、 <body>
2. 排版标签： <h1> ~  <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
3. 列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
4. 表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption>
5.  <form> 与 <option>

二. 行内元素（inline）

又称：内联元素
特点:
1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排
列。
2. 默认宽度：由内容撑开。

例如：

1. 文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
2.  <a> 与 <label>

三 行内块元素（inline-block）

又称：内联块元素
特点：
1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排
列。
2. 默认宽度：由内容撑开。
3. 默认高度：由内容撑开。
4. 可以通过 CSS 设置宽高。

例如：

1. 图片： <img>
2. 单元格： <td> 、 <th>
3. 表单控件： <input> 、 <textarea> 、 <select> 、 <button>
4. 框架标签： <iframe>

注意：元素早期只分为：行内元素、块级元素，区分条件也只有一条："是否独占一行"，如果按照这种分类方式，行内块元素应该算作行内元素。

相关文章：

CSS 元素的显示模式（块元素，行内元素，行内块元素）

一. 块元素&#xff08;block&#xff09; 又称&#xff1a;块级元素 特点&#xff1a; 1. 在页面中独占一行&#xff0c;不会与任何元素共用一行&#xff0c;是从上到下排列的。 2. 默认宽度&#xff1a;撑满父元素。 3. 默认高度&#xff1a;由内容撑开。 4. 可以通过 CSS 设…...

编程日记 2025/6/2 8:31:53

鸿蒙UI开发——键盘弹出避让模式设置

1、概 述 我们在鸿蒙开发时&#xff0c;不免会遇到用户输入场景&#xff0c;当用户准备输入时&#xff0c;会涉及到输入法的弹出&#xff0c;我们的界面针对输入法的弹出有两种避让模式&#xff1a;上抬模式、压缩模式。 下面针对输入法的两种避让模式的设置做简单介绍。 2、…...

编程日记 2025/6/4 3:24:10

Multi-Agent如何设计

文章小结 研究背景和目的 在单一大语言模型长期主导人工智能领域的背景下&#xff0c;多智能体系统在对话任务解决中逐渐崭露头角。 虽然先前的研究已经展示了多智能体系统在推理任务和创造性工作中的潜力&#xff0c;但对于其在对话范式方面的局限性以及单个智能体的影响&am…...

编程日记 2025/6/1 3:42:04

git操作（bitbucket仓库）

在代码远程版本控制和提交过程中需要经常使用git命令&#xff0c;熟练使用git是一个软件工程师必备的技能之一。 将主版本代码fork到自己的 bitbucket 子仓库中 克隆到本地 利用ssh链接进行克隆&#xff0c;将 fork 的子仓库克隆到本地。 git clone ssh://{$你fork的子bitbu…...

编程日记 2025/6/2 7:46:49

【MySQL | 三、 表的约束介绍】

举例表结构 字段名称字段类型是否NULL键值默认值附加信息FieldTypeNullKeyDefaultExtraidintNoUNI(唯一键&#xff09;Nullauto_incrementnameverchar(10)NoPRI(主键)NullgenderenumNomanagetinyintYesNulltelphoneintYesNullhome_idintyesMUL(外键)Null 目录 举例表结构1. 空…...

编程日记 2025/6/2 12:50:11

音频DSP的发展历史

音频数字信号处理&#xff08;DSP&#xff09;的发展历史是电子技术、计算机科学和音频工程共同进步的结果。这个领域的进展不仅改变了音乐制作、音频后期制作和通信的方式&#xff0c;也影响了音频设备的设计和功能。以下是对音频DSP发展历史的概述&#xff1a; 早期概念和理论…...

编程日记 2025/5/30 19:42:45

学习笔记-Kotlin

准备工作 下载安装kotlin编译器,记录此笔记时的版本是v1.2.10&#xff0c;目前最新发布版本是v2.1.10解压下载的安装包,配置环境变量指向bin目录(官方指导). 如果不想在本地安装环境,也可以使用在线编辑器 尝试编写第一个helloWorld 新建一个名为hello.kt的文件,内容如下: f…...

编程日记 2025/6/1 10:41:00

linux解压命令（可整理到CSDN）

1. tar -xvf ffmpeg-7.0.2.tar.xz x&#xff1a;表示解压文件。 v&#xff1a;表示在解压过程中显示文件&#xff08;verbose模式&#xff09;。这个选项是可选的&#xff0c;加上它可以让你看到正在解压的文件列表&#xff0c;但如果不加也不会影响解压过程。 f&#xff1a;…...

编程日记 2025/6/1 20:57:48

Boost Asio TCP异步服务端和客户端

服务端 消息分两次发送&#xff0c;第一次发送head&#xff0c;第二次发送body。接收也是先接收head&#xff0c;然后通过head结构中的body长度字段再接收body。 TcpServer.h #pragma once #include <atomic> #include <vector> #include <unordered_set> #…...

编程日记 2025/5/28 8:04:07

【Apache Doris】周FAQ集锦：第 29 期

引言 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户和开发者分享有关 Apache Doris 的常见问题。 通过这个每周 FAQ 栏目&#xff0c;希望帮助社…...

编程日记 2025/6/4 1:50:06

速通Docker === 介绍与安装

目录 Docker介绍 Docker优势 Docker组件 Docker CLI (命令行接口) Docker Host (Docker 守护进程) 容器 (Container) 镜像 (Image) 仓库 (Registry) 关系总结 应用程序部署方式 传统部署 (Traditional Deployment) 虚拟化部署 (Virtualization Deployment) 容器部署…...

编程日记 2025/6/3 17:47:51

云平台一键部署【Video-Background-Removal】视频换背景，无任何限制，随意换

Video-Background-Removal 是一款革命性的视频背景替换工具&#xff0c;旨在让用户轻松实现视频背景的快速更换。无论你是专业创作者还是普通用户&#xff0c;这款软件都能让你在几秒钟内改变背景&#xff0c;完全消除限制&#xff0c;随心所欲&#xff0c;随时随地想换就换&am…...

编程日记 2025/5/27 13:34:32

AI刷题-最大矩形面积问题、小M的数组变换

目录 一、最大矩形面积问题 问题描述 输入格式 输出格式 输入样例 输出样例 数据范围 解题思路&#xff1a; 问题理解 数据结构选择 算法步骤 最终代码&#xff1a; 运行结果&#xff1a; 二、小M的数组变换 问题描述 测试样例 解题思路&#xff1a; 问题…...

编程日记 2025/6/3 0:42:48

ts类型断言各种写法

在 TypeScript 中&#xff0c;类型断言&#xff08;Type Assertion&#xff09;有两种主要的写法&#xff1a;**尖括号语法** (<Type>) 和 **as 关键字语法**。这两种方式都可以用来告诉编译器某个表达式的具体类型&#xff0c;但它们在不同的上下文中有各自的适用性和局…...

编程日记 2025/6/2 19:33:49

第十二章：算法与程序设计

文章目录&#xff1a; 一&#xff1a;基本概念 1.算法与程序 1.1 算法 1.2 程序 2.编译预处理 3.面向对象技术 4.程序设计方法 5.SOP标志作业流程 6.工具 6.1 自然语言 6.2 流程图 6.3 N/S图 6.4 伪代码 6.5 计算机语言 二&#xff1a;程序设计 基础 1.常数 …...

编程日记 2025/6/4 9:41:58

计算机网络 | IP地址、子网掩码、网络地址、主机地址计算方式详解

关注&#xff1a;CodingTechWork 引言 在计算机网络中&#xff0c;IP地址、子网掩码和网络地址是构建网络通信的基本元素。无论是企业网络架构、互联网连接&#xff0c;还是局域网&#xff08;LAN&#xff09;配置&#xff0c;它们都起着至关重要的作用。理解它们的工作原理&a…...

编程日记 2025/6/4 9:44:06

一文读懂高频考题！进程、线程、协程最全方位对比剖析

一、基本概念 （一）定义与特征 进程 在计算机科学里，进程是操作系统正在运行的程序的实例，是资源分配的基本单位。就好比每个进程都像一个小王国，它有自己独立的领土，这里的领土就是内存空间、代码块、数据和文件句柄等资源。比如说，你在电脑上同时打开一个文字处理软件…...

编程日记 2025/6/4 9:43:17

Elasticsearch搜索引擎(二)

RestClient 基础 前言一、RestAPI1. 初始化 *RestClient*2. 创建索引库3. 删除索引库4. 判断索引库是否存在 二、RestClient操作文档1.新增文档2.查询文档3. 删除文档4. 修改文档5. 批量导入文档 前言 ES官方提供了各种不同语言的客户端用来操作ES&#xff0c;这些客户端的本质…...

编程日记 2025/6/4 9:43:51

docker 部署 Kafka 单机和集群

一、准备工作 安装 Docker 确保本机已安装 Docker。可以通过以下命令检查 Docker 是否已安装&#xff1a;docker --version如果未安装&#xff0c;可以访问 Docker 官网下载并安装 Docker Desktop&#xff08;Windows 和 Mac&#xff09;或使用包管理器安装&#xff08;Linux&…...

编程日记 2025/6/4 9:42:14

新增文章分类功能

总说 过程参考黑马程序员SpringBoot3Vue3全套视频教程&#xff0c;springbootvue企业级全栈开发从基础、实战到面试一套通关_哔哩哔哩_bilibili 目录 总说 一、功能实现 1.1 Controller层 1.2 Service层 1.3 Impl层 1.4 Mapper层 1.5 测试接口 二、优化 2.1 2.2 一、…...

编程日记 2025/6/4 8:17:24

[c语言日寄]精英怪：三子棋（tic-tac-toe）3命慢通[附免费源码]

哈喽盆友们&#xff0c;今天带来《c语言》游戏中[三子棋boss]速通教程&#xff01;我们的目标是一边编写博文&#xff0c;一边快速用c语言实现三子棋游戏。准备好瓜子&#xff0c;我们计时开始&#xff01; 前期规划 在速通中&#xff0c;我们必须要有清晰的前期规划&#xf…...

编程日记 2025/6/4 9:43:33

【Rust自学】12.1. 接收命令行参数

12.1.0. 写在正文之前 第12章要做一个实例的项目——一个命令行程序。这个程序是一个grep(Global Regular Expression Print)&#xff0c;是一个全局正则搜索和输出的工具。它的功能是在指定的文件中搜索出指定的文字。 这个项目分为这么几步&#xff1a; 接收命令行参数&am…...

编程日记 2025/6/4 9:42:30

Qt应用之MDI（多文档设计）

qt creator 版本6.8.0 MinGW 64bit 由此模块可以扩展成设计一个qt文本编辑器。 界面如下 部分功能展示如下 新建文件 打开文件 mdi模式、级联模式和平铺模式 界面和程序构建过程。 1.如图所需.cpp和.h文件 2.mainwindow.ui和tformdoc.ui界面布局如下 不懂什么是Action如何…...

编程日记 2025/6/4 9:43:01

使用FFmpeg和Python将短视频转换为GIF的使用指南

使用FFmpeg和Python将短视频转换为GIF的使用指南 在数字时代&#xff0c;GIF动图已成为表达情感和分享幽默的重要媒介。无论是社交媒体上的搞笑片段还是创意项目中的视觉效果&#xff0c;GIF都能迅速抓住观众的注意力。然而&#xff0c;很多人不知道如何将短视频转换为GIF。本…...

编程日记 2025/6/3 8:37:06

Qt 各版本选择

嵌入式推荐用 Qt4.8&#xff0c;打包的程序小&#xff1a;Qt4.8.7是Qt4的终结版本&#xff0c;是Qt4系列版本中最稳定最经典的 最后支持xp系统的长期支持版本&#xff1a;Qt5.6.3&#xff1b;Qt5.7.0是最后支持xp系统的非长期支持版本。 最后提供mysql数据库插件的版本&#xf…...

编程日记 2025/6/3 10:14:06

Web基础-分层解耦

思考&#xff1a;什么是耦合&#xff1f;什么是内聚&#xff1f;软件设计原则是什么&#xff1f; 耦合&#xff1a;衡量软件中各个层 / 各个模块的依赖关联程度。 内聚&#xff1a;软件中各个功能模块内部的功能联系。 软件设计原则&#xff1a;高内聚低耦合。 那我们该如何实现…...

编程日记 2025/5/29 4:41:41

G1原理—8.如何优化G1中的YGC

大纲 1.5千QPS的数据报表系统发生性能抖动的优化(停顿时间太小导致新生代上不去) 2.由于产生大量大对象导致系统吞吐量降低的优化(大对象太多频繁Mixed GC) 3.YGC其他相关参数优化之TLAB参数优化 4.YGC其他相关参数优化之RSet、PLAB和大对象的处理优化 1.5千QPS的数据报表系…...

编程日记 2025/6/3 4:04:08

Hugging Face 的 Trainer类用法

一、使用方法 Hugging Face 的 Trainer 类是一个高级API&#xff0c;用于简化训练、评估和预测的流程。以下是如何使用 Trainer 类的基本步骤&#xff1a; 1. 导入必要的类和函数 首先&#xff0c;您需要导入 Trainer 类以及其他可能需要的类或函数。 from transformers im…...

编程日记 2025/5/30 3:13:21

RabbitMQ前置概念

文章目录 1.AMQP协议是什么&#xff1f;2.rabbitmq端口介绍3.消息队列的作用和使用场景4.rabbitmq工作原理5.整体架构核心概念6.使用7.消费者消息推送限制&#xff08;work模型&#xff09;8.fanout交换机9.Direct交换机10.Topic交换机&#xff08;推荐&#xff09;11.声明队列…...

编程日记 2025/6/1 18:11:35

IDEA2023版中TODO的使用

介绍&#xff1a;TODO其实本质上还是注释&#xff0c;只不过加上了TODO这几个字符&#xff0c;可以让使用者快速找到。 注意&#xff1a;在类、接口等文件中&#xff0c;注释是使用// 即&#xff1a;// TODO 注释内容 在配置文件中&#xff0c;注释是使用# 即&#xff1a;# TO…...

编程日记 2025/6/4 4:12:29

（STM32笔记）十二、DMA的基础知识与用法 第二部分

我用的是正点的STM32F103来进行学习&#xff0c;板子和教程是野火的指南者。 之后的这个系列笔记开头未标明的话&#xff0c;用的也是这个板子和教程。 DMA的基础知识与用法 二、DMA传输设置1、数据来源与数据去向外设到存储器存储器到外设存储器到存储器 2、每次传输大小3、传…...

编程日记 2025/6/4 16:46:31

windows系统“GameInputRedist.dll”文件丢失或错误导致游戏运行异常如何解决？windows系统DLL文件修复方法

GameInputRedist.dll是存放在windows系统中的一个重要dll文件&#xff0c;缺少它可能会造成部分游戏不能正常运行。当你的电脑弹出提示“无法找到GameInputRedist.dll”或“计算机缺少GameInputRedist.dll”等错误问题&#xff0c;请不用担心&#xff0c;我们将深入解析DLL文件…...

编程日记 2025/6/4 1:35:55

使用分割 Mask 和 K-means 聚类获取天空的颜色

引言 在计算机视觉领域&#xff0c;获取天空的颜色是一个常见任务&#xff0c;广泛应用于天气分析、环境感知和图像增强等场景。本篇博客将介绍如何通过已知的天空区域 Mask 提取天空像素&#xff0c;并使用 K-means 聚类分析天空颜色&#xff0c;最终根据颜色占比查表得到主导…...

编程日记 2025/6/3 18:49:36

UML系列之Rational Rose笔记四：时序图（顺序图_序列图）

时序图有很多画法&#xff0c;这基本上能算rose里面要求最乱的一种图了&#xff1b;有些人的需求是BCE模式&#xff0c;这是正常规范点的&#xff0c;有些人就不需要&#xff0c;有些需要用数据库交互&#xff0c;有些不需要&#xff1b;没有一个较为统一的需求&#xff1b;在此…...

编程日记 2025/6/3 23:28:21

nginx反向代理http 和 https(案例)

说明&#xff1a;在香港开了一台虚拟机&#xff0c;主要用于将来自国外访问的80和443代理到大陆IDC机房 (1) 定义80和443的upstream 211.155.82.174 是keepalive中VIP对应的公网IP&#xff08;在国内访问www.playyx.com解析到211.155.82.174&#xff09; upstream new_server…...

编程日记 2025/6/2 20:58:49

Dify应用-工作流

目录 DIFY 工作流参考 DIFY 工作流 2025-1-15 老规矩感谢参考文章的作者,避免走弯路。 2025-1-15 方便容易上手 在dify的一个桌面上,添加多个节点来完成一个任务。 每个工作流必须有一个开始和结束节点。 节点之间用线连接即可。 每个节点可以有输入和输出 输出类型有,字符串,…...

编程日记 2025/5/30 8:42:26

装备制造业：建立项目“四算”管理：以合同为源头，以项目为手段实现合同的测算、预算、核算与决算的管控体系

尊敬的各位管理层&#xff1a; 大家好&#xff01;作为装备制造业的 CFO&#xff0c;我今天要向大家汇报的是如何建立项目“四算”管理&#xff0c;即以合同为源头&#xff0c;以项目为手段实现合同的测算、预算、核算与决算的管控体系。在当前市场竞争激烈、成本压力不断增大…...

编程日记 2025/6/2 21:00:08

Centos7将/dev/mapper/centos-home磁盘空间转移到/dev/mapper/centos-root

1、查看存储 df -h文件系统 容量 已用 可用 已用% 挂载点 devtmpfs 126G 0 126G 0% /dev tmpfs 126G 0 126G 0% /dev/shm tmpfs 126G 19M 126G 1% /run tmpfs …...

编程日记 2025/5/31 19:17:01

docker 部署 MantisBT

1. docker 安装MantisBT docker pull vimagick/mantisbt:latest 2.先运行实例&#xff0c;复制配置文件 docker run -p 8084:80 --name mantisbt -d vimagick/mantisbt:latest 3. 复制所需要配置文件到本地路径 docker cp mantisbt:/var/www/html/config/config_inc.php.…...

编程日记 2025/6/2 20:59:05

【Vue - Element 】实现表单输入框的远程搜索功能

需求 表单是一个常见的元素&#xff0c;而在表单中&#xff0c;常常需要用户从大量的数据中选择一个或多个选项。 为了提高用户体验&#xff0c;提供远程搜索功能可以帮助用户快速找到所需的选项&#xff0c;而不是从冗长的下拉列表中手动查找。 以该需求为例&#xff0c;我…...

编程日记 2025/6/2 8:04:37

学习华为熵减：激发组织活力（系列之三）

目录 为什么学习华为&#xff1f; 学习华为什么&#xff1f; 一、势&#xff1a;顺势而为&#xff0c;在风口上猪都会飞起来。 二、道&#xff1a;就是认识和利用规律层面&#xff0c;文化和制度创新就是企业经营之道。 三、法&#xff1a;就是一套价值管理的变革方法论。…...

编程日记 2025/6/2 8:09:10

多种vue前端框架介绍

学如逆水行舟&#xff0c;不进则退。 在现今的软件开发领域&#xff0c;Vue.js凭借其高效、灵活和易于上手的特性&#xff0c;成为了前端开发的热门选择。对于需要快速搭建企业级后台管理系统的开发者而言&#xff0c;使用现成的Vue后台管理系统模板无疑是一个明智之举。 本文…...

编程日记 2025/6/2 20:59:21

C语言重点回顾（持续更新中~）

个人见解&#xff0c;有异议可以留言~ 第一讲&#xff1a;初识C语言 目录 1.编译和链接 2.main函数 3.库函数 4.关键字 5.字符和字符串 6.转义字符 1.编译和链接 初始的C语言源代码是一个文本文件&#xff0c;要想将一个文本文件变成一个执行文件&#xff0c;需要经过编…...

编程日记 2025/6/2 19:33:57

Navicat Premium 原生支持阿里云 PolarDB 数据库

近日&#xff0c;我司旗下的 Navicat Premium 软件通过了阿里云 PolarDB 数据库产品生态集成认证&#xff0c;这标志着 Navicat 通过原生技术全面实现了对秒级弹性、高性价比、稳定可靠的PolarDB 数据库三大引擎&#xff08;PolarDB MySQL版、PolarDB PostgreSQL版和 PolarDB f…...

编程日记 2025/6/4 8:53:03

青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据

青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据 一、UI数据二、Element Plus处理响应式数据三、Vuetify处理响应式数据 课题摘要:本文探讨了UI数据在用户界面中的重要性和处理方法。UI数据包括展示数据、用户输入、状态数据等&#xff0c;对用户体验和应用交互性有直…...

编程日记 2025/6/2 23:48:58

用css和html制作太极图

目录 css相关参数介绍 边距 边框 伪元素选择器 太极图案例实现、 代码 效果 css相关参数介绍 边距 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: …...

编程日记 2025/6/4 17:19:08

软件测试入门—功能需求分析：以一个旅游管理系统为例

在软件测试的旅程中&#xff0c;功能需求分析是测试人员构建高质量测试用例的基础&#xff0c;它确保软件的各项功能都能按照预期正常运行。接下来&#xff0c;我们将以一个旅游管理系统为例&#xff0c;详细阐述如何进行功能需求分析&#xff0c;帮助大家更清晰地掌握这一重要…...

编程日记 2025/6/2 23:50:02

深度解析Linux中关于操作系统的知识点

操作系统概述与核心概念 任何计算机系统都包含一个基本的程序集合&#xff0c;成为操作系统OS 操作系统是一款进行软硬件管理的软件 操作系统包括&#xff1a; 内核&#xff08;进程管理&#xff0c;内存管理&#xff0c;驱动管理&#xff09; 其他程序&#xff08;例如数据…...

编程日记 2025/6/2 23:50:34

【深度学习】关键技术-激活函数（Activation Functions）

激活函数&#xff08;Activation Functions&#xff09; 激活函数是神经网络的重要组成部分&#xff0c;它的作用是将神经元的输入信号映射到输出信号&#xff0c;同时引入非线性特性&#xff0c;使神经网络能够处理复杂问题。以下是常见激活函数的种类、公式、图形特点及其应…...

编程日记 2025/6/2 23:49:31

分布式ID的实现方案

1. 什么是分布式ID ​ 对于低访问量的系统来说&#xff0c;无需对数据库进行分库分表&#xff0c;单库单表完全可以应对&#xff0c;但是随着系统访问量的上升&#xff0c;单表单库的访问压力逐渐增大&#xff0c;这时候就需要采用分库分表的方案&#xff0c;来缓解压力。 ​…...

编程日记 2025/6/2 7:46:00