面試題：使用 css 隱藏頁面元素

咱們先來講一下限制條件

1. 能夠使用 css、html、js
2. 元素爲一個 100*100 的紅色矩形，裏面包含一個 50*50 黑色矩形
3. 只要在頁面上看不到就算隱藏

測試地址：https://www.lilnong.top/static/html/hidden-dom.html

實現隱藏頁面元素

1. 移動到屏幕外面，眼不見心不煩

   1. margin
   2. left + position
   3. transform:translate

2. 使用特性

   1. display
   2. visibility
   3. opacity
   4. overflow:hidden + 0寬高
   5. transform:scale
   6. hidden 屬性

3. 移出 DOM 樹，年輕人不講武德

   1. removeChild

實現代碼

.demo1{
    margin: -9999px 9999px 9999px -9999px;
}
.demo2{
    display: none;
}
.demo3{
    visibility: hidden;
}
.demo4{
    opacity: 0;
}
.demo5{
    width: 0;height: 0;border: none;outline: none;overflow: hidden;
}
.demo6{
    left: -9999px;top: -9999px;position: absolute;
}
.demo7{
    left: -9999px;top: -9999px;position: relative;
}
.demo8{
    left: -9999px;top: -9999px;position: fixed;
}
.demo9{
    transform: translate(-9999px, -9999px);
}
.demo10{
    transform: scale(0,0)
}

留做業

做業就留給大家啦，反正我此次不寫（下次是何時我也不知道）。

如何隱藏頁面元素？（擴展題）

1. 能夠使用 css、html、js

   1. （擴展）vue、react、angular 的方法也能夠
2. 元素爲一個 100*100 的紅色矩形，裏面包含一個 50*50 黑色矩形
3. 只要在頁面上看不到就算隱藏

4. （擴展）是否佔據位置？若是佔據位置的話，是否能夠監聽到事件？好比說 click 。

   1. 若是能夠監聽到事件，那麼如何讓他沒法監聽事件。
   2. 若是不能夠監聽到事件，那麼如何讓他監聽到事件？若是沒法實現請說明理由

5. （擴展）是否存在於 DOM 樹中？

   1. 好比說是否能夠經過 children 得到？
   2. 好比說是否能夠經過 querySelector 得到？
   3. 是否能夠在開發者工具中看到？
6. （擴展）是否觸發迴流（Layout）和重繪（Painting）？