元素的显示与隐藏

元素的显示与隐藏

1. 本质：让一个元素在页面中隐藏或显示出来

2. display：显示隐藏

   • 用于设置一个元素应如何显示
   • display：none；隐藏对象
   • display：block；隐藏对象
   • 【注意】
     • display隐藏元素后，不在占有原来的位置

3. visibility：显示隐藏

   • visibility：visible；元素可视
   • visibility：hidden：元素隐藏
   • 【注意】
     • visibility隐藏元素后，继续占有原来的位置

4. overflow：溢出显示隐藏

   • overflow属性制定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么

   • visible

   • hidden

   • scroll：溢出的部分显示滚动条

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

     • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分影响布局

     • 但是如果有定位的盒子，请慎用overflow：hidden；因为他会隐藏多余的部分