CSS元素的显示与隐藏

元素的显示与隐藏

1 display 显示隐藏

1.1 display 隐藏属性

  display用于设置一个元素应如何显示。

1. display: none ; 隐藏对象
2. display: block; 除了转换为块级元素之外，同时还有显示元素的意思

  display 隐藏元素后，不再占有原来位置。

2 visibility 显示隐藏

 visibility 属性用于指定一个元素应可见还是隐藏。

1. visibility: visible; 元素可视
2. visibility: hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用visibility:hidden.
如果隐藏元素不想要原来位置，就用display: none。

3 overflow 溢出显示隐藏

 overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超过的部分隐藏掉
scroll	不管超过内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
 但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

4 面试题

重排一定重绘，重绘不一定重排

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件
opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的