display隐藏和行块级元素转换

游鹄君大约 2 分钟

以下是 display 属性可能的值及其对应的描述

属性	描述
none	不显示该元素。
block	元素将作为块级元素渲染，周围有空格。
inline	默认行为（继承自 CSS2.1）。以行内形式渲染元素。
inline-block	CSS2.1 新增的值，元素将作为 inline-block 形式渲染。
list-item	该元素将作为列表项显示。
run-in	根据上下文，元素可能以块级或行内形式渲染。
compact	虽然 CSS 支持此值，但不常用且已从 CSS2.1 删除。
marker	同样不常用且已从 CSS2.1 删除的值。
table	元素将作为块级表渲染（类似于 `<table>` 标签）。
inline-table	元素将作为行内表渲染（类似于 `<table>`，无周围空格）。
table-row-group	该元素将渲染表体组中的一个或多个表行（类似于 `<tbody>`）。
table-header-group	该元素将渲染表头组中的一个或多个表行（类似于 `<thead>`）。
table-footer-group	该元素将渲染表脚组中的一个或多个表行（类似于 `<tfoot>`）。
table-row	元素将渲染单一行表（类似于 `<tr>` 标签）。
table-column-group	该元素将渲染表体组中的一个或多个列（类似于 `<colgroup>`）。
table-column	元素将渲染单个列单元格（类似于 `<col>` 标签）。
table-cell	元素将渲染单个表单元格（类似于 `<td>` 和 `<th>` 标签）。
table-caption	元素将渲染表标题（类似于 `<caption>` 标签）。
inherit	该元素的显示属性将继承自其父级。

<!DOCTYPE html>
<html>
  <head>
   <title>Layout布局：display属性</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     div{
      width:200px;
      height:200px;
      border:1px solid red;
     }
     #yincang{
      background:blue;
      
      /*将当前元素在文档流中消失*/
      display:none;
      
      /*将当前元素在文档流中显示*/
      display:block;
     }
     #xianshi{
      background:red;
     }
     span{
      /*将行内元素转换为块级元素*/
      display:block;
      
      /*将块级元素转换为行内元素*/
      display:inline;
      
      border:1px solid green;
     }
   </style>
  </head>
  <body>
   <h1>Layout布局：display属性</h1>
   <div id="yincang"></div>
   <div id="xianshi"></div>
   <span>我是一个行内元素</span>
  </body>
</html>