Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

CSS 教程

CSS 主页 CSS 简介 CSS 语法 CSS 选择器 CSS 如何做 CSS 注释 CSS 颜色 CSS 背景 CSS 边框 CSS 外边距 CSS 内边距 CSS 高度/宽度 CSS 盒模型 CSS 轮廓 CSS 文本 CSS 字体 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS 显示 CSS 最大宽度 CSS 定位 CSS Z-index CSS 溢出 CSS 浮动 CSS 行内块 CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图片精灵 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特定性 CSS !important CSS 数学函数

CSS 高级

CSS 圆角 CSS 边框图片 CSS 背景 CSS 颜色 CSS 颜色关键字 CSS 渐变 CSS 阴影 CSS 文本效果 CSS 网络字体 CSS 2D 变换 CSS 3D 变换 CSS 过渡 CSS 动画 CSS 工具提示 CSS 样式图片 CSS 图片反射 CSS object-fit CSS object-position CSS 遮罩 CSS 按钮 CSS 分页 CSS 多列 CSS 用户界面 CSS 变量 CSS @property CSS 盒大小 CSS 媒体查询 CSS 媒体查询示例 CSS 弹性盒

CSS 响应式

响应式简介 响应式视窗 响应式网格视图 响应式媒体查询 响应式图片 响应式视频 响应式框架 响应式模板

CSS 网格

网格简介 网格容器 网格项目

CSS SASS

SASS 教程

CSS 示例

CSS 模板 CSS 示例 CSS 编辑器 CSS 代码片段 CSS 测验 CSS 练习 CSS 网站 CSS 面试准备 CSS 集训营 CSS 证书

CSS 参考

CSS 参考 CSS 选择器 CSS 函数 CSS 参考听觉 CSS 网络安全字体 CSS 可动画 CSS 单位 CSS PX-EM 转换器 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 浏览器支持

CSS 布局 - display 属性


The display 属性是控制布局最重要的 CSS 属性。


display 属性

The display 属性用于指定元素在网页上的显示方式。

每个 HTML 元素都有一个默认的 display 值,具体取决于元素的类型。大多数元素的默认 display 值为 blockinline

The display 属性用于更改 HTML 元素的默认显示行为。


块级元素

块级元素始终从新行开始,并占据可用的全部宽度(向左和向右尽可能延伸)。

The <div> 元素是一个块级元素。

块级元素示例

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

内联元素

内联元素不会从新行开始,只占据必要的宽度。

这是 一个段落内的内联 <span> 元素.

内联元素示例

  • <span>
  • <a>
  • <img>


display 属性值

The display 属性有许多值

描述
inline 将元素显示为内联元素
block 将元素显示为块级元素
contents 使容器消失,使子元素成为 DOM 中上一级元素的子元素
flex 将元素显示为块级弹性容器
grid 将元素显示为块级网格容器
inline-block 将元素显示为内联级块容器。元素本身格式化为内联元素,但可以应用高度和宽度值
inline-flex 将元素显示为内联级弹性容器
inline-grid 将元素显示为内联级网格容器
inline-table 元素显示为内联级表格
list-item 让元素的行为类似于 <li> 元素
run-in 根据上下文将元素显示为块级或内联元素
table 让元素的行为类似于 <table> 元素
table-caption 让元素的行为类似于 <caption> 元素
table-column-group 让元素的行为类似于 <colgroup> 元素
table-header-group 让元素的行为类似于 <thead> 元素
table-footer-group 让元素的行为类似于 <tfoot> 元素
table-row-group 让元素的行为类似于 <tbody> 元素
table-cell 让元素的行为类似于 <td> 元素
table-column 让元素的行为类似于 <col> 元素
table-row 让元素的行为类似于 <tr> 元素
none 元素被完全删除
initial 将此属性设置为其默认值
inherit 从其父元素继承此属性

Display: none;

display: none; 通常与 JavaScript 一起使用来隐藏和显示元素,而无需删除和重新创建它们。如果您想了解如何实现这一点,请查看此页面上的最后一个示例。

The <script> 元素默认使用 display: none;

点击显示面板

此面板包含一个 <div> 元素,默认情况下是隐藏的 (display: none;)。

它使用 CSS 进行样式化,我们使用 JavaScript 来显示它(将其更改为(display: block;)。


覆盖默认显示值

如前所述,每个元素都有一个默认的显示值。但是,您可以覆盖它。

将内联元素更改为块元素,反之亦然,对于使页面看起来特定方式并且仍然遵循 Web 标准很有用。

一个常见的例子是为水平菜单创建内联 <li> 元素

示例

li {
  display: inline;
}
自己尝试 »

注意:设置元素的 display 属性只会更改元素的显示方式,而不是元素的类型。因此,具有 display: block; 的内联元素不允许在其中包含其他块元素。

以下示例将 <span> 元素显示为块元素

示例

span {
  display: block;
}
自己尝试 »

以下示例将 <a> 元素显示为块元素

示例

a {
  display: block;
}
自己尝试 »

隐藏元素 - display:none 或 visibility:hidden?

display:none

Italy

visibility:hidden

Forest

重置

Lights

隐藏元素可以通过将 display 属性设置为 none 来完成。该元素将被隐藏,并且页面将显示为好像元素不存在。

示例

h1.hidden {
  display: none;
}
自己尝试 »

visibility:hidden; 也隐藏元素。

但是,该元素仍然会占用与之前相同的空间。该元素将被隐藏,但仍然会影响布局

示例

h1.hidden {
  visibility: hidden;
}
自己尝试 »

更多示例

display: none; 和 visibility: hidden; 之间的区别
此示例演示了 display: none; 与 visibility: hidden; 之间的区别。

显示更多显示类型
此示例演示了更多显示类型。

将 CSS 与 JavaScript 结合使用以显示内容
此示例演示了如何使用 CSS 和 JavaScript 在单击时显示元素。


用练习测试自己

练习

隐藏 <h1> 元素。它仍然应该占用与之前相同的空间。

<style>
h1 {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习


CSS 显示/可见性属性

属性 描述
显示 指定元素应该如何显示
可见性 指定元素是否应该可见

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.