CSS之元素转换
我想大家在写代码时有一个疑问,块级元素可以转换成其他元素吗?
让我为大家介绍一下元素转换
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之元素转换
我想大家在写代码时有一个疑问,块级元素可以转换成其他元素吗? 让我为大家介绍一下元素转换 1.display:block(转换成块元素) display:block可以把我们的行内元素或者行内块元素转换成块元素 接下来让我为大家演示一下: <!DO…...
自激振荡电路笔记 电弧打火机
三极管相关 三极管的形象描述 二极管 简单求解(理想) 优先导通(理想) 恒压降 稳压管(二极管plus) 基础工作模块 理想稳压管的工作特性 晶体管之三极管(“两个二极管的组合” ) 电弧打火机电路 1.闭合开…...
Linux su 命令
Linux su(英文全拼:switch user)命令用于变更为其他使用者的身份,除 root 外,需要键入该使用者的密码。 使用权限:所有使用者。 语法 su [-fmp] [-c command] [-s shell] [--help] [--version] [-] [USE…...
论文阅读: AAAI 2022行人重识别方向论文-PFD_Net
本篇博客用于记录一篇行人重识别方向的论文所提出的优化方法《Pose-Guided Feature Disentangling for Occluded Person Re-identification Based on Transformer》,论文中提出的PDF_Net模型的backbone是采用《TransReID: Transformer-based Object Re-Identificati…...
蓝牙物联网灯控设计方案
蓝牙技术是当前应用最广泛的无线通信技术之一,工作在全球通用的 2.4GHZ 的ISM 频段。蓝牙的工作距离约为 100 米,具有一定的穿透性,没有方向限制。具有低成本、抗干扰能力强、传输质量高、低功耗等特点。蓝牙技术组网比较简单,无需…...
Codeforces Round 900 (Div. 3)(A-F)
比赛链接 : Dashboard - Codeforces Round 900 (Div. 3) - Codeforces A. How Much Does Daytona Cost? 题面 : 思路 : 在序列中只要找到k,就返回true ; 代码 : #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0)…...
vue大屏-列表自动滚动vue-seamless-scroll
vue大屏-列表自动滚动vue-seamless-scroll vue-seamless-scroll的官方文档地址:https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/ 具体效果可到官方文档那里查看。 1、下载依赖 npm install vue-seamless-scroll --save2、使用例子 <template…...
easyx的窗口函数
文章目录 前言一、EasyX的颜色二、EasyX的坐标和设备1,EasyX的坐标2,EasyX的设备 三、窗口函数1,初始化窗口函数2,关闭绘图窗口3,设置窗口背景板颜色4,清空绘图设备 前言 easyx是针对c的图形库,…...
【记录】开始学习网络安全
本文持续更新学习进度 背景 在私企干了5年虚拟化、云原生相关的运维,学到了很多,但不成体系。老板是清华毕业法国留学在德勤干过,最后回国创业的野路子。我工作是为了更好的生活,我挺担心老板因为家庭变故或者炒个原油宝&#x…...
【Java EE初阶三 】线程的状态与安全(下)
3. 线程安全 线程安全:某个代码,不管它是单个线程执行,还是多个线程执行,都不会产生bug,这个情况就成为“线程安全”。 线程不安全:某个代码,它单个线程执行,不会产生bug,…...
MD5算法
一、引言 MD5(Message-Digest Algorithm 5)是一种广泛应用的密码散列算法,由Ronald L. Rivest于1991年提出。MD5算法主要用于对任意长度的消息进行加密,将消息压缩成固定长度的摘要(通常为128位)。在密码学…...
Postman使用
Postman使用 Pre-request Script 参考: Scripting in Postman 可以请求、集合或文件夹中添加Pre-request Script,在请求运行之前执行JavaScript 如设置变量值、参数、Header和正文数据,也可以使用Pre-request Script来调试代码࿰…...
【python 的各种模块】(8) 在python使用matplotlib和wordcloud库来画wordcloud词云图
目录 目标:用python画出,网上流行的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…...
MFC随对话框大小改变同时改变控件大小
先看一下效果; 初始; 窗口变大,控件也变大; 二个也可以; 窗口变大,控件变大; 默认生成的对话框没有WM_SIZE消息的处理程序;打开类向导,选中WM_SIZE消息,对CxxxDlg类添加该消息的处理程序;默认生成的函数名是OnSize; 添加了以后代码中会有三处变化; 在对话框类的…...
MK米客方德品牌 SD NAND在对讲机领域的引领作用
SD NAND在对讲机上的应用 SD NAND在对讲机上广泛应用,为其提供了高效可靠的存储解决方案。 这种存储技术不仅能容纳大量语音和数据文件,而且具有高速读取的特点,保障了实时通信的质量。SD NAND还注重安全性,通过数据加密和访问控…...
软件测试/测试开发丨Python 封装 学习笔记
封装的概念 封装(Encapsulation) 隐藏:属性和实现细节,不允许外部直接访问暴露:公开方法,实现对内部信息的操作和访问 封装的作用 限制安全的访问和操作,提高数据安全性可进行数据检查&#x…...
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
目录 事件修饰符 阻止默认事件 阻止冒泡 允许触发一次 捕获模式 self passive 键盘事件 keyup & keydown 按键别名 注意tab 注意系统按键 自定义按键 鼠标事件 简介 鼠标焦点事件 计算属性 差值语法实现 methods实现 computed实现 get() set() 总…...
【ROS2】MOMO的鱼香ROS2(四)ROS2入门篇——ROS2节点通信之话题与服务
ROS2节点通信之话题与服务点 引言1 理解从通信开始1.1 TCP(传输控制协议)1.2 UDP(用户数据报协议)1.3 基于共享内存的IPC方式 2 ROS2话题2.1 ROS2话题指令2.2 话题之RCLPY实现2.2.1 编写发布者2.2 2 编写订阅者2.2.3 运行测试 3 R…...
2022年山东省职业院校技能大赛高职组云计算赛项试卷第三场-公有云
2022年山东省职业院校技能大赛高职组云计算赛项试卷 目录 2022年职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 【任务1】公有云服务搭建[10分] 【适用平台】华为云 【题目1】私有网络管理[0.5分] 【题目2】云实例管理[0.5分] 【题目3】数…...
现代 NLP:详细概述,第 1 部分:transformer
阿比吉特罗伊 一、说明...
记一次Mac端mysql重置密码
在执行mysql命令的时候,报如下的错误,表示不支持mysql命令: zsh: command not found: mysql 1. 先查看mysql服务是否存在 在系统偏好设置中查看: 2. 发现mysql服务已经在运行,可能因为/usr/local/bin目录下缺失mysq…...
【开题报告】基于java的流浪之家动物领养网站的设计与开发
1.选题背景 流浪之家动物领养网站的设计与开发背景主要源于对流浪动物保护和宠物领养问题的关注。随着城市化进程加快,越来越多的流浪动物出现在城市中,它们面临着食物、住所和医疗资源的缺乏。同时,许多爱心人士希望能够给流浪动物一个温暖…...
训狗技术从初级到高级,专业有效的训狗训犬教程
一、教程描述 现在大部分人家里都会养些宠物,比如狗狗,虽然狗狗的一些行为习惯跟遗传有关,但是主人后天的影响也会给狗狗带来改变,本套教程教你纠正狗狗的不良行为,可以让你与狗愉快地玩耍。本套训狗教程,…...
如何让机器人具备实时、多模态的触觉感知能力?
人类能够直观地感知和理解复杂的触觉信息,是因为分布在指尖皮肤的皮肤感受器同时接收到不同的触觉刺激,并将触觉信号立即传输到大脑。尽管许多研究小组试图模仿人类皮肤的结构和功能,但在一个系统内实现类似人类的触觉感知过程仍然是一个挑战…...
datax
DataX DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL、SQL Server、Oracle、PostgreSQL、HDFS、Hive、HBase、OTS、ODPS 等各种异构数据源之间高效的数据同步功能。 https://github.com/alibaba/DataX Features DataX本身作为数据同…...
【Java】SpringBoot快速整合WebSocket实现客户端服务端相互推送信息
目录 什么是webSocket? webSocket可以用来做什么? WebSocket操作类 一:测试客户端向服务端推送消息 1.启动SpringBoot项目 2.打开网站 3.进行测试消息推送 4.后端进行查看测试结果 二:测试服务端向客户端推送消息 1.接口代码 2.使…...
C语言 linux文件操作(一)
文章目录 一、linux文件权限1.1文件描述符1.2文件描述符的范围和默认值1.3打开文件和文件描述符1.4标准文件描述符1.5文件描述符的重定向和关闭1.6I/O 操作1.7使用文件描述符进行进程通信1.8资源限制 二、C语言文件读写2.1open 函数2.2 flags参数详解2.3 lseek 函数 一、linux文…...
007、控制流
先看下本篇学习内容: 通过条件来执行 或 重复执行某些代码 是大部分编程语言的基础组成部分。在Rust中用来控制程序执行流的结构主要就是 if表达式 与 循环表达式。 1. if表达式 if表达式允许我们根据条件执行不同的代码分支。我们提供一个条件,并且做出…...
将学习自动化测试时的医药管理信息系统项目用idea运行
将学习自动化测试时的医药管理信息系统项目用idea运行 背景 学习自动化测试的时候老师的运行方式是把医药管理信息系统项目打包成war包后再放到tomcat的webapp中去运行,于是我想着用idea运行会方便点,现在记录下步骤方便以后查找最开始没有查阅资料&am…...
k8s 的YAML文件详解
一、yaml文件简介 Kubernetes只支持YAML和JSON格式创建资源对象,JSON格式用于接口之间消息的传递,适用于开发;YAML格式用于配置和管理,适用于云平台管理,YAML是一种简洁的非标记性语言。 1)yaml的语法规则&…...
【Pytorch】Pytorch或者CUDA版本不符合问题解决与分析
NVIDIA CUDA Toolkit Release Notes Package installation issues INSTALL PYTORCH 先声毒人:最好资料就是上面三份资料,可以通过官网明确的获取一手信息,你所遇到的99%的问题都可以找到,明确的解决方案,建议最好看…...
『精』CSS 小技巧之BEM规范
『精』CSS 小技巧之BEM规范 文章目录 『精』CSS 小技巧之BEM规范一、什么是BEM?二、BEM要怎么用?三、不用BEM会少个胳膊吗?💊四、Sass与BEM的结合🎈五、块与修饰符应放在一块👿参考资料💘推荐博…...
vue3-12
需求是用户如果登录了,可以访问主页,如果没有登录,则不能访问主页,随后跳转到登录界面,让用户登录 实现思路,在用户登录之前做一个检查,如果登录了,则token是存在的,则放…...
操作系统期末复习
分段存储管理方式 某采用段式存储管理的系统为装入主存的一个作业建立了如下段表: 段号 段长 主存起始地址 0 660 210 1 140 3300 2 100 90 3 580 1237 4 960 1959 (1)计算该作业访问[0,432],[1&am…...
element el-table实现可进行横向拖拽滚动
【问题】表格横向太长,表格横向滚动条位于最底部,需将页面滚动至最底部才可左右拖动表格,用户体验感不好 【需求】基于elment的el-table组件生成的表格,使其可以横向拖拽滚动 【实现】灵感来源于这篇文章【Vue】表格可拖拽滚动&am…...
【兔子王赠书第14期】《YOLO目标检测》涵盖众多目标检测框架,附赠源代码和全书彩图!
文章目录 写在前面YOLO目标检测推荐图书本书特色内容简介作者简介 推荐理由粉丝福利写在后面 写在前面 小伙伴们好久不见吖,本期博主给大家推荐一本关于YOLO目标检测的图书,该书侧重目标检测的基础知识,包含丰富的实践内容,是目标…...
WPF 基础入门(样式)
3.1 一般样式 <Grid Margin"10"><TextBlock Text"Style test" Foreground"Red" FontSize"20"/> </Grid> 3.2内嵌样式 直接在控件上定义样式,如下所示: <Grid Margin"10">…...
Java ArrayList在遍历时删除元素
文章目录 1. Arrays.asList()获取到的ArrayList只能遍历,不能增加或删除元素2. java.util.ArrayList.SubList有实现add()、remove()方法3. 遍历集合时对元素重新赋值、对元素中的属性赋值、删除元素、新增元素3.1 普通for循环3.2 增强for循环3.3 forEach循环3.4 str…...
多模态大模型的前世今生
1 引言 前段时间 ChatGPT 进行了一轮重大更新:多模态上线,能说话,会看图!微软发了一篇长达 166 页的 GPT-4V 测评论文,一时间又带起了一阵多模态的热议,随后像是 LLaVA-1.5、CogVLM、MiniGPT-5 等研究工作…...
Android studio 花式按键
一、activity_main.xml代码: <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.a…...
使用spring boot实现异常的统一返回
在这个前后端分离的时代,一个 统一的数据格式非常重要。本次我们实现用spring boot实现一下返回给前端数据的统一格式,不再出现服务器500的错误。 新建一个spring boot项目,并导入knife4j的依赖。 写一个controller控制器,用来是…...
2023-12-11 LeetCode每日一题(最小体力消耗路径)
2023-12-11每日一题 一、题目编号 1631. 最小体力消耗路径二、题目链接 点击跳转到题目位置 三、题目描述 你准备参加一场远足活动。给你一个二维 rows x columns 的地图 heights ,其中 heights[row][col] 表示格子 (row, col) 的高度。一开始你在最左上角的格…...
PID为1的僵尸进程的产生及清理
父进程PID为1的僵尸进程通常是由init系统(在Linux系统中通常是systemd)产生的。这种情况通常发生在以下几种情况: 子进程结束,但其父进程没有正确地调用wait()或waitpid()系统调用来获取子进程的退出状态。在这种情况下࿰…...
043、循环神经网络
之——RNN基础 杂谈 第一个对于序列模型的网络,RNN。 正文 1.潜变量自回归模型 潜变量总结过去的信息,再和当前信息一起结合出新的信息。 2.RNN 循环神经网络将观察作为x,与前层隐变量结合得到输出 其中Whh蕴含了整个模型的时序信息…...
node使用nodemonjs自动启动项目
安装 npm install -g nodemon使用方法 我这里用的是electron项目为例package.json配置 {"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js"…...
Ts自封装WebSocket心跳重连
WebSocket是一种在单个TCP连接上进行全双工通信的协议,允许客户端和服务器之间进行双向实时通信。 所谓心跳机制,就是在长时间不使用WebSocket连接的情况下,通过服务器与客户端之间按照一定时间间隔进行少量数据的通信来达到确认连接稳定的手…...
【unity学习笔记】捏人+眨眼效果+口型效果
一、vriod捏人 1.在vroidstudio软件中捏人 2.导出模型(.vrm) 二、vrid导入unity的插件 1.在Git上搜索、打开univrm。 2.找到release页面找到合适的插件版本。(VRM-0.116.0_0f6c) 3.将univrm导入到工程中(assets)。 三…...
动态规划 | 最长公共子序列问题
文章目录 最长公共子序列题目描述问题分析程序代码复杂度分析 最短编辑距离题目描述问题分析程序代码复杂度分析 编辑距离题目描述输入格式输出格式 问题分析程序代码 最长公共子序列 题目描述 原题链接 给定两个字符串 text1 和 text2,返回这两个字符串的最长 公共…...
RuntimeError: The NVIDIA driver on your system is too old.
【报错】使用 AutoDL 复现实验时遇到 RuntimeError: The NVIDIA driver on your system is too old (found version 11070). Please update your GPU driver by downloading and installing a new version from the URL: http://www.nvidia.com/Download/index.aspx Alternativ…...
Java开发过程中的幂等性问题
幂等性问题: 1. 有时我们在填写某些 form表单 时,保存按钮不小心快速点了两次,表中竟然产生了两条重复的数据,只是id不一样。 2. 我们在项目中为了解决 接口超时 问题,通常会引入了 重试机制 。第一次请求接口超时了…...