CSS元素显示类型

embedded/2025/1/4 6:18:59/

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>
boxCSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最老版本)
inline-boxCSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最老版本)
flexboxCSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的过渡版本)
inline-flexboxCSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的过渡版本)
flexCSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最新版本)
inline-flexCSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最新版本)
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元素显示类型

文章来源:https://blog.csdn.net/2401_82561004/article/details/142713662
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/embedded/125050.html

相关文章

如何将数据从 AWS S3 导入到 Elastic Cloud - 第 1 部分:Elastic Serverless Forwarder

作者&#xff1a;来自 Elastic Hemendra Singh Lodhi 这是多部分博客系列的第一部分&#xff0c;探讨了将数据从 AWS S3 导入 Elastic Cloud 的不同选项。 Elasticsearch 提供了多种从 AWS S3 存储桶导入数据的选项&#xff0c;允许客户根据其特定需求和架构策略选择最合适的方…

如何学习大数据 (学习路线)

学习大数据是一个广泛的过程&#xff0c;需要从概念、工具、技术栈到实战项目逐步深入。以下是一条系统的学习路径&#xff0c;帮助你逐步掌握大数据领域的关键知识和技术。 学习路径 1. 理解大数据的基本概念和原理 在正式学习大数据技术之前&#xff0c;先了解一些基础的概…

Rust语言发展历程

Rust是一种系统编程语言&#xff0c;它的设计目标是提供安全性和性能&#xff0c;同时解决C的内存安全问题。以下是Rust的发展历程&#xff1a; 2006年&#xff1a;Rust的构思始于这一年&#xff0c;由Mozilla的程序员Graydon Hoare开始设计。 2010年&#xff1a;Rust的第一个…

Python库pandas之六

Python库pandas之六 输入/输出read_sql函数应用实列 输入/输出 read_sql 函数 词法&#xff1a;pandas.read_sql(sql, con, index_colNone, coerce_floatTrue, paramsNone, parse_datesNone, columnsNone, chunksizeNone, dtype_backend<no_default>, dtypeNone) rea…

【MySQL】存储过程

MySQL 存储过程是数据库中一组 SQL 语句的集合&#xff0c;可以通过名称调用并执行。存储过程可以封装复杂的业务逻辑&#xff0c;减少网络传输的次数&#xff0c;提升性能。以下是关于 MySQL 存储过程的详细教学&#xff1a; 1. 存储过程的基本语法 创建存储过程的基本语法如…

acwing用数组实现单双链表

题目1&#xff1a;单链表 实现一个单链表&#xff0c;链表初始为空&#xff0c;支持三种操作&#xff1a; ​ 向链表头插入一个数&#xff1b; ​ 删除第 k 个插入的数后面的数&#xff1b; ​ 在第 k 个插入的数后插入一个数。 现在要对该链表进行 M 次操作&#xff0c;进行…

【QT Quick】函数与信号处理:QML 信号处理

在 Qt Quick 6 中&#xff0c;信号与槽机制是核心的概念之一。这种机制源自于 Qt 的 C 层&#xff0c;并在 QML 中得到了广泛的使用和扩展。在 QML 中&#xff0c;信号与槽机制不仅简化了组件之间的通信&#xff0c;还大大增强了程序的解耦性&#xff0c;使得各个模块可以更加灵…

【C语言】数组练习

【C语言】数组练习 练习1&#xff1a;多个字符从两端移动&#xff0c;向中间汇聚练习2、二分查找 练习1&#xff1a;多个字符从两端移动&#xff0c;向中间汇聚 编写代码&#xff0c;演示多个字符从两端移动&#xff0c;向中间汇聚 练习2、二分查找 在⼀个升序的数组中查找指…