CSS元素显示类型
display 属性是 CSS 中最重要的属性之一，主要用来控制元素的布局，通过 display 属性您可以设置元素是否显示以及如何显示。
根据元素类型的不同，每个元素都有一个默认的 display 属性值，例如<div>默认的 display 属性值为
block（块级元素），而<span>默认的 display 属性值为 inline（行内元素），您也可以手动将元素的 display
属性转换为其它值。display 属性的可选值如下：
| 值 | 描述 |
|---|---|
| none | 隐藏元素 |
| block | 将元素设置为块级元素 |
| inline | 将元素设置为内联元素 |
| list-item | 将元素设置为列表项目 |
| inline-block | 将元素设置为行内块元素 |
| table | 将元素设置为块元素级的表格（类似<table>） |
| inline-table | 将元素设置为内联元素级的表格（类似<table>） |
| table-caption | 将元素设置为表格的标题（类似<caption>） |
| table-cell | 将元素设置为表格的单元格（类似<td>和<th>） |
| table-row | 将元素设置为表格的行（类似<tr>） |
| table-row-group | 将元素设置为表格的内容部分（类似 <tbody>） |
| table-column | 将元素设置为表格的列（类似<col>） |
| table-column-group | 将元素设置为表格中一个或多个列的分组（类似<colgroup>） |
| table-header-group | 将元素设置为表格的头部（类似<thead>） |
| table-footer-group | 将元素设置为表格的脚（类似<tfoot>） |
| box | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最老版本） |
| inline-box | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最老版本） |
| flexbox | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的过渡版本） |
| inline-flexbox | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的过渡版本） |
| flex | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最新版本） |
| inline-flex | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最新版本） |
| run-in | 根据上下文来决定将元素设置为块级元素或内联元素 |
| inherit | 从父元素继承 display 属性的值 |
伸缩盒子（弹性盒子）是 CSS3
中一种新的布局模式，引入伸缩盒子的目的是提供一种更加有效的方式来对页面中的元素进行排列、对齐和分配空间，当页面需要适应不同的屏幕大小以及设备类型时这种布局方式能够确保元素拥有恰当尺寸和位置。
下面通过几个常用的属性值来介绍以下 display 属性的使用：
display: none
display 的属性值 none 可以用来隐藏元素，与前面我们介绍《CSS
visibility》时提到的visibility: hidden;功能相似，不同的是display: none;在隐藏元素的同时，它还会将元素所占的位置一并隐藏。display: none; 通常会与 JavaScript
结合使用来隐藏或显示某个元素，下面通过一个示例来演示一下：
<!DOCTYPE html><html><head><style>div {width: 350px;height: 100px;background-color: #AAA;}</style></head><body><div id="box"> </div><button onclick="change_box(this)">隐藏</button><script>function change_box(obj){var box = document.getElementById('box');if(box.style.display == 'none'){box.style.display = "";obj.innerHTML = "隐藏";}else{box.style.display = "none";obj.innerHTML = "显示";}}</script></body></html>
运行上面的代码，在页面中点击“显示”或“隐藏”按钮即可对页面中指定的元素执行显示或隐藏操作，如下图所示：
图：display: none; 属性演示
display: block
display 属性的属性值 block 可以将元素强制转换为块级元素，示例代码如下：
<!DOCTYPE html><html><head><style>a{display: block;width: 150px;height: 50px;background-color: #ACC;line-height: 50px;text-align: center;text-decoration: none;}</style></head><body><a href="">这是一个链接</a></body></html>
运行结果如下图所示：
图：display: block; 属性演示
display: inline
display 属性的属性值 inline 可以将元素强制转换为行内元素，让元素拥有行内元素的特性，例如可以与其他行内元素共享一行等，示例代码如下：
<!DOCTYPE html><html><head><style>div {width: 50px;height: 50px;background-color: #ACC;border: 1px solid black;}.inline {display: inline;}</style></head><body><div></div><div></div><div class="inline">display: inline;</div><div class="inline">display: inline;</div></body></html>
运行结果如下图所示：
图：display: inline; 属性演示
display: inline-block
display 属性的属性值 inline-block 可以将元素强制转换为行内块元素，inline-block 既具有 block
能够设置宽高的特性又具有 inline 不独占一行的特性，示例代码如下：
<!DOCTYPE html><html><head><style>div {width: 130px;height: 50px;background-color: #ACC;border: 1px solid black;}.inline-block {display: inline-block;text-align: center;margin-top: 10px;}</style></head><body><div></div><div></div><div class="inline-block">display: inline-block;</div><div class="inline-block">display: inline-block;</div></body></html>
运行结果如下图所示：
图：display: inline-block; 属性演示
原文地址CSS元素显示类型
相关文章：
CSS元素显示类型
display 属性是 CSS 中最重要的属性之一，主要用来控制元素的布局，通过 display 属性您可以设置元素是否显示以及如何显示。 根据元素类型的不同，每个元素都有一个默认的 display 属性值，例如<div>默认的 display 属性值为 …...
Flink 介绍（特性、概念、故障容错、运维部署、应用场景）
概述 特性 概念 数据流 状态 时间 savepoint 故障容错 运维部署 部署应用到任意地方 Flink能够更方便地升级、迁移、暂停、恢复应用服务 监控和控制应用服务 运行任意规模应用 应用场景 事件驱动型应用 什么是事件驱动型应用？ 事件驱动型应用的优势 Flink如何…...
Python+Flask接口判断身份证省份、生日、性别、有效性验证+docker部署+Nginx代理运行
这里写目录标题 一、接口样式二、部署流程2.1 镜像打包2.1.1 准备工作2.1.2 build打包2.1.3 dokcer部署运行2.1.4 Nginx代理 三、代码及文件3.1 index.py3.2 areaCodes.json3.3 Dockerfile 一、接口样式 https://blog.henryplus.cn/idcardApi/idCard/query?idcard{idcard} 二、…...
门店收银营销活动打折特价-收银系统源码
1.功能描述 功能描述：连锁店总部/门店可以将商品设置第二件打折，如保温杯第一件10元，第二件5折； 2.适用场景 ☑新店开业、门店周年庆、节假日等特定时间促销； ☑会员拉新，设置会员专享套餐； …...
QTabWidget的每个tab居中显示图标和文本
使用QTabWidget，给每个tab添加了图标之后，文字和图标之间有间距，没有完美居中显示。 遇到此问题，尝试了多种办法，均不理想，最终自定义QTabBar，重绘tab，完美解决。 #include <QT…...
Ubuntu20.04如何安装Microsoft Edge浏览器？
Microsoft Edge是由微软开发的一款网页浏览器，首次发布于2015年，作为Windows 10操作系统的默认浏览器，取代了之前的Internet Explorer。 基于Chromium内核：自2019年起，Microsoft Edge转向了使用开源的Chromium内核，这使得它与Google Chrome在性能和兼容性方面有很多相似之…...
美团Java一面
美团Java一面 9.24一面，已经寄了 收到的第一个面试，表现很不好 spring bean生命周期 作用域（忘完了） 为什么用redis缓存 redis和数据库的缓存一致性问题 redis集群下缓存更新不一致问题 aop说一下 arraylist和linkedlist 数据库的…...
C#中ref关键字和out关键字
值传递和引用传递 值传递和引用传递是编程中涉及数据传递的两种方式。它们的主要区别在于数据是如何在函数或方法之间传递的。 值传递 值传递意味着当你把一个变量传递给一个函数时，实际上传递的是这个变量的值的一个拷贝。也就是说，函数内部对这个参数…...
贴吧软件怎么切换ip
在网络使用中，有时我们需要切换IP地址来满足特定的需求，比如需要切换贴吧软件IP以进行不同的操作。本文将介绍几种贴吧切换IP地址的方法，帮助用户更好地管理自己的网络身份和访问权限。 1、更换网络环境 通过连接到不同的Wi-Fi网络或使用移…...
图像分割恢复方法
传统的图像分割方法主要依赖于图像的灰度值、纹理、颜色等特征，通过不同的算法将图像分割成多个区域。这些方法通常可以分为以下几类： 1.基于阈值的方法 2.基于边缘的方法 3.基于区域的方法 4.基于聚类的方法 下面详细介绍这些方法及其示例代码。 1. 基…...
Ultralytics：YOLO11使用教程
Ultralytics：YOLO11使用教程 前言相关介绍前提条件实验环境安装环境项目地址LinuxWindows YOLO11使用教程进行目标检测进行实例分割进行姿势估计进行旋转框检测进行图像分类 参考文献 前言 由于本人水平有限，难免出现错漏，敬请批评改正。更多…...
前缀和算法——优选算法
个人主页：敲上瘾-CSDN博客 个人专栏：游戏、数据结构、c语言基础、c学习、算法 一、什么是前缀和？ 前缀和是指从数组的起始位置到某一位置（或矩阵的某个区域）的所有元素的和。这种算法通过预处理数组或矩阵，…...
YOLO11改进|注意力机制篇|引入HAT超分辨率重建模块
目录 一、HAttention注意力机制1.1HAttention注意力介绍1.2HAT核心代码 二、添加HAT注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、HAttention注意力机制 1.1HAttention注意力介绍 HAT模型 通过结合卷积特征提取与多尺度注意…...
老牛也想吃嫩草，思科为何巨资投入云初创CoreWeave？
【科技明说 ｜ 科技热点关注】 当我看到前些天思科(Cisco)的新闻时笑了。业内朋友对我说，老牛也想吃嫩草，人之常情尔，都是为了好好活着。 作为全球著名的网络产品巨头，思科Cisco论是遭遇到何种市场与行业巨变ÿ…...
Spring Boot 事务管理入门
在 Spring Boot 应用中，事务管理是一个至关重要的方面，它确保了数据的一致性和完整性。本文将深入探讨 Spring Boot 中事务管理的机制、使用方法以及注意事项，并提供丰富的示例代码。 其它教程： mysql事务详解 一、事务基础概念…...
20年408数据结构
第一题： 解析：这种题可以先画个草图分析一下，一下就看出来了。 这里的m(7,2)对应的是这图里的m(2,7),第一列存1个元素，第二列存2个元素，第三列存3个元素，第四列存4个元素，第五列存5个元素&#…...
4反馈、LC、石英、RC振荡器
1什么是振荡器？ 我们看看振荡器在无线通信中扮演什么角色？ 1）无线通信的波是指电磁波。 2）电磁波的频率高于100KHz才能在空气中传播。 3）空气中的高频电磁波的相位和振幅可以排列组合包含信息。 4）无…...
go 的 timer reset
在 Go 语言 1.23 版本之前，与Timer（定时器）关联的通道是异步的（有缓冲，容量为 1）。这意味着即使在调用Timer.Stop（停止定时器）或Timer.Reset（重置定时器）并返…...
每日一面 day03
Q：介绍一下MySQL的三种日志（redo，undo，bin） Redo Log 和 Undo Log 是存储引擎 InnoDB 层面实现的，Bin Log 是 MySQL 层面实现的。 下面是三种日志的简要介绍： Redo Log：保证事务的…...
ssm基于SSM框架的餐馆点餐系统的设计+VUE
系统包含：源码论文 所用技术：SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习，获取源码请私聊我 需要定制请私聊 目 录 摘要 I Abstract II 1绪论 1 1.1研究背景与意义 1 1.1.1研究背景 1 1.1.2研究意义 1 1.2国内外研究…...
多人播报配音怎么弄？简单4招分享
想象一下，你手中的小说突然间活了起来，每个角色都有了自己的声音和情感。 这就是多人配音的魅力所在。它让文字跃然纸上，赋予了故事新的生命。 那么，如何制作一部引人入胜的小说呢？多人配音怎么制作的呢？…...
《Windows PE》4.1导入表
导入表顾名思义，就是记录外部导入函数信息的表。这些信息包括外部导入函数的序号、名称、地址和所属的DLL动态链接库的名称。Windows程序中使用的所有API接口函数都是从系统DLL中调用的。当然也可能是自定义的DLL动态链接库。对于调用方，我们称之为导入函…...
计算机专业大学生应该如何规划大学四年？
计算机专业的大学生在学习过程中应该注重以下几个方面，以确保他们在快速变化的技术领域中保持竞争力： 基础知识： 数学基础：离散数学、线性代数、概率论等数学课程对于理解算法和数据结构至关重要。编程基础：学习至少一…...
R知识图谱1—tidyverse玩转数据处理120题
以下是本人依据张老师提供的tidyverse题库自行刷题后的tidyverse Rmd文件，部分解法参考张老师提示，部分解法我本人灵感提供 数据下载来源https://github.com/zhjx19/tidyverse120/tree/main/data 参考https://github.com/MaybeBio/R_cheatsheet/tree/mai…...
【赵渝强老师】K8s中的有状态控制器StatefulSet
在K8s中，StatefulSets将Pod部署成有状态的应用程序。通过使用StatefulSets控制器，可以为Pod提供持久存储和持久的唯一性标识符。StatefulSets控制器与Deployment控制器不同的是，StatefulSets控制器为管理的Pod维护了一个有粘性的标识符。无论…...
机器学习笔记（持续更新）
使用matplotlib绘图： import matplotlib.pyplot as plt fig, axplt.subplots() #创建一个图形窗口 plt.show() #不绘制任何内容，直接显示空图 重复值处理： 重复值处理代码： import pandas as pd data pd.DataFrame({学号: [1…...
Nginx 配置之server块
在 Nginx 配置中使用两个 server 块是为了处理 HTTP 和 HTTPS 请求的不同需求。具体来说： 第一个 server 块： 监听 80 端口（HTTP）。将所有 HTTP 请求重定向到 HTTPS（443 端口）。 第二个 server 块ÿ…...
魅族Lucky 08惊艳亮相：极窄四等边设计引领美学新风尚
在这个智能手机设计趋于同质化的时代，魅族以其独特的设计理念和创新技术，再次为市场带来了一股清新之风。 近日，魅族全新力作——Lucky 08手机正式曝光，其独特的“极窄物理四等边”设计瞬间吸引了众多消费者的目光，而…...
自动化的抖音
文件命名 main.js var uiModule require("ui_module.js"); if (!auto.service) {toast("请开启无障碍服务");auto.waitFor();} var isRunning true; var swipeCount 0; var targetSwipeCount random(1, 10); var window uiModule.createUI(); uiMo…...
无人机之巡航控制篇
一、巡航控制的基本原理 无人机巡航控制的基本原理是通过传感器检测无人机的飞行状态和环境信息，并将其反馈给控制器。控制器根据反馈信息和任务需求，计算出无人机的控制指令，并将其发送给执行机构。执行机构根据控制器的控制指令，…...