display属性
CSS中的定义了组件(div, 超链接, 标题等)将如何放置在网页上。顾名思义, 此属性用于定义网页不同部分的显示。
语法如下：
display: value;属性值
| 值 | 描述 |
|---|---|
| 排队 | 用于将元素显示为嵌入式元素。 |
| 块 | 用于将元素显示为块元素 |
| 内容 | 它用于使容器消失。 |
| 柔性 | 它用于将元素显示为块级Flex容器。 |
| 格 | 它用于将元素显示为块级网格容器。 |
| 内联块 | 它用于将元素显示为内联级块容器。 |
| 在线弯曲 | 它用于将元素显示为内联级别的伸缩容器。 |
| 内联网格 | 它用于将元素显示为内联级别的网格容器。 |
| 内联表 | 用于显示内联级别的表 |
| 项目清单 | 用于显示<li>元素中的所有元素。 |
| 运行 | 根据上下文, 它用于显示元素内联或块级。 |
| 表 | 它用于将所有元素的行为设置为<table>。 |
| 表标题 | 它用于将所有元素的行为设置为<caption>。 |
| 表列组 | 它用于将所有元素的行为设置为<column>。 |
| 表头组 | |
| 表脚组 | 它用于将所有元素的行为设置为<header>。 |
| 表行组 | 它用于将所有元素的行为设置为<row>。 |
| 表格单元 | 它用于将所有元素的行为设置为<td>。 |
| 表格栏 | 它用于将所有元素的行为设置为<col>。 |
| 表行 | 用于将所有元素的行为设置为<tr>。 |
| None | 用于删除元素。 |
| 初始 | 用于设置默认值。 |
| 继承 | 它用于从其父元素继承属性。 |
下面通过示例描述了几个重要的值。
块：此属性用作div的默认属性。此属性将div垂直垂直放置。 div的高度和宽度可以使用block属性来更改, 如果未提及宽度, 则div属性下的div将占用容器的宽度。
例子：
<!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" >lsbin</ 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内联。内联显示属性将忽略用户设置的高度和宽度。
例子：
<!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" >lsbin</ 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 >输出如下：
内联块：此功能使用上述两个属性, 即block和inline。因此, 此属性使div内联对齐, 但不同之处在于它可以编辑块的高度和宽度。基本上, 这将以块和内联方式对齐div。
例子：
<!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" >lsbin</ 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之一上使用它可以使工作清楚。
例子：
<!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" >lsbin</ 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 >输出如下：
支持的浏览器：支持的浏览器显示属性下面列出：
- 谷歌浏览器4.0
- Internet Explorer 8.0
- Firefox 3.0
- Opera 7.0
- Safari 3.1
