面试遇到的坑CSS篇 1

------------恢复内容开始------------

1.display: none和 visibility: hidden

代码

<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
background-color: #ffbbff;
height: 300px;
width: 600px;
text-align: center;
font-size:0;
margin: auto;
width: 100%;
}
div {
background-color:#ddffbb;
height: 140px;
width: 140px;
display: inline-block;
font-size:14px;
}
.div2{
display: none;
}
.div3{
visibility: hidden;
}
</style>
<div id="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>

效果

div3使用 visibility: hidden; 可以看到在第三个盒子中还是会占用空间而 div2 使用display: none;后完全消失在网页中

2.如何让三个div盒子居中在页面中显示

使用display：inline-block; 后盒子就是变成一排并且盒子之间有间隙，

使用 float:left;可消除缝隙

或者父元素添加font-size:0;此时子元素再设置font-size: 14px

待补充

------------恢复内容结束------------