CSS布局(进阶必备知识)-一一网

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

TIP ? 镜破不改光，兰死不改香。–孟郊

前言

CSS布局问题成了现在面试官喜欢考察的一个重点，因为想要写好一个页面，布局是基本的东西。

垂直居中问题

将某个元素在容器中水平居中，你有几种思路？像这样的问题，答案肯定是多多益善。重点的不是你掌握的方法数量，而是你对已经掌握的方法到底理解到什么程度。很多程序员只是会写代码，但是对相关的原理却说不清楚，在面试时会吃很大的亏。

1、绝对定位

margin设置为负值(拉回模式)

.center{
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

.container{
    width: 100%;
    height: 100%;
    background: white;
    position: relative;
}

<div class="container">
    <div class="center"></div>
</div>
复制代码

这种场景，元素的宽高都是已知的

2、margin: auto

实际的开发中，当我们想要水平居中某个元素时，可以把它的margin设置为

margin: 0 auto;
复制代码

为什么设置auto可以让元素相对于父元素水平居中？这点估计很多人都答不上来。其实，这和auto这个属性的取值有关。auto在任何情况下，只会取下面两种值中的一个：

父元素剩余空间的宽度
0

何时取1，何时取2？

这是由元素的布局方式决定的，当元素的布局方式为static／relative且宽高已知时，auto取1中的值；当元素的布局方式为absolute／fixed或者float／inline或者宽高未知时，auto就取2中的值。

注意：上面auto的取值均是水平方向，垂直方向上，auto不会自动填充。那么如何利用auto实现元素的垂直居中？

利用元素的流体特性。流体特性：当一个绝对定位元素，其对定位方向属性同时有具体定位数值的时候，流体特性就发生了。流体特性的妙处，在于元素可自动填充父级元素的可用尺寸。

.center{
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
复制代码

这里的left、right、top、bottom的值其实没有实际的大小描述意义。我们只要确认其存在就行，就算不是0，也可以激发其流体特性。

3、css3动画属性

在宽高不定的情况下，我们一般是使用transform这个属性来实现的：

.center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
复制代码

transform 是css3引入的一个动画属性，它允许我们对元素进行旋转、缩放、倾斜、移动，这里我们用到的就是它的移动能力。

4、flex

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

这样我们就可以轻松时现水平垂直居中了。

5、table

现在很多团队都已经不用table布局了，但是table布局的兼容性却是不错

.container{
    display: table;
    text-align: center;
    vertical-align: middle;
}
复制代码

BFC

BFC是什么？如何创造一个BFC？

BFC就是一个作用范围。可以把它理解成是一个独立的容器。注意这个“独立”，它意味着这个作用范围和外界是毫不相关的。

从定义下手不是个好思路，我们应该从特性下手。也就是说，直接去解释 BFC 能解决什么问题、能够用于什么场景。

BFC主要被用来解决以下常见的布局问题：

清除浮动
阻止 margin 发生重叠
阻止元素被浮动的元素覆盖

常见的创建BFC的方法：

float 的值不是 none
position 的值不是 static 或者 relative
display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
overflow 的值不是 visible

注意：创建 BFC 的方法还有很多，这里是使用频率较高的几种

BFC清除浮动

<style>

.floatBox1 { 
    width: 100px; 
    height: 100px; 
    float: left;
    border: 1px solid #333; 
    background: red;
}

.floatBox2 { 
    width: 100px; 
    height: 100px; 
    float: left;
    border: 1px solid #333; 
    background: red;
}

.box {
    background: yellow; 
    border: 1px solid #333;
}

</style>

<body>
    <div class="box">
        <div class="floatBox1"></div>
        <div class="floatBox2"></div>
    </div>
</body>
复制代码

浮动前：

浮动后：

解决这个副作用，有一个非常成熟的方案叫做“清除浮动”

overflow

.box{
    background: yellow;
    border: 1px solid #333;
    overflow: auto;
}
复制代码

成功创建了一个BFC

BFC解决重叠边距问题

<style>
.box {
    background: yellow; 
}
.box1, .box2{
    padding: 0;
    width: 100px;
    height: 100px;
    margin: 20px 0 20px 0;
    background-color: red;
    color: #fff;
}

</style>

<body>
    <div class="box">
        <div class="box1">我是盒子一号</div>
        <div class="box2">我是盒子二号</div>
    </div>
</body>
复制代码

只有一个20px的外边距。在CSS当中，相邻的两个盒子的外边距会被结合成一个单独的外边距。这种合并外边距的方式就叫折叠。那么我们怎么实现每一个元素的外边距都能生效呢？这时BFC就能派上用场了

<style>
.box {
    background: yellow; 
}
.box1, .box2{
    padding: 0;
    width: 100px;
    height: 100px;
    margin: 20px 0 20px 0;
    background-color: red;
    color: #fff;
}
.box-container{
    overflow: hidden;
}
</style>

<body>
    <div class="box">
        <div class="box-container">
            <div class="box1">我是盒子一号</div>
        </div>
        <div class="box-container">
            <div class="box2">我是盒子二号</div>
        </div>
    </div>
</body>
复制代码

BFC阻止元素被浮动的元素覆盖

CSS中有一种常见的布局效果：两列布局，一列宽度固定，另一列自适应。实现这种效果，有一条路就是基于浮动来做。

<style>
.floatBox {
    width: 100px;
    height: 100px;
    float: left;
    border: 1px solid #333;
    background: yellow; 
}
.box2{
    height: 100%;
    border: 1px solid #333;
    background: blue;
}
</style>

<body>
    <div class="floatBox">
        我是被浮动的元素
    </div>
     <div class="box2">
        我没有被浮动，测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    </div>
</body>
复制代码

.box2{
  height: 100%;
  border: 1px solid #333;
  background: blue;
  overflow: hidden;
}
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

喜欢就支持一下吧

数据结构/算法知识引导篇

70行代码带你手写一个useState及完成对hook原理的初探

ImageMagick SGI图像文件未明远程栈缓冲区溢出漏洞

CGIScript.NET csMailto隐藏表单字段远程命令可执行漏洞

AtHoc Toolbar远程缓冲区及格式串漏洞

在WebGL场景中管理多个卡牌对象的实验

CSS布局(进阶必备知识)

前言

垂直居中问题

1、绝对定位

2、margin: auto

3、css3动画属性

4、flex

5、table

BFC

BFC是什么？如何创造一个BFC？

BFC清除浮动

BFC解决重叠边距问题

BFC阻止元素被浮动的元素覆盖

数据结构/算法 知识引导篇

70行代码带你手写一个useState及完成对hook原理的初探

ImageMagick SGI图像文件未明远程栈缓冲区溢出漏洞

CGIScript.NET csMailto隐藏表单字段远程命令可执行漏洞

AtHoc Toolbar远程缓冲区及格式串漏洞

在WebGL场景中管理多个卡牌对象的实验

CSS布局(进阶必备知识)

前言

垂直居中问题

1、绝对定位

2、margin: auto

3、css3动画属性

4、flex

5、table

BFC

BFC是什么？如何创造一个BFC？

BFC清除浮动

BFC解决重叠边距问题

BFC阻止元素被浮动的元素覆盖

数据结构/算法知识引导篇