元素的显示与隐藏
1 display 显示隐藏
1.1 display 隐藏属性
display用于设置一个元素应如何显示。
- display: none ; 隐藏对象
- display: block; 除了转换为块级元素之外,同时还有显示元素的意思
display 隐藏元素后,不再占有原来位置。
2 visibility 显示隐藏
visibility 属性用于指定一个元素应可见还是隐藏。
- visibility: visible; 元素可视
- 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事件,那么点击该区域,也能触发点击事件的