如果需要保留空间和交互,则选择opacity: 0;如果需要保留空间但不需要交互,则选择visibility: hidden;如果需要完全移除元素,则选择display: none。 记住要考虑性能和布局的影响。
display: none和opacity: 0:是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。 visibility: hidden:是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式。 性能: displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容,性能...
opacity: 0 ：适用于需要实现淡出效果的场景，比如弹出层的显示和隐藏。visibility: hidden ：适用于需要占据原来空间的元素，但不需要显示的场景，比如菜单的展开和收起。display: none ：适用于需要完全隐藏元素的场景，比如实现一个开关，点击开关后可以隐藏或者显示某个元素。
display: none:元素将脱离文档流,不占据原来的空间,会引起页面的重排 visibility: hidden:不会脱离文档流,元素不可见仍然占据原来的位置 opacity: 0:不会脱离文档流,元素不可见仍然占据原来的位置 是否继承可见性 display: none 和 opacity: 0,子元素会和父元素一样保持不可见。 visibility: hidden 的父元素下,若...
display和visbility顾名思义都是为了隐藏页面元素,下面来看看二者的区别。opacity最后再说。 一、display:none 1、给元素设置了display:none属性后,该元素就隐藏了,占用的空间也消失了。 原来是这样: A按钮 B按钮 C按钮 加了display:none 属性后 A按钮 B...
display:none 会让元素完全从渲染树中消失,渲染的时候不占据任何空间。不能点击,子孙元素不继承该样式,但是由于display:none元素不渲染,所以子孙不可显示。 visibility:hidden 不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见。不能点击,子孙元素继承visibility:hidden样式,可自设置样式visibility:visibile覆盖...
display: none; 1、浏览器不会生成属性为display: none;的元素。2、display: none;不占据空间(毕竟都不渲染啦),所以动态改变此属性时会...
visibility:hidden和opacity:0元素虽然隐藏了,但它们仍然占据着空间,在render tree中存在,它们俩只会引起页面重绘,不会引起回流。 子元素继承 display:none,不会被子元素继承,但是父元素都不在了,子元素自然也就不会显示了; visibility:hidden ,会被子元素继承,可以通过设置子元素visibility:visible 使子元素显示出来...
1. display:none 设置display:none,让这个元素消失 消失不占据原本任何位置 连带子元素一起消失 元素显示:display:block 2. visibility:hidden 元素消失,只是视觉消失,在页面中实际存在,对布局依然起作用 元素显示:visibility:visible 3. opacity:0 opacity值为0代表透明度为0 ...
display: none、visibility: hidden与opacity: 0都可以让元素隐藏,它们之间的区别见下表: 表格的解读: display:none其实很好理解,只要记住设置该属性的元素并不会出现在渲染树中这一点就行了,那么其他的一些特性(行为)想想也知道了:肯定不占据页面空间、不可点击、子节点也不可修改、transition无效,这些其实都是废话...