CSS 利用style属性控制某个标签的隐藏(占位隐藏、不占位隐藏)

style="display:none;"不占位隐藏。显示的话 style="display:block;"
style="visibility:hidden;"占位隐藏。显示的话 style="visibility:visible;"。公司的项目运用在了

事例1：公司的网站项目

原始代码

 

          
机构一个并不知名的机构
          
联系人CoderZB
           
电话18888888888
           
地址山东省不知名的一个地方儿
  

image.png

---

style="display:none;"不占位隐藏的效果

    
机构一个并不知名的机构
    
联系人CoderZB
    
电话18888888888
    
地址山东省不知名的一个地方儿

image.png

---

style="visibility:hidden;"占位隐藏的效果

      
机构一个并不知名的机构
      
联系人CoderZB
      
电话18888888888
      
地址山东省不知名的一个地方儿

image.png

事例2：公司利用APICloud开发的APP项目

列举一个我们app最近研发的一个项目里面个人中心 角标功能使用visibility:hidden;实现占位隐藏/显示的做法，如果采用不占位隐藏，那么已报名、进行中、待评价就不会居中对齐了。

  

      

        

        我的报名
      

      

        


          


              
              已报名
              

                

                  
                
              
          



        
        

            

                
                  进行中
          

          

            

              
            
          
        

        

            

                
                待评价
            

            

              

                
              
            
        
      
  

理想的效果(采用了visibility: hidden;):进行中、已报名、待评价整体居中，效果很好

占位隐藏:显示.png

不理想的效果(采用了display: none;):：可以发现一个问题，进行中相对于已报名和待评价往上偏了。

不占位隐藏:显示.png