CSS display属性详细介绍

2021年3月11日17:08:06 发表评论 766 次浏览

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

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: