元素的隐藏和显示

元素的隐藏和显示

display属性

display属性用于设置一个元素如何显示

• display:none; 用于隐藏元素，且不保留原来的位置
  

• display:block; 除了转换为块级元素外，同时还有显示元素的意思
  

display隐藏元素后，不会占有原来的位置。

visibility可见性

visibility属性用于指定一个元素可见还是隐藏。

• visibility:visible; 元素可视
  

• visibility:hidden; 元素隐藏，并保留元素原来的位置
  

• visibility:none; 隐藏元素并不保留元素原来的位置
  

visibility 隐藏元素后，依然占有原来的位置。

overflow溢出

overflow实现让一个元素在页面中隐藏或者显示。

• visibility:visible; 不剪切内容也不添加滚动条
  

• visibility:hidden; 不显示超过对象尺寸的内容，超出的部分隐藏掉
  

• visibility:scroll; 不管是否有内容超出，都显示滚动条
  

• visibility:auto; 超出自动显示滚动条，不超出将不显示滚动条。
  

注意：

1. 一般情况下，都设置让溢出的内容隐藏，因为溢出的部分会影响布局。
2. 但是如果有定位的盒子，请 慎用overflow：hidden 因为会隐藏超出盒子的部分（有时候会用到设置的样式超出盒子，此时若使用hidden将会被隐藏）。