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

CSS之元素转换

news 2026/5/17 1:21:52

我想大家在写代码时有一个疑问，块级元素可以转换成其他元素吗？
让我为大家介绍一下元素转换

1.display:block(转换成块元素)

display：block可以把我们的行内元素或者行内块元素转换成块元素
接下来让我为大家演示一下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>span {display: block;/* 转换成块元素 *//* 块元素可以设置宽高,独占一行 */width: 100px;height: 100px;background-color: orange;}</style>
</head>
<body><!-- span行内元素，没加display:block之前是在一行显示，不能设置宽高 --><span>1</span><span>2</span>
</body>
</html>

这是没加display:block；之前的效果：
在这里插入图片描述
这是加display:block；之后的效果：
在这里插入图片描述

扩展一下:
display:block可以与display:none一起使用，可以达到显示与隐藏的效果

2.display:inline(转换成行内元素)

display:inline;可以把元素转换成行内块元素
众所周知div是一个块元素，是独占一行显示的，我们给他加上inline会发生什么呢

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>div {display: inline;/* 转换成行内元素 *//* 宽高失效 */width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div>我是要被转换成行内元素的块元素1</div><div>我是要被转换成行内元素的块元素2</div>
</body>
</html>

效果图：
在这里插入图片描述

3.display:inline-block(转换成行内块元素)

display：inline-block可以把元素转换成行内块元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>div {display: inline-block;/* 转换成行内块元素 *//* 行内块元素可以设置宽高,在一行中显示 */width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div>我是要被转换成行内块元素的块元素1</div><div>我是要被转换成行内块元素的块元素2</div>
</body>
</html>

效果图：
在这里插入图片描述
感谢大家的阅读，本人文笔有限，如有什么错误的地方，可以跟我提出，感谢大家！

相关文章：

CSS之元素转换

我想大家在写代码时有一个疑问&#xff0c;块级元素可以转换成其他元素吗&#xff1f; 让我为大家介绍一下元素转换 1.display:block(转换成块元素) display&#xff1a;block可以把我们的行内元素或者行内块元素转换成块元素 接下来让我为大家演示一下&#xff1a; <!DO…...

编程日记 2024/1/2 2:52:25

自激振荡电路笔记 电弧打火机

三极管相关 三极管的形象描述 二极管 简单求解&#xff08;理想&#xff09; 优先导通&#xff08;理想&#xff09; 恒压降 稳压管&#xff08;二极管plus&#xff09; 基础工作模块 理想稳压管的工作特性 晶体管之三极管(“两个二极管的组合” ) 电弧打火机电路 1.闭合开…...

编程日记 2024/1/2 2:50:23

Linux su 命令

Linux su&#xff08;英文全拼&#xff1a;switch user&#xff09;命令用于变更为其他使用者的身份&#xff0c;除 root 外&#xff0c;需要键入该使用者的密码。 使用权限&#xff1a;所有使用者。 语法 su [-fmp] [-c command] [-s shell] [--help] [--version] [-] [USE…...

编程日记 2024/1/2 2:49:22

论文阅读: AAAI 2022行人重识别方向论文-PFD_Net

本篇博客用于记录一篇行人重识别方向的论文所提出的优化方法《Pose-Guided Feature Disentangling for Occluded Person Re-identification Based on Transformer》&#xff0c;论文中提出的PDF_Net模型的backbone是采用《TransReID: Transformer-based Object Re-Identificati…...

编程日记 2024/1/2 2:47:21

蓝牙物联网灯控设计方案

蓝牙技术是当前应用最广泛的无线通信技术之一&#xff0c;工作在全球通用的 2.4GHZ 的ISM 频段。蓝牙的工作距离约为 100 米&#xff0c;具有一定的穿透性&#xff0c;没有方向限制。具有低成本、抗干扰能力强、传输质量高、低功耗等特点。蓝牙技术组网比较简单&#xff0c;无需…...

编程日记 2024/1/2 2:44:17

Codeforces Round 900 (Div. 3)(A-F)

比赛链接 : Dashboard - Codeforces Round 900 (Div. 3) - Codeforces A. How Much Does Daytona Cost? 题面 : 思路 : 在序列中只要找到k&#xff0c;就返回true ; 代码 : #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0)…...

编程日记 2024/1/2 2:37:11

vue大屏-列表自动滚动vue-seamless-scroll

vue大屏-列表自动滚动vue-seamless-scroll vue-seamless-scroll的官方文档地址&#xff1a;https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/ 具体效果可到官方文档那里查看。 1、下载依赖 npm install vue-seamless-scroll --save2、使用例子 <template…...

编程日记 2024/1/2 2:36:10

easyx的窗口函数

文章目录 前言一、EasyX的颜色二、EasyX的坐标和设备1&#xff0c;EasyX的坐标2&#xff0c;EasyX的设备 三、窗口函数1&#xff0c;初始化窗口函数2&#xff0c;关闭绘图窗口3&#xff0c;设置窗口背景板颜色4&#xff0c;清空绘图设备 前言 easyx是针对c的图形库&#xff0c;…...

编程日记 2024/1/2 2:35:09

【记录】开始学习网络安全

本文持续更新学习进度 背景 在私企干了5年虚拟化、云原生相关的运维&#xff0c;学到了很多&#xff0c;但不成体系。老板是清华毕业法国留学在德勤干过&#xff0c;最后回国创业的野路子。我工作是为了更好的生活&#xff0c;我挺担心老板因为家庭变故或者炒个原油宝&#x…...

编程日记 2024/1/2 2:33:07

【Java EE初阶三 】线程的状态与安全（下）

3. 线程安全 线程安全&#xff1a;某个代码&#xff0c;不管它是单个线程执行&#xff0c;还是多个线程执行&#xff0c;都不会产生bug&#xff0c;这个情况就成为“线程安全”。 线程不安全&#xff1a;某个代码&#xff0c;它单个线程执行&#xff0c;不会产生bug&#xff0c…...

编程日记 2024/1/2 2:32:07

MD5算法

一、引言 MD5&#xff08;Message-Digest Algorithm 5&#xff09;是一种广泛应用的密码散列算法&#xff0c;由Ronald L. Rivest于1991年提出。MD5算法主要用于对任意长度的消息进行加密&#xff0c;将消息压缩成固定长度的摘要&#xff08;通常为128位&#xff09;。在密码学…...

编程日记 2024/1/2 2:31:06

Postman使用

Postman使用 Pre-request Script 参考&#xff1a; Scripting in Postman 可以请求、集合或文件夹中添加Pre-request Script&#xff0c;在请求运行之前执行JavaScript 如设置变量值、参数、Header和正文数据&#xff0c;也可以使用Pre-request Script来调试代码&#xff0…...

编程日记 2024/1/2 2:30:04

【python 的各种模块】(8) 在python使用matplotlib和wordcloud库来画wordcloud词云图

目录 目标&#xff1a;用python画出&#xff0c;网上流行的wordcloud词云图 1 准备工作 1.1环境准备 1.1.1安装步骤 1.2 资源准备 1.2.1 文本文件内容如下 1.2.2 图片资源 2 代码测试 2.1 第一版代码和效果 2.1.1 代码和效果 2.1.2 一般plt里解决中文乱码问题 2.1…...

编程日记 2024/1/2 2:26:01

MFC随对话框大小改变同时改变控件大小

先看一下效果； 初始； 窗口变大，控件也变大； 二个也可以； 窗口变大，控件变大； 默认生成的对话框没有WM_SIZE消息的处理程序；打开类向导，选中WM_SIZE消息，对CxxxDlg类添加该消息的处理程序；默认生成的函数名是OnSize； 添加了以后代码中会有三处变化； 在对话框类的…...

编程日记 2024/1/2 2:25:00

MK米客方德品牌 SD NAND在对讲机领域的引领作用

SD NAND在对讲机上的应用 SD NAND在对讲机上广泛应用&#xff0c;为其提供了高效可靠的存储解决方案。 这种存储技术不仅能容纳大量语音和数据文件&#xff0c;而且具有高速读取的特点&#xff0c;保障了实时通信的质量。SD NAND还注重安全性&#xff0c;通过数据加密和访问控…...

编程日记 2024/1/2 2:23:59

软件测试/测试开发丨Python 封装 学习笔记

封装的概念 封装&#xff08;Encapsulation&#xff09; 隐藏&#xff1a;属性和实现细节&#xff0c;不允许外部直接访问暴露&#xff1a;公开方法&#xff0c;实现对内部信息的操作和访问 封装的作用 限制安全的访问和操作&#xff0c;提高数据安全性可进行数据检查&#x…...

编程日记 2024/1/2 2:19:55

Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性

目录 事件修饰符 阻止默认事件 阻止冒泡 允许触发一次 捕获模式 self passive 键盘事件 keyup & keydown 按键别名 注意tab 注意系统按键 自定义按键 鼠标事件 简介 鼠标焦点事件 计算属性 差值语法实现 methods实现 computed实现 get() set() 总…...

编程日记 2024/1/2 2:18:54

【ROS2】MOMO的鱼香ROS2（四）ROS2入门篇——ROS2节点通信之话题与服务

ROS2节点通信之话题与服务点 引言1 理解从通信开始1.1 TCP&#xff08;传输控制协议&#xff09;1.2 UDP&#xff08;用户数据报协议&#xff09;1.3 基于共享内存的IPC方式 2 ROS2话题2.1 ROS2话题指令2.2 话题之RCLPY实现2.2.1 编写发布者2.2 2 编写订阅者2.2.3 运行测试 3 R…...

编程日记 2024/1/2 2:14:51

2022年山东省职业院校技能大赛高职组云计算赛项试卷第三场-公有云

2022年山东省职业院校技能大赛高职组云计算赛项试卷 目录 2022年职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 【任务1】公有云服务搭建[10分] 【适用平台】华为云 【题目1】私有网络管理[0.5分] 【题目2】云实例管理[0.5分] 【题目3】数…...

编程日记 2024/1/2 2:11:48

现代 NLP：详细概述，第 1 部分：transformer

阿比吉特罗伊 一、说明...

编程日记 2024/1/2 2:10:47

Svelte动态光标实现：状态驱动与Spring动画的交互设计

1. 项目概述&#xff1a;一个会“思考”的鼠标指针如果你在开发一个需要高度沉浸感和交互反馈的Web应用&#xff0c;比如一个设计工具、一个游戏界面&#xff0c;或者一个希望用户能“感受”到页面元素质感的网站&#xff0c;那么一个静态的、系统默认的鼠标指针就显得有些格格…...

编程新知 2026/5/17 0:43:55

AI教材生成新趋势！低查重AI工具，让教材编写不再困难！

教材创作与AI工具助力 教材初稿终于写好了&#xff0c;然而修改和优化的过程却像是一场“折磨”&#xff01;逐字逐句地检查逻辑错误和知识点不准确的地方&#xff0c;真的是耗费了不少时间&#xff1b;调整一个章节的结构&#xff0c;就会影响到后面好多部分&#xff0c;修改…...

编程新知 2026/5/16 23:03:36

别再让电机乱转了！手把手教你用STM32的TIM3和L298N实现精准PWM调速（附完整工程源码）

STM32与L298N电机控制实战&#xff1a;从原理到精准调速的完整指南 在智能小车、机械臂或自动化设备开发中&#xff0c;直流电机控制是最基础却最容易出问题的环节。很多初学者在第一次连接STM32和L298N驱动模块时&#xff0c;都会遇到电机不转、乱转或速度不稳的情况。本文将彻…...

编程新知 2026/5/16 22:59:34

可穿戴智能服饰制作：NeoPixel灯带与Circuit Playground的集成实践

1. 项目概述&#xff1a;当可穿戴电子遇上创意服饰如果你和我一样&#xff0c;既着迷于微控制器上跑起的第一行代码&#xff0c;又无法抗拒布料、针线和那些闪闪发光的小玩意儿&#xff0c;那么这个项目就是为你准备的。将NeoPixel灯带和Circuit Playground微控制器“缝”进一件…...

编程新知 2026/5/16 22:24:29

STM32移植U8g2库驱动OLED：源码精简与硬件适配实战

1. 项目概述与核心思路之前玩ESP8266的时候&#xff0c;在Arduino环境下用U8g2库驱动OLED&#xff0c;画点线面、显示文字&#xff0c;确实方便。但很多实际项目&#xff0c;尤其是对成本、功耗有要求的&#xff0c;还是绕不开STM32这类更纯粹的MCU。最近有个小项目&#xff0c…...

编程新知 2026/5/16 21:58:07

MATLAB bandpass函数实战：用音乐合成和滤波案例，5分钟搞懂信号处理核心参数

MATLAB bandpass函数实战&#xff1a;从音乐合成到精准滤波的完整指南 1. 用MATLAB合成你的第一段数字音乐 在开始滤波之前&#xff0c;让我们先创造一段属于自己的数字音乐。这个过程中&#xff0c;你会理解声音信号在数字世界中的本质——它不过是一串随时间变化的数字序列。…...

编程新知 2026/5/16 21:35:02

为什么Delorean是Python时间处理的最佳选择？

为什么Delorean是Python时间处理的最佳选择&#xff1f; 【免费下载链接】delorean Delorean: Time Travel Made Easy 项目地址: https://gitcode.com/gh_mirrors/de/delorean 在Python开发中&#xff0c;时间处理常常是一个令人头疼的问题&#xff0c;尤其是涉及到时区…...

编程新知 2026/5/16 21:26:40

taskwarrior-tui键盘绑定完全手册：成为效率达人的秘密武器

taskwarrior-tui键盘绑定完全手册&#xff1a;成为效率达人的秘密武器 【免费下载链接】taskwarrior-tui taskwarrior-tui: A terminal user interface for taskwarrior 项目地址: https://gitcode.com/gh_mirrors/ta/taskwarrior-tui taskwarrior-tui是一款功能强大的终…...

编程新知 2026/5/16 21:24:39

微信小程序wx.navigateTo传参实战：从基础到动态数据绑定

1. 微信小程序页面跳转基础入门 第一次接触微信小程序开发时&#xff0c;页面跳转是最基础也最常用的功能之一。wx.navigateTo这个API就像是一座连接不同页面的桥梁&#xff0c;让用户能在小程序的不同功能模块间自由穿梭。想象一下&#xff0c;你正在开发一个电商小程序&…...

编程新知 2026/5/16 20:42:55

地平线X3M平台sensor点亮故障排查实战指南

1. 地平线X3M平台sensor点亮常见问题概述 第一次接触地平线X3M平台的开发者&#xff0c;在点亮sensor时经常会遇到各种"拦路虎"。我刚开始接触这个平台时&#xff0c;光是调试一个imx415 sensor就花了整整三天时间。现在回想起来&#xff0c;大部分问题其实都有规律可…...

编程新知 2026/5/16 19:33:33