需要操作的屬性有：display、visibility、opacity、filter、overflow、transform
display:none; 元素隱藏，同時該元素下的子元素也會一併隱藏，並且在頁面上不佔據空間，需要顯示時新增display:block;即可
**展示
>
.box
.box1,
.box2
.box1
.box:hover .box1
style
>
class
="box"
>
class
="box1"
>
div>
class
="box2"
>
div>
div>
效果展示box1隱藏了
box1顯示出來了
visibility:hidden;元素隱藏，對該元素的子元素也會生效，元素不可見但是會保留當前元素本身的位置,顯示時visibility:visible;
**展示
>
.box
.box1,
.box2
.box1
.box:hover .box1
style
>
class
="box"
>
class
="box1"
>
div>
class
="box2"
>
div>
div>
效果展示box1隱藏並保留了位置
box1顯示出來
opacity:0;元素不可見，僅僅只表示該元素不可見，也是佔據了位置的，可以對元素本身設定偽類選擇使之顯示出來。顯示時opacity:1;**展示
>
.box
.box1,
.box2
.box1
.box1:hover
style
>
class
="box"
>
class
="box1"
>
div>
class
="box2"
>
div>
div>
效果展示opacity為0時隱藏並保留位置
opacity為1時顯示
filter:blur(999999px)，其作用效果同opacity一樣，只是filter:blur(9999px);對應的是該元素的模糊度，模糊度足夠大時，就可以使元素達到不可見的效果,恢復至可見設定filter:blur(0px);
**展示
>
.box
.box1,
.box2
.box1
.box1:hover
style
>
class
="box"
>
class
="box1"
>
div>
class
="box2"
>
div>
div>
width:0;height:0;overflow:hidden;，通過改變元素的基本樣式對元素的溢位進行隱藏，當寬高都為0時元素可以視作等同於沒有了，若元素內有內容那自然就會溢位顯示，此時將溢位的都隱藏起來，那就可以視為不見了，同時該元素也不會保留位置
**展示
>
.box
.box1,
.box2
.box1
.box:hover .box1
style
>
class
="box"
>
class
="box1"
>
div>
class
="box2"
>
div>
div>
效果展示修改了box1的寬高並做了溢位隱藏
重畫box1的寬高並使之顯示
當沒有為box1重畫寬高時，僅僅只是元素的溢位顯示
transform:scale(0);利用css3新增屬性，對元素進行乙個縮放也可達到隱藏效果，只要元素縮放程度不等於0，那麼元素始終都是可見的，縮小至0就可等同於無了，但是這種方式是會保留元素位置的，顯示時：transform:scale(1)
**展示
>
.box
.box1,
.box2
.box1
.box:hover .box1
style
>
class
="box"
>
class
="box1"
>
div>
class
="box2"
>
div>
div>
效果展示元素縮放至0
元素還原至1
論元素的隱藏
1 display none，確保元素不可見，連盒模型都不生成，真正意義上的隱藏，被隱藏的元素也不佔據文件的任何空間，所以繫結在元素上的dom事件也不會被觸發，同時，連這個元素的子孫元素也不可見。2 visibility hidden，被隱藏的元素依然佔據文件的空間，對布局產生影響，想要顯示某個子孫...
隱藏元素的方法
a.visibility hidden 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在 b.opacity 0 乙個css3屬性，設定0可以使乙個元素完全透明，製作出和visibility一樣的效果。與visibility相比，它可以被transition和animate c.posit...
隱藏元素的方法
visibility hidden 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在 opacity 0 乙個css3屬性，設定0可以使乙個元素完全透明，製作出和 visibility一樣的效果。與visibility相比，它可以被transition和animate position a...