2019-11-05

CSS Display / Visibility 显示与可见性

前言

display 属性设置一个元素应如何显示。
visibility 属性指定一个元素应可见还是隐藏。

属性	描述	CSS	备注	🔗
display	规定元素应该生成的框的类型	1		🔗
visibility	指定一个元素是否是可见的，即使不可见的元素也会占据页面上的空间	2		🔗

1、隐藏元素

属性	值	备注
display	none	隐藏的元素不会占用任何布局空间
visibility	hidden	隐藏的元素仍需占用与未隐藏之前一样的布局空间

隐藏一个元素可以通过把 display 属性设置为 “none”，或把 visibility 属性设置为 “hidden”。但是请注意，这两种方法会产生不同的结果。
visibility: hidden; 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display: none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

实例

<style>
    h1.visibility {
        visibility: hidden;
    }
    h1.display {
        display: none;
    }
</style>

<h1>这是一个可见标题</h1>
<h1 class="visibility">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>

<h1>这是一个可见标题</h1>
<h1 class="display">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>

效果

2、Display 显示

display 属性规定元素应该生成的框的类型。

属性	描述	CSS	备注	🔗
display	规定元素应该生成的框的类型	1		🔗

属性值

值	描述	备注
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符	总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制；
inline	默认。此元素会被显示为内联元素，元素前后没有换行符	和相邻的内联元素在同一行；宽度（width）、高度（height）、内边距的 top/bottom（padding-top/padding-bottom）和外边距的 top/bottom（margin-top/margin-bottom）都不可改变，就是里面文字或图片的大小；
inline-block	行内块元素。（CSS2.1 新增的值）	和相邻的内联元素在同一行；宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制；
list-item	此元素会作为列表显示
run-in	此元素会根据上下文作为块级元素或内联元素显示
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
marker	CSS 中有值 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	规定应该从父元素继承 display 属性的值

元素

元素	描述	例子
块元素	块元素是一个元素，占用了全部宽度，在前后都是换行符	address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li
内联元素	内联元素只需要必要的宽度，不强制换行	a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
可变元素	根据上下文关系确定该元素是块元素还是内联元素	applet, button, del, iframe, ins, map, object, script

改变一个元素显示
- 可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循 web 标准。
- 利用 CSS 我们可以摆脱上面表格里 HTML 标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
- 主要用的 CSS 样式有以下三个：
  - display: block; – 显示为块级元素
  - display: inline; – 显示为内联元素
  - display: inline-block; – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
- 我们常将所有 <li> 元素加上 display: inline-block; 样式，原本垂直的列表就可以水平显示了。
- 注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为 display: block; 是不允许有它内部的嵌套块元素。

实例

<style>
    p {
        display: inline;
    }
    span {
        display: block;
    }
</style>

<p>display 属性的值为 "inline" 的结果</p>
<p>两个元素显示在同一水平线上。</p>

<span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>

效果

display 属性的值为 “inline” 的结果

两个元素显示在同一水平线上。

display 属性值为 “block” 的结果这两个元素之间的换行符。

3、Visibility 可见性

visibility 属性指定一个元素是否是可见的。

属性	描述	CSS	备注	🔗
visibility	指定一个元素是否是可见的，即使不可见的元素也会占据页面上的空间	2		🔗

属性值

值	描述
visible	默认值。元素是可见的
hidden	元素是不可见的
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”
inherit	规定应该从父元素继承 visibility 属性的值

当设置元素 visibility: collapse; 后，一般的元素的表现与 visibility: hidden; 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group 等，其表现却跟 display: none; 一样，也即其占用的空间会释放。
在不同浏览器下，对 visibility: collapse; 的处理方式不同：
- visibility: collapse; 的上述特性仅在 Firefox 下起作用。
- 在 IE 即使设置了 visibility: collapse; 还是会显示元素。
- 在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse; 与 visibility: hidden; 没有什么区别，即仍会占用空间。

实例

<style>
    table, th, td {
        border: 1px solid black;
    }
    tr.collapse {
        visibility: collapse;
    }
</style>

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr class="collapse">
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>