面试考点CSS篇（二）：隐藏容器，元素的水平垂直居中和BFC容器

Peace_Love
220 阅读5分钟

隐藏容器有哪些方式

在页面上，我们经常需要控制一些元素的显示和消失，而使用css来进行控制，我们有以下这些常见的方法：

  • display：none：这个属性可以直接让元素消失。display是展示的意思，设置为none就是不拿到页面上展示，当给一个容器设置display为none时，这个容器相当于从页面上被拿掉了，所以不会占据文档流，页面会进行重排。
  • visibility：hidden：这个属性可以让元素隐身。visibility是能见度的意思，把能见度设置为hidden，相当于能见度为0，所以就被隐藏了。但是它仍占据文档流，且连同子容器也会一起被隐藏。
  • opacity：0: 这个元素仍然在那，但是我们看不见。opacity是不透明的意思，设置为0就是透明，所以我们看不见。相当于被隐藏了。所以自然还是占据文档流。

此外，还有一些不常见的莫名其妙方法：

  • position: absolute; left: -9999px;: 先使用绝对定位让元素脱离文档流，然后让它向左侧偏移巨多位置，这样我们在屏幕上就看不到，自然而然就隐藏了。
  • clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px):通过设置四个坐标点来裁剪出可视区域，当四个坐标点在一个位置时，实际上创建了一个没有面积的点，所以不可见。它虽然存在文档流中，却不会影响其他元素的布局，且无法绑定点击事件。你都找不到这个没有面积的点在哪，怎么点呢。

实现水平垂直居中

水平垂直居中也是我们经常会用到的，以下是通过css来设置水平垂直居中的方法：

  • justify-content：center； align-items：center: 这是通过设置弹性布局，使元素在主轴（默认是x轴）和交叉轴上都居中。主轴和交叉轴可以通过flex-direction：column将主轴切换为y轴。
  • justify-items: center; align-items: center或简写成 place-items: center:这是使用网格布局，分别设置水平居中和垂直居中。
  • display: absolute; top:50%; left:50%; transform: translate(-50%，-50%) ;： 这是一个笨方法，将子容器设置为绝对定位，然后让定位到父容器的中心位置，再用transform移回自身尺寸的50%。
  • 如果已知父子容器的宽高，还可以直接设置margin-top，margin-left，但要注意子容器和父容器的margin重叠，所以最好先设置BFC容器。

image.png

BFC容器

简单来说，将一个容器设置成BFC容器以后，这个容器就与世隔绝了，它的内部渲染不会影响到外部。且如果容器A的子元素B也是一个BFC容器，那么A的BFC区域不包括B的子元素。

<div class="box1"> 
    <div class="box2"></div> 
    <div class="box3"> 
        <div class="box4"></div> 
        <div class="box5"></div> 
    </div> 
    <div class="box6"></div> 
</div>

比如这段代码，如果box1和box3被设置成BFC容器，那么box1的BFC区域内有box2，3，6，而不包括box3的子元素。

如何设置BFC容器

  1. overflow：auto||hidden||scroll||overlay 设置overflow的这四个属性都可以设置为BFC容器，根据情况任选其一即可。
  2. display:flex||grid||inline-block||table 最常用的是弹性布局，除此之外还可以设置grid网格布局，inline-block（行内块级元素）和table表格布局。但是网格布局无法清除浮动。
  3. position:absolute||fixed 这个虽然可以设置BFC容器，也无法清除浮动。
  4. float:left||right 这个虽然可以设置BFC容器，却只能让父容器变得有高度，但是无法解决覆盖问题。

有什么用

BFC容器两个最主要的作用就是清除浮动和防止margin重叠。

咱们先来讲第一个清除浮动：

因为浮动可以让块级元素同行显示，但是设置了浮动之后，父容器的高度会变为0，也就是坍塌，而后面没设置浮动的块级元素会向上补位，会导致有一部分区域被浮动的元素盖住了。这时我们就可以把浮动的元素的父容器设置成BFC容器，这样BFC内部的子元素浮动，也不会影响外部那些不浮动的块级元素。

比如这段添加了浮动的代码：

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<div class="text">
    hello,world
</div>

//CSS
.box1,.box2,.box3{
    height: 100px;
    width: 100px;
    float: left;
}
.box1{
    background-color: blue;
}
.box2{
    background-color: red;
}
.box3{
    background-color: yellow;
}
.text{
    background-color: green;
    width: 100px;
    height: 200px;
}

image.png

可以看到text容器因为上面三个盒子的浮动被覆盖了一部分，这是浮动带来的影响，所以我们要清除浮动，这里我们可以使用BFC容器来清除：

//css
.container{
     overflow: hidden; //对浮动元素的父元素设置
}

image.png

第二个防止margin重叠：

当给两个相邻的元素或父子元素都设置了margin属性，但是页面上的效果可能不是我们想要的。比如下面这段代码：

<div class="box1"></div>
<div class="box2"></div>

<style>
    .box1{
        background-color: blue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    .box2{
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 30px;
    }
</style>

image.png

虽然两个盒子都设置了margin属性，按照设计的样式两个盒子应该相距10+30=40px，但是因为margin重叠，取两个margin值中较大的那一个，也就是box2的margin：30px。这时我们就可以给这两个容器各添加一个父元素，将这两个父元素都设置为BFC容器，这样这两个盒子就不会相互影响。

<div class="container">
    <div class="box1"></div>
</div>
<div class="container">
    <div class="box2"></div>
</div>

//CSS
.container{
    overflow：hidden；
}

image.png

还有一种margin重叠是父子元素的margin重叠：

<div class="box1">
    <div class="box2"></div>
</div>

//CSS
.box1{
    background-color: blue;
    width: 100px;
    height: 100px;
}
.box2{
    background-color: red;
    width: 50px;
    height: 50px;
    margin: 30px;
}

image.png

可以看到box1并没有写margin，却被写了margin的子元素box2给拽了下来。也就是子元素会带着父元素一起移动。我们同样可以使用BFC容器解决这一问题：将父元素设置为BFC容器。

//CSS
.box1{
    background-color: blue;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

image.png

avatar
文章
阅读
粉丝