隐藏元素的方法、display属性的值及意义、定位position值及其意义

隐藏元素方法：

1. display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
2. visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
3. opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
4. position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
5. z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
6. clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
7. transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

	是否占据空间	是否响应事件	备注
display: none	否	否
visibility: hidden	是	否
opacity: 0	是	是
position: absolute			将元素移除可视区域内
z-index: 负值			使其他元素遮盖住该元素
transform: scale(0,0)	是	否
clip/clip-path	是	否

display属性值：

flex、grid 

position值及其意义：

	相对位置	脱离文档流	z-index生层	改变内联-块性质	备注
static
inherit					继承父元素的position属性
relative	元素原本位置	否	否	否
absolute	最近开启定位的祖先（没有就窗口）	是	是	inline->block	一般给父设relative
fixed	浏览器窗口	是	是	inline->block	特殊的absolute

 背景：

• 透明度：opacity
• 背景颜色：background-color
• 背景图片：background-image：url（1.png）
• 重复：background-repeat：no-repeat
• 位置：background-position：left、right、top、bottom、center、px、百分比
• 是否固定：background-attachment：fixed 用于设置整个背景图在窗口中固定