css

浮动布局

在学习浮动布局和定位布局之前，我们先来了解“正常文档流”和“脱离文档流”。深入了解这两个概念，是学习浮动布局和定位布局的理论前提。

正常文档流： 将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”也就是说，正常文档流指的就是默认情况下页面元素的布局情况。
脱离文档流： 脱离文档流，指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。换一句话说，如果我们想要改变正常文档流，可以使用两种方法：浮动和定位。

浮动

我们可以通过设置float属性让元素向左浮动或者向右浮动：

float: left // 左浮动
float: right // 右浮动

如果要让两个或者多个块元素并排在同一行，这个时候可以考虑使用浮动，将块元素脱离正常文档流来实现。

清除浮动

浮动会影响周围元素，并且还会引发很多预想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。 clear属性取值如表所示：

在实际开发中，我们几乎不会使用“clear:left”或“clear:right”来单独清除左浮动或右浮动，往往都是直截了当地使用“clear:both”来把所有浮动清除，既简单又省事。也就是说，我们只需要记住“clear:both” 就可以了。示例如下:

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
    .container {
        width: 200px;
        background-color: yellow;
    }
    .left {
        width: 50px;
        height: 50px;
        float: left;
        background-color: black;
    }
    .center {
        width: 50px;
        height: 50px;
        float: right;
        background-color: pink;
    }
    /* .right {
        clear: both; // 不清除浮动
    } */

</style>

浮动元素子盒子不占位，无法撑起父盒子

.right {
    clear: both; //清除浮动
}

清除浮动，撑起父盒子

事实上，可以用来清除浮动的不仅仅只有“clear:both”，还有 “overflow:hidden”，以及其他更为常用的伪元素
浮动涉及的理论知识极其复杂，其中包括块元素和行内元素、CSS盒子模型、脱离文档流、BFC、层叠上下文。(这里只理清最基础的概念，不对这些做深入讨论)

定位布局

定位布局共有4种方式，position 属性取值如下：

固定定位

所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置，并且会脱离文档流
先使用“position:fixed”让元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。 注意，这4个值的参考对象是浏览器的4条边。

相对定位

所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。语法如下：

position: relative;
top: 像素值;
left: 像素值;
right: 像素值;
bottom: 像素值;

绝对定位

在CSS中，我们可以使用 “position:absolute;” 来实现绝对定位。一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。

静态定位：

在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。也就是说，元素position属性的默认值是static。
一般情况下，我们用不到“position:static”，不过在使用JavaScript来控制元素定位时，如果想要使元素从其他定位方式变成静态定位，就需要使用“position:static”来实现。

css3

多列布局

在CSS3之前，如果想要设计类似报纸那样的多列布局，有两种方式可以实现：一种是“浮动布局”，另一种是“定位布局”。不过这两种方式弊端都很多：浮动布局比较灵活，但不容易控制；定位布局可以精准定位，但是却不够灵活。

为了解决多列布局的难题，CSS3新增了一种布局方式——多列布局。 多列布局的应用非常广泛，像各大电商网站、素材网站中常见的 “瀑布流效果” 就用到了多列布局。

tips：利用多列布局实现瀑布流效果十分简单，只要设置好容器每列的大小和相关样式即可

<div class="container">
    <div><img src="" /></div>
</div>
<style>
.container {
    column-width: 150px;
    column-gap: 5px
}
.container div {
    width: 150px;
    margin: 4px 0px;
}
</style>

多列布局的属性

示例如下：

    <div class="container">
        <h1>多列布局</h1>
        <p>当需要在页面中展示大量文本时，如果每段的文本都很长，阅读起来就会非常麻烦，有可能读错行或读串行。为了提高阅读的舒适性，CSS3 中引入了多列布局模块，用于以简单有效的方式创建多列布局。所谓多列布局指的就是您可以将文本内容分成多块，然后让这些块并列显示，类似于报纸、杂志那样的排版形式，如下图所示：</p>
    </div>
    <style>
        .container {
            width: 400px;
            background-color: yellow;
            column-count: 2; /** 分两列*/
            column-gap: 10px; /** 间距 20px */
            column-rule: 1px solid pink; /** 列与列间的边框样式，复合属性，三个属性可以分别独立设置 */
        }
        h1 {
            column-span: all; /** 跨列展示 */
            text-align: center;
        }
        p {
            margin: 0;
        }
    </style>

弹性布局

简介

为了解决传统布局的死板以及不足，CSS3新增了一种新型的弹性盒子模型。通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。弹性盒子模型属性：

tips：实际上我们只需要重点掌握 flex、flex-flow、order、justify-content、align-items 这 5 个属性就可以了，这样可以大大减少我们的记忆负担。

特点

记住一点：在使用弹性盒子模型之前，你必须为父元素定义“display:flex;”或“display:inline-flex;”，这样父元素才具有弹性盒子模型的特点。弹性盒子的特点：

子元素宽度之和小于父元素宽度。因此，子元素会保持原来的宽度。
子元素宽度之和大于父元素宽度。因此，子元素会按比例来划分剩余宽度。

<div class="container">
   <div class="son1"></div>
   <div class="son2"></div>
   <div class="son3"></div>
</div>
<style>
    .container {
        width: 400px;
        height: 400px;
        background-color: pink;
        display: flex
    }
    
    .son1 {
        width: 150px;
        background-color: blue;
    }

    .son2 {
        width: 150px;
        background-color: red;
    }

    .son3 {
        width: 150px;
        background-color: orange;
    }

</style>

实战演示

demo1

利用 flex 属性实现宽度分配
flex: flex-grow flex-shrink flex-basic
flex：1 =》 flex: 1 1 auto;
flex: 2 => flex: 2 1 auto

<div class="container">
   <div class="son1"></div>
   <div class="son2"></div>
   <div class="son3"></div>
</div>
<style>
    .container {
        width: 400px;
        height: 400px;
        background-color: pink;
        display: flex;
    }
    
    .son1 {
        flex: 1;
        background-color: blue;
    }

    .son2 {
        flex: 2;
        background-color: red;
    }

    .son3 {
        flex: 1;
        background-color: orange;
    }
</style>

demo2

利用 justify-content 和 align-items 实现垂直水平居中
利用 order 属性更换盒子顺序
利用 flex-flow 让盒子纵向排列

<div class="container">
   <div class="son1"></div>
   <div class="son2"></div>
   <div class="son3"></div>
</div>
<style>
    .container {
        width: 400px;
        height: 400px;
        background-color: pink;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column nowrap;
    }
    
    .son1 {
        order: 2;
        width: 100px;
        height: 50px;
        background-color: blue;
    }

    .son2 {
        order: 3;
        width: 100px;
        height: 50px;
        background-color: red;
    }

    .son3 {
        order: 1;
        width: 100px;
        height: 50px;
        background-color: orange;
    }

</style>

Grid 布局

juejin.cn/post/685457…

总结

如果不是为了面试不用刻意去记里面一些具体属性，多思考那种布局适用于那些场景。如果对你有所帮助就给个三连吧！

CSS 布局汇总篇

css