CSS display属性详细介绍 _display

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 >

输出如下：

文章图片
【CSS display属性详细介绍】内联块：此功能使用上述两个属性, 即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 >

输出如下：