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

事例1：公司的网站项目

原始代码

 <div class="detail-content">
          <p class="ph"><em>机构</em>一个并不知名的机构</p>
          <p class="ph" ><em>联系人</em>CoderZB</p>
           <p class="ph" ><em>电话</em>18888888888</p>
           <p class="ph"><em>地址</em>山东省不知名的一个地方儿</p>
  </div>

image.png

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

<div class="detail-content">
    <p class="ph"><em>机构</em>一个并不知名的机构</p>
    <p class="ph" style="display:none;"><em>联系人</em>CoderZB</p>
    <p class="ph" style="display:none;"><em>电话</em>18888888888</p>
    <p class="ph"><em>地址</em>山东省不知名的一个地方儿</p>
</div>

image.png

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

<div class="detail-content">
      <p class="ph"><em>机构</em>一个并不知名的机构</p>
      <p class="ph" style="visibility: hidden;"><em>联系人</em>CoderZB</p>
      <p class="ph" style="visibility: hidden;"><em>电话</em>18888888888</p>
      <p class="ph"><em>地址</em>山东省不知名的一个地方儿</p>
</div>

image.png

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

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

<style>
    .hasSignCircleNum,.processingCircleNum,.evaluateCircleNum{
      width:17px;
      height:17px;
      /*margin-left: 52%;
      margin-top: -30.8%;*/
      background-color:#F00;
      border-radius:8.5px;
      visibility: hidden;
    }

    .hasSignCircleNum span,.processingCircleNum span,.evaluateCircleNum span{
      height:17px;
      line-height:17px;
      display:block; color:#FFF;
      text-align:center;
      font-size: 12px;
      /*display: none;*/
      visibility: hidden;

    }
</style>


  <div class="mySignUpContent">
      <div class="mySignUpTop">
        <div class="mySignUpOrangeLine"></div>
        <span style="font-size:15px;color:#333333;margin-left:4px;">我的报名</span>
      </div>

      <div class="mySignUpBottom">
        <div class="leftHasSignUp" onclick="divClick('已报名')">

          <div class="leftHasSignUpContent">

              <svg class="icon" aria-hidden="true" style="font-size:32px;">
                  <use xlink:href="#icon-yibaoming" ></use>
              </svg>
              <span style="font-size:12px;">已报名</span>
              <div class="CircleContent">
                <div class="hasSignCircleNum">
                  <span></span>
                </div>
              </div>
          </div>



        </div>
        <div class="centerWorking" onclick="divClick('进行中')">
            <div class="leftHasSignUpContent">
                <svg class="icon" aria-hidden="true" style="font-size:32px;">
                    <use xlink:href="#icon-jinhangzhong" ></use>
                </svg>
                  <span style="font-size:12px;">进行中</span>
          </div>

          <div class="CircleContent">
            <div class="processingCircleNum">
              <span></span>
            </div>
          </div>
        </div>

        <div class="rightWaitEvaluate" onclick="divClick('待评价')">
            <div class="leftHasSignUpContent">
                <svg class="icon" aria-hidden="true" style="font-size:32px;">
                    <use xlink:href="#icon-pingjia" ></use>
                </svg>
                <span style="font-size:12px;">待评价</span>
            </div>

            <div class="CircleContent">
              <div class="evaluateCircleNum">
                <span></span>
              </div>
            </div>
        </div>
      </div>
  </div>

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

占位隐藏:显示.png

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

不占位隐藏:显示.png