Open maomao1996 opened 1 year ago
这是一道经典面试题，也是最近帮朋友解决稿定设计的水印时想了各种方案，所以在此总结下（目前就 11 种）
隐藏元素的若干方法 Demo
修改元素的 width 或者 height 属性（需要配合 overflow: hidden; 使用）
width
height
overflow: hidden;
特点：
使元素不再显示，其对布局不会有影响
隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明，将其子元素设为 visibility: visible 时则该子元素依然可见
visibility: visible
visibility - CSS：层叠样式表 | MDN
当元素之间重叠的时候 z-index 较大的元素会覆盖较小的元素在上层进行显示。
z-index
将元素的 z-index 属性设置为负值来达到隐藏元素的效果（实际是将元素放在了我们看不到的层叠上下文中）
z-index - CSS：层叠样式表 | MDN
层叠上下文 - CSS：层叠样式表 | MDN
position
static
flex
grid
auto
opacity
1
transform
none
filter
backdrop-filter
clip-path
mask / mask-image / mask-border
mix-blend-mode
normal
contain
layout
paint
isolation: isolate
-webkit-overflow-scrolling: touch
will-change
通过 position: absolute; left: -9999px 将元素移除可视区域来达到隐藏元素的效果
position: absolute; left: -9999px
将元素的颜色值属性 color background-color 设置为 transparent 达到隐藏元素的效果
color
background-color
transparent
clip-path 属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。可以使用 clip-path: circle(0) 来将元素隐藏
clip-path: circle(0)
clip-path（CSS：层叠样式表）—— MDN
transform 属性允许你旋转、缩放、倾斜或平移指定元素。可以使用 transform: scale(0) 来将元素隐藏，还可以使用 rotateY(90deg) skew(90deg) 等属性达到隐藏元素效果
transform: scale(0)
rotateY(90deg)
skew(90deg)
transform - CSS：层叠样式表 | MDN
opacity 属性用于指定一个元素的不透明度
当 opacity 的属性值不为 1 时，会把元素放置在一个新的层叠上下文中 一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值
当 opacity 的属性值不为 1 时，会把元素放置在一个新的层叠上下文中
一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值
opacity - CSS：层叠样式表 | MDN
opacity() 转化图像的透明程度（已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速）
opacity()
filter - CSS：层叠样式表 | MDN
全局属性 hidden 是一个布尔属性，如果一个元素设置了这个属性，它就不会被显示（本质上是使用 display: none）
hidden
display: none
hidden - HTML（超文本标记语言） | MDN
不使用 JavaScript 来隐藏元素的若干方法
这是一道经典面试题，也是最近帮朋友解决稿定设计的水印时想了各种方案，所以在此总结下（目前就 11 种）
隐藏元素的若干方法 Demo
1. width height
修改元素的
width或者height属性（需要配合overflow: hidden;使用）特点：
2. display: none
使元素不再显示，其对布局不会有影响
特点：
3. visibility: hidden
隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明，将其子元素设为
visibility: visible时则该子元素依然可见visibility - CSS：层叠样式表 | MDN
特点：
4. relative + 负 z-index
将元素的
z-index属性设置为负值来达到隐藏元素的效果（实际是将元素放在了我们看不到的层叠上下文中）z-index - CSS：层叠样式表 | MDN
创建层叠上下文
层叠上下文 - CSS：层叠样式表 | MDN
position不为staticflex和grid容器的子元素且z-index值不为autoopacity不为1transform不为nonefilter不为nonebackdrop-filter不为noneclip-path不为nonemask / mask-image / mask-border不为nonemix-blend-mode不为normalcontain为layout、paint或包含它们其中之一的合成值isolation: isolate-webkit-overflow-scrolling: touchwill-change特点：
5. absolute + 负 left
通过
position: absolute; left: -9999px将元素移除可视区域来达到隐藏元素的效果特点：
6. color + background
将元素的颜色值属性
colorbackground-color设置为transparent达到隐藏元素的效果特点：
7. clip clip-path
clip-path属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。可以使用clip-path: circle(0)来将元素隐藏clip-path（CSS：层叠样式表）—— MDN
特点：
8. transform
transform属性允许你旋转、缩放、倾斜或平移指定元素。可以使用transform: scale(0)来将元素隐藏，还可以使用rotateY(90deg)skew(90deg)等属性达到隐藏元素效果transform - CSS：层叠样式表 | MDN
特点：
9. opacity: 0
opacity属性用于指定一个元素的不透明度opacity - CSS：层叠样式表 | MDN
特点：
10. filter: opacity(0)
opacity()转化图像的透明程度（已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速）filter - CSS：层叠样式表 | MDN
特点：
11. 全局属性 hidden
全局属性
hidden是一个布尔属性，如果一个元素设置了这个属性，它就不会被显示（本质上是使用display: none）hidden - HTML（超文本标记语言） | MDN
特点：