元素的显示与隐藏

逃跑的火焰

• 本质：让一个元素在页面中隐藏或显示出来
• display：显示隐藏
  • 用于设置一个元素应如何显示
  • display：none；隐藏对象
  • display：block；隐藏对象
  • 【注意】
    • display隐藏元素后，不在占有原来的位置
      
    
    
• visibility：显示隐藏
  • visibility：visible；元素可视
  • visibility：hidden：元素隐藏
  • 【注意】
    • visibility隐藏元素后，继续占有原来的位置
      
    
    
• overflow：溢出显示隐藏
  
  
  • overflow属性制定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么
  • visible
  • hidden
  • scroll：溢出的部分显示滚动条
    
    

属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容，超过的部分隐藏掉
scroll不管超过内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分影响布局
• 但是如果有定位的盒子，请慎用overflow：hidden；因为他会隐藏多余的部分