这个 显示属性 在CSS中，定义了组件（div、超链接、标题等）在网页上的放置方式。顾名思义，此属性用于定义网页不同部分的显示。 语法：
null
display: value;
属性值
| 价值 |
描述 |
| 内联 |
它用于将元素显示为内联元素。 |
| 块 |
它用于将图元显示为块图元 |
| 目录 |
它用于使容器消失。 |
| 弯曲 |
它用于将元素显示为块级flex容器。 |
| 网格 |
它用于将图元显示为块级网格容器。 |
| 内联块 |
它用于将元素显示为内联级别的块容器。 |
| 内联flex |
它用于将元素显示为内联级别的flex容器。 |
| 内联网格 |
它用于将元素显示为内联级别的网格容器。 |
| 行内表格 |
它用于显示内联级别表 |
| 列表项 |
它用于显示
元素中的所有元素。
|
| 闯入 |
它用于显示元素内联或块级别，具体取决于上下文。 |
| 桌子 |
它用于将所有元素的行为设置为
。
| 表格标题 |
它用于将所有元素的行为设置为
。
|
| 表列组 |
它用于将所有元素的行为设置为 。 |
| 表格标题组 |
它用于将所有元素的行为设置为
|
| 表格注脚组 |
它用于将所有元素的行为设置为
|
| 表行组 |
它用于将所有元素的行为设置为 。 |
| 表格单元格 |
它用于将所有元素的行为设置为 |
。 |
| 表列 |
它用于将所有元素的行为设置为
。 |
| 表行 |
它用于将所有元素的行为设置为 |
。
| 没有一个 |
它用于移除元件。 |
| 最初的 |
它用于设置默认值。 |
| 继承 |
它用于从其父元素继承属性。 |
下面通过示例介绍几个重要值。 街区： 此属性用作div的默认属性。此属性将div一个接一个地垂直放置。可以使用block属性更改div的高度和宽度。如果未提及宽度，则block下的div属性将占据容器的宽度。 例子：
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS | Display property</ title >
< style >
#geeks1{
height: 100px;
width: 200px;
background: teal;
display: block;
}
#geeks2{
height: 100px;
width: 200px;
background: cyan;
display: block;
}
#geeks3{
height: 100px;
width: 200px;
background: green;
display: block;
}
.gfg {
margin-left:20px;
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:30px;
}
.main {
margin:50px;
text-align:center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >display: block; property</ div >
< div class = "main" >
< div id = "geeks1" >Block 1 </ div >
< div id = "geeks2" >Block 2</ div >
< div id = "geeks3" >Block 3</ div >
</ div >
</ body >
</ html >
|
输出：
内联： 此属性是定位标记的默认属性。这用于将div内联放置，即以水平方式放置。“内联显示”属性忽略用户设置的高度和宽度。 例子：
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS | Display property</ title >
< style >
#main{
height: 200px;
width: 200px;
background: teal;
display: inline;
}
#main1{
height: 200px;
width: 200px;
background: cyan;
display: inline;
}
#main2{
height: 200px;
width: 200px;
background: green;
display: inline;
}
.gfg {
margin-left:20px;
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:30px;
}
.main {
margin:50px;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >display: inline; property</ div >
< div class = "main" >
< div id = "main" > BLOCK 1 </ div >
< div id = "main1" > BLOCK 2</ div >
< div id = "main2" >BLOCK 3 </ div >
</ div >
</ body >
</ html >
|
输出：
内联块： 此功能同时使用了上述两个属性：块和内联。因此，该属性将div内联对齐，但区别在于它可以编辑块的高度和宽度。基本上，这将以块和内联方式对齐div。 例子：
html
<!DOCTYPE html>
< html >
< head >
< title >CSS | Display property</ title >
< style >
#main{
height: 100px;
width: 200px;
background: teal;
display: inline-block;
}
#main1{
height: 100px;
width: 200px;
background: cyan;
display: inline-block;
}
#main2{
height: 100px;
width: 200px;
background: green;
display: inline-block;
}
.gfg {
margin-left:200px;
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:210px;
}
.main {
margin:50px;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >display: Inline-block; property</ div >
< div class = "main" >
< div id = "main" > BLOCK 1 </ div >
< div id = "main1" > BLOCK 2</ div >
< div id = "main2" >BLOCK 3 </ div >
</ div >
</ body >
</ html >
|
输出：
无： 此属性隐藏使用此属性的div或容器。在其中一个div上使用它可以让工作更清晰。 例子：
html
<!DOCTYPE html>
< html >
< head >
< title >CSS | Display property</ title >
< style >
#main{
height: 100px;
width: 200px;
background: teal;
display: block;
}
#main1{
height: 100px;
width: 200px;
background: cyan;
display: none;
}
#main2{
height: 100px;
width: 200px;
background: green;
display: block;
}
.gfg {
margin-left:20px;
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:20px;
}
.main {
margin:50px;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >display: none; property</ div >
< div class = "main" >
< div id = "main" > BLOCK 1 </ div >
< div id = "main1" > BLOCK 2</ div >
< div id = "main2" >BLOCK 3 </ div >
</ div >
</ body >
</ html >
|
输出：
支持的浏览器： 支持的浏览器 显示属性 以下列出了：
- 谷歌Chrome4.0
- Internet Explorer 8.0
- 火狐3.0
- 歌剧7.0
- Safari 3.1
|
![关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案-yiteyi-C++库](https://www.yiteyi.com/wp-content/themes/zibll/img/thumbnail.svg)
