【css】隐藏元素:display、opacity、visibility

display

1、display 属性是 CSS 中最重要的属性之一，主要用来控制元素的布局，通过 display 属性您可以设置元素是否显示以及如何显示。

2、display属性可以控制元素的渲染方式。

3、根据元素类型的不同，每个元素都有一个默认的 display 属性值。
        例如<div>默认的 display 属性值为 block（块级元素），而<span>默认的 display 属性值为 inline（行内元素）， 您也可以手动将元素的 display 属性转换为其它值。

display 属性的可选值

值	描述
none	隐藏元素
block	将元素设置为块级元素
inline	将元素设置为内联元素
list-item	将元素设置为列表项目
inline-block	将元素设置为行内块元素
table	将元素设置为块元素级的表格（类似<table>）
inline-table	将元素设置为内联元素级的表格（类似<table>）
table-caption	将元素设置为表格的标题（类似<caption>）
table-cell	将元素设置为表格的单元格（类似<td>和<th>）
table-row	将元素设置为表格的行（类似<tr>）
table-row-group	将元素设置为表格的内容部分（类似<tbody>）
table-column	将元素设置为表格的列（类似<col>）
table-column-group	将元素设置为表格中一个或多个列的分组（类似<colgroup>）
table-header-group	将元素设置为表格的头部（类似<thead>）
table-footer-group	将元素设置为表格的脚（类似<tfoot>）
box	CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最老版本）
inline-box	CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最老版本）
flexbox	CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的过渡版本）
inline-flexbox	CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的过渡版本）
flex	CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最新版本）
inline-flex	CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最新版本）
run-in	根据上下文来决定将元素设置为块级元素或内联元素
inherit	从父元素继承 display 属性的值

伸缩盒子（弹性盒子）是 CSS3 中一种新的布局模式，引入伸缩盒子的目的是提供一种更加有效的方式来对页面中的元素进行排列、对齐和分配空间，当页面需要适应不同的屏幕大小以及设备类型时这种布局方式能够确保元素拥有恰当尺寸和位置。

 opacity

1、 opacity 属性用来设置元素的透明度，它不仅对颜色有效，对图像或者页面中其它的元素也有效。
        通过 rgba()、hsla() 可以设置颜色的透明度，但是它们只能在定义颜色的同时设置透明度，无法对图像或者其它元素设置透明度。

2、将元素的opacity(不透明度)设置为0，可以实现元素的隐藏，同时保留其所占的位置。

opacity: number;

其中 number 为一个 0~1 之间的浮点数（小数），用来表示元素的透明度，值越小则越透明（0 表示完全透明，1 表示完全不透明）。

另外，在使用 opacity 属性时，还需要注意以下几点：

• 当一个元素定义了 opacity 属性，并且其值小于 1 时，那么它的子元素也会拥有同样的透明度；
• 当一个元素定义了 opacity 属性，并且其值小于 1 时，将会重新定义该元素默认的 z-index 属性，如果其它的元素为非定位元素，那么该元素的堆叠级别将会高于其它元素；
• 如果定义的 opacity 属性值超过了指定的范围，那么则截取与之最相近的值，例如 1.5 将截取为 1。

visibility

 1、 visibility 属性用来设置元素是否可见，您可以将该属性与 JavaScript 一起使用，来创建非常复杂的菜单或网页布局。
        比如在网页中做一些测试题时您可以使用 visibility 属性将题目的答案或解析隐藏起来，需要时再将其展示出来。

    visibility 属性的可选值

值	描述
visible	默认值，表示元素是可见的
hidden	隐藏元素
collapse	主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden”
inherit	从父元素继承 visibility 属性的值