元素显示隐藏

隐藏元素方法

{ display: none; /* 不占据空间，无法点击 */ }
{ visibility: hidden; /* 占据空间，无法点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
{ position: relative; top: -999em; /* 占据空间，无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

overflow

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

使用 overflow 默认值（visible）以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会强制（重新）包围内容元素。这种行为（重新包围内容元素）会在每一次移动滚动条之后发生，会使得滚动体验变差（慢）。

为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

占据空间，无法点击

ｈｉｄｄｅｎ用来隐藏元素溢出部分，占据空间，无法响应点击事件

height:0：将元素的高度设置为0，并且设置overflow:hidden。使用这种方法来隐藏元素，是否可以触发事件要根据具体的情况来分析。如果元素设置了border，padding等属性不为0，很显然，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为0，很显然，这个元素相当于消失了，即无法触发点击事件。

opacity

value规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。   测试
inherit 应该从父元素继承 opacity 属性的值。

opacity是用来设置元素透明度的，但当设置成0的时候也就相当于隐藏元素了。因此，元素依然存在原来的位置，占据空间也可响应事件。如果你打算使用 opacity 属性在读屏软件中隐藏元素，很不幸，你并不能如愿。元素和它所有的内容会被读屏软件阅读，就像网页上的其他元素那样。换句话说，元素的行为就和它们不透明时一致。

可以触发点击事件，原因也很简单，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件

过滤元素filter也可使用opacity值设置透明度，不过filter现在的兼容性不好

fiflter

opacity(%)转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

visibility

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

如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏

占据空间，无法点击

空间保留，只会重绘，不会重排

适宜隐藏元素但是不希望改变布局．

和ｔｒａｎｓｉｔｉｏｎ，元素消失的时间跟transition属性设置的时间一样，但是没有动画效果

该属性会继承，假如祖先用了visibility:hidden，那么子元素也是直接显示不见，想要子元素显示让用户看见，还要必须再多写visibility：visible

display

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 ）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 ）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 ）。
table-row	此元素会作为一个表格行显示（类似 ）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 ）。
table-column	此元素会作为一个单元格列显示（类似 ）
table-cell	此元素会作为一个表格单元格显示（类似 和 ）
table-caption	此元素会作为一个表格标题显示（类似 ）
inherit	规定应该从父元素继承 display 属性的值。

none: 不占据空间，无法点击

经典的display隐藏元素,这个是彻底的隐藏了元素，不占据空间，也就不影响布局，当然也无法响应事件。

会导致浏览器的重绘与重排，因彻底消失

完全不受transition属性的影响，元素立即消失

position

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下采用这种办法未尝不可。

clip/clip-path

shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

clip属性只能在元素设置了position:absolute或者position:fixed起作用。无法在设置position:relative和position:static上工作。

• clip 只对绝对定位的元素有效
• clip 只能用于矩形，即rect()函数

clip-path

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

其默认值是none。另外简单介绍clip-path几个属性值：

• clip-source: 可以是内、外部的SVG的元素的URL引用
• basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()。具体的说明可以看CSS Shapes中有关于说明。另外在CSS Shapes 101一文中也有详细介绍。
• geometry-box: 是可选参数。此参数和basic-shape函数一起使用时，可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定，那么它会使用指定盒子形状作为裁剪的路径，包括任何(由border-radius提供的)的角的形状。

注意

• 使用 clip-path 要從同一個方向繪製，如果順時針繪製就一律順時針，逆時針就一律逆時針，因為 polygon 是一個連續的線段，若線段彼此有交集，面積區域就會有相減的狀況發生 ( 當然如果這是你要的效果就無妨了 )。
• 如果繪製時採用「比例」的方式繪製，長寬就必須要先行設定，不然有可能繪製出來的長寬和我們想像的就會有落差，使用「像素」繪製就沒有這種問題。

对属性感兴趣的狂戳这个http://www.oxxostudio.tw/articles/201503/css-clip-path.html

z-index

.hide{
    position:absolute;
    z-index:-1000;/* 不占据空间，无法点击 */
}复制代码

通过设置z-index值使其它元素遮盖该元素也算是一种隐藏了。

transform

.hide{
    transform: scale(0,0)/* 占据空间，无法点击 */
}

接下来看看 display:none和visibility:hidden

不同：

１．空间占据

２．回流与渲染

３．株连性

ｄｉｓｐｌａｙ：ｎｏｎｅ　一旦父元素设置，则子子孙孙都消失不见，无论如何都不会在显示

ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ　父元素设置了ｈｉｄｄｅｎ，子元素设置ｖｉｓｉｂｌｅ依然会显示子元素

visibility:hidden虽然让元素不可见了，但是不影响其计数效果，不会重新计算结果

visibility:hidden除了对transition友好外，对js来说也很友好

在实际开发中，需要对隐藏元素进行尺寸和位置的获取，来实现布局精确定位的交互