CSS 可见性与显示

cssweb developmentfront end technology更新于 2025/7/24 7:08:17

所有 HTML 元素都设置了默认显示值，可以使用 CSS 显示属性覆盖。同样，所有元素的可见性默认设置为可见，但也可以使用 CSS 可见性属性覆盖。

以下是 CSS 显示属性 − 的值

Sr.No	值 &说明
1	inline 将元素显示为内联元素(如 <span>)，如果定义了 height 和 width 属性，则这些属性将不起作用
2	block 将元素显示为块元素(如 <div>)并强制换行
3	contents 使容器消失，使元素的子元素成为 DOM 中的上一级元素
4	flex 将元素显示为块级弹性容器
5	grid 将元素显示为块级网格容器
6	inline-block 它将元素显示为内联级块容器。元素本身被格式化为内联元素，但可以应用高度和宽度值
7	inline-flex 它将元素显示为内联级弹性容器
8	inline-grid 它将元素显示为内联级网格容器
9	inline-table 元素显示为内联级表格
10	list-item 它让元素表现得像 <li>元素
11	run-in 根据上下文将元素显示为块或内联
12	table 使元素表现得像一个 <table> 元素
13	table-caption 使元素表现得像一个 <caption> 元素
14	table-column-group 使元素表现得像一个 <colgroup> 元素
15	table-header-group 使元素表现得像一个 <thead>元素
16	table-footer-group 使元素表现得像一个 <tfoot> 元素
17	table-row-group 使元素表现得像一个 <tbody> 元素
18	table-cell 使元素表现得像一个 <td> 元素
19	table-column 使元素表现得像一个 <col> 元素
20	table-row 使元素表现得像一个 >tr<元素
21	none 该元素未在页面上呈现
22	initial 它将此属性设置为其默认值。
23	inherit 它定义元素的 display 属性取自其父元素。

让我们看一个 CSS display inline-block 的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<title>CSS Display Inline-Block</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
input[type="button"] {
   border-radius: 10px;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-Inline-Block</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

输出

以下是 CSS 可见性属性 − 的值

Sr.No	值和说明
1	visible 默认值，元素及其子元素可见
2	hidden 隐藏元素，其子元素不可见，但元素仍会呈现并在页面上获得适当的空间
3	collapse 仅用于表格行 (<tr>)、行组 (<tbody>)、列 (<col>)、列组 (<colgroup>)。此值会移除一行或一列，该行或列占用的空间将可用于其他内容如果用于其他元素，则会呈现为"隐藏"
4	initial 将元素的可见性设置为其默认值
5	inherit 指定visibility属性的值应从父元素继承

让我们看一个CSS Visibility属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form ,table{
   width:70%;
   margin: 0 auto;
   text-align: center;
}
table, th, td {
   border-collapse: collapse;
   border: 1px solid black;
}
thead {
   background-color: goldenrod;
}
tbody{
   background-color: khaki;
}
tr:nth-of-type(3){
   visibility: collapse;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead>
<tr><th>Name</th><th>Course</th></tr>
</thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>