CSS display属性-之路教程

语法

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

display属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .display li {
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display 属性示例</h2>
    <p>Here the list item is with its initial value:</p>
    <ul>
      <li>List iteam</li>
      <li>List iteam</li>
    </ul>
    <p>Here the list item is used with the display property. The "inline" value is used:</p>
    <ul class="display">
      <li>List iteam 1</li>
      <li>List iteam 2</li>
    </ul>
  </body>
</html>

具有“inline”和“block”值的显示display属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inline {
        border: 1px solid #1c87c9;
        display: inline;
      }
      .block {
        border: 1px solid #1c87c9;
        display: block;
        height: 30px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Display 属性示例</h2>
    <p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr>
    <p>Here the list item is used with the "block" value of the display property:</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>
  </body>
</html>

具有“块”值的显示属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .block {
        display: block;
        border: 1px solid #666;
        background-color: #eee;
        padding: 10px;
        width: 200px;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #8ebf42;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display 属性示例</h2>
    <div class="block">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

具有“内容”值的显示属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .contents {
        display: contents;
        border: 1px solid #666;
        background-color: #eee;
        padding: 10px;
        width: 200px;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Display 属性示例</h2>
    <div class="contents">
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

      <div class="hello">HELLO!</div>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
  </body>
</html>

具有“flex”值的显示属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #flex {
        width: 300px;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */
        -webkit-justify-content: center;
        /* Safari 6.1+ */
        display: flex;
        justify-content: center;
      }
      div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Display 属性示例</h2>
    <p>Here the "display: flex;" is used:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>

CSS display 属性值说明

值	描述
inline	表示作为内联元素的元素。
block	表示作为块元素的元素。
contents	容器消失了，从而使子元素的子元素的子元素在DOM中的下一个级别。
flex	表示作为块级柔性容器的元素。
grid	表示作为块级网格容器的元素。
inline-block	表示作为内联级块容器的元素。
inline-flex	表示作为内联级Flex容器的元素。
inline-grid	表示作为内联级网格容器的元素。
inline-table	表示作为内联级表的元素。它的表现类似于HTML％26LT;表％26GT;元素，但作为内联框，而不是作为块级框。在表框中的内部是一个块级上下文。
list-item	该元素的行为类似于HTML％26LT; LI％26GT;元素。
run-in	根据上下文表示作为块或者内联的元素。
table	该元素的行为类似于HTML％26LT;表％26GT;元素。
table-caption	该元素的行为类似于HTML％26LT;标题％26GT;元素。
table-column-group	该元素的行为类似于HTML％26LT; COLGROUP％26GT;元素。
table-header-group	该元素的表现类似于HTML％26LT; Thead％26Gt;元素。
table-footer-group	该元素的行为类似于HTML％26LT; Tfoot％26gt;元素。
table-row-group	元素的行为类似于HTML％26LT; TBOND％26GT;元素。
table-cell	该元素的行为类似于HTML％26LT; TD％26GT;元素。
table-column	该元素的行为类似于HTML％26LT; COL％26GT;元素。
table-row	该元素的行为类似于HTML％26LT; tr％26gt;元素。
none	意味着根本不会显示该元素。
initial	使属性使用其默认值。
inherit	从其父元素继承属性。

CSS display属性

display 属性定义用于 HTML 元素的框的类型。

使用 display 属性，我们可以覆盖元素的初始值。
例如，通过指定“inline”值，块级元素可以显示为内联元素。
内联元素不接受高度和宽度属性。

它只会忽略它。

在 HTML 中，display 属性的默认值取自 HTML 规范中描述的行为，或者取自浏览器或者用户默认样式表。
另一方面，XML 中的默认值是“inline”。

CSS 中有几种主要的框格式：

内联
内联元素或者内联级元素是在一条线上流动而不破坏它的盒子。 <span>、<em>、<img> 元素是行框的一部分，但不会导致换行。

内联元素可以有内边距和外边距，但不能有宽度和高度，因为在行内定义它们不会改变其尺寸。在元素上指定内边距和边距只会水平推动行上的其他元素。但是，如果使用 display 属性将行内元素设置为行内块元素，则它可以接受宽度和高度。

内联块
除了宽度和高度之外，行内块元素与行内元素相同。宽度和高度在水平和垂直方向上推动线上的元素。
块
块盒装或者块级元素不位于行盒中而是突破它。默认情况下，它们占据尽可能多的水平空间。块级元素可以包含其他块级元素。 <p>、<ul>、<h1>-<h6>、<div>、<section> 和 <ol> 是块级元素的示例。
Flex
display 属性也用于 Flexbox。 flex 值为元素生成一个块级框，并根据 Flexbox 模型对内容进行布局。在这里你可以阅读 Flexbox 终极教程。
网格Grid
display 属性最初设置网格布局。它为根据网格模型布置内容的元素生成块级框。
表格
显示值允许我们使非表格元素表现得像表格元素。每个表值都强制元素的行为类似于 HTML 中的相应表元素。内联表的行为类似于 <table> HTML 元素，但作为内联框。

表格框内有一个块级上下文。

初始值	-
应用于	所有元素。
继承	不可继承
可动画的	不
版本	CSS1.
DOM 语法	object.style.display =“list-item”;

日期：2020-06-02 22:14:28 来源：oir作者：oir

←CSS 伪类 :disabled

dk_flexbox 和 dk_flex_item→

语法