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
