CSS布局汇总

茴香馅饺子~

于 2024-07-28 13:07:38 发布

阅读量341

点赞数 6

分类专栏： HTML+CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_48051526/article/details/140731821

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写在前面

去年毕业，工作难寻，入行前端，工作一年，学疏才浅，心有不甘，提升自我，笔记分享，仅为鞭策，知识浅薄，若有盲区，望，不吝赐教。

一、布局概述

作为一名前端工程师，对于UI设计搞的还原度是非常重要的，能够完美地还原UI设计稿一项最基础的能了。在进行界面还原的时候，对于界面布局方式的选择是非常重要的。所以，对于布局方式我们应该要熟记于心，下面是我对于布局方式的一个汇总。

二、CSS常见的布局方式

position定位布局 - 传统的定位方式之一，利用定位属性辅助布局
flex弹性布局 - 当前最流行，也是面试问到最多的布局方式
float弹性布局
grid网格布局 - 好用到但是兼容性比较差，不建议用
column多列布局 - 类似于仿报纸的多栏结构布局

三、position定位布局

3.1、属性值

属性值	作用
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 left 位置添加 20 像素。`（子绝父相）`
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

1. static(默认值)

默认值，静态定位，即没有任何定位，一般情况下不需要主动设置

2. relative

相对定位，使用left、top、right、bottom相对于元素本身的位置进行定位，不会影响其他元素，也不会脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素布局定位</title>
    <style>
        .father {
            width: 500px;
            height: 300px;
            background-color: pink;
            position: relative;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="father">
    </div>
    <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

relative

3. absolute

绝对定位，相对于最近的有定位(非static)的父级元素进行定位，如果父级都没有定位方式，那就相对于浏览器dom进行定位。

解析

1、absolute和float一样脱离了文档流，进入了浮动状态，因此两者只能同时存在一个
2、absolute脱离了文档流，他不受overflow的限制
3、大部分人容易混淆的部分，他并不是只相对于relative定位，如果父元素设置了absolute，他也是相对于父元素进行定位，也叫“子绝父绝”。
4、因此并不只有“子绝父相”，所谓的“子绝父相”，只是因为以前在网页中布局的时候，子元素因为不占位置，所以父元素必须要设置相对定位才会使子元素正常的显示在父元素之中。同时父元素的relative限制住了子元素的位置，这时候子元素通过left、right、top、bottom设置的属性值永远不会超出父元素。

使用场景
1、可以通过left、right、top、bottom控制元素的位置，可以是像素，也可以是百分比(这里的百分比是以父元素的宽高为1)
2、如果多个子元素设置了绝对定位，可以通过设置z-index来控制层级，如果不设置z-index，则后来居上（后面的元素在上层）
3，相对定位具有强依赖。如果设置了父元素相对定位，则缺点是对于父元素过度依赖，一旦父元素改变，则样式必定错乱，而且需要根据left、top等偏移量去计算。因此可以使用无依赖的绝对定位

原理：
利用元素的跟随性，配合margin来实现。元素的跟随性是指无论元素是什么类型（block、inline、inline-block），该元素原来处于什么位置，设置了absolute之后依然处于什么位置。（例如：如果是div元素独占一行，设置了absolute之后依然独占一行；如果是span行内元素紧随前面元素之后，设置了absolute之后依然是行内元素紧随前面元素之后）
实例场景：
（1）原地不动，覆盖别人
（2）尾部跟随，不占空间
优点：
不依赖父元素，不需要父元素设置position:relative
不需要设置left、top等属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素布局定位</title>
    <style>
        .father {
            width: 500px;
            height: 300px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            /* margin: 20px */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div>爹爹爹爹爹爹爹爹爹爹爹爹爹爹爹爹3</div>
    </div>
    <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

在这里插入图片描述

4.fixd

固定定位，相对于浏览器可视窗口进行定位，脱离文档流。做广告的时候用的多，不会随着页面的滚动而滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素布局定位</title>
    <style>
        .father {
            width: 100%;
            height: 3000px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: fixed;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div>爹爹爹爹爹爹爹爹爹爹爹爹爹爹爹爹3</div>
    </div>
    <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

在这里插入图片描述
摘自CSDN浏览界面时的广告

5.sticky

黏性定位，相当于relative和fixed定位的结合。元素占有自己原来的位置，但设置完left、top、right、bottom任一之后，随着鼠标的滚动会表现出fixed的效果。必须搭配一个位置属性（left、top、right、bottom），否则与relative定位效果一致。

四、flex弹性布局

flex布局详解

4.1、概述

弹性布局是现在应用最广的一种布局方式，也是在面试中问到最多的布局方式，因为flex是一个更加灵活的布局方式

4.2、flex容器的属性及

Flex布局支持6个容器属性(对父元素进行定义)：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

flex布局是定义之后对该元素的内容(或子元素)进行布局，使用display: flex;定义元素为flex布局，使用flex布局时，定义的浮动和定位都会失效；

1.flex-direction

决定主轴的方向，即子元素排列的方向

属性值	属性介绍
row(默认值)	主轴为水平方向，起点在左端。
row-reverse	主轴为水平方向，起点在右端。
column	主轴为垂直方向，起点在上沿。
column-reverse	主轴为垂直方向，起点在下沿。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Direction Example</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap; /* 允许项目换行 */
            width: 300px;
            height: 150px;
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }

        .flex-item {
            width: 50px;
            height: 50px;
            margin: 5px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
            color: #333;
        }

        /* 使用不同的 flex-direction 值来改变项目的排列方向 */

        .flex-container.row {
            flex-direction: row;
        }

        .flex-container.row-reverse {
            flex-direction: row-reverse;
        }

        .flex-container.column {
            flex-direction: column;
        }

        .flex-container.column-reverse {
            flex-direction: column-reverse;
        }
    </style>
</head>

<body>

    <!-- 使用 row 方向的 flex 容器 -->
    <div class="flex-container row">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>

    <!-- 使用 row-reverse 方向的 flex 容器 -->
    <div class="flex-container row-reverse">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>

    <!-- 使用 column 方向的 flex 容器 -->
    <div class="flex-container column">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>

    <!-- 使用 column-reverse 方向的 flex 容器 -->
    <div class="flex-container column-reverse">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>

</body>

</html>

在这里插入图片描述

2.flex-wrap

定义是否换行

属性值	属性介绍
no-wrap(默认值)	不换行
wrap	换行，第一行在上边
wrap-reverse	换行，第一行在下边

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Wrap Example</title>
    <style>
        /* styles.css */

        .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: stretch;
            margin-bottom: 20px;
            width: 200px;
            padding: 10px;
            border: 1px solid #000;
        }

        .flex-item {
            flex: 0 0 50px;
            height: 50px;
            margin: 5px;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 50px;
            border: 1px solid #666;
        }

        .nowrap {
            flex-wrap: nowrap;
        }

        .wrap {
            flex-wrap: wrap;
        }

        .wrap-reverse {
            flex-wrap: wrap-reverse;
        }
    </style>
</head>

<body>

    <h2>nowrap (默认)</h2>
    <div class="flex-container nowrap">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>

    <h2>wrap</h2>
    <div class="flex-container wrap">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>

    <h2>wrap-reverse</h2>
    <div class="flex-container wrap-reverse">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>

</body>

</html>

在这里插入图片描述

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4.justify-content

定义了项目在主轴上的对齐方式。

属性值	属性介绍
flex-start(默认值)	从头部排列
flex-end	从尾部排列
center	居中排列
space-around	平分剩余
space-between	两边贴边，剩余平分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Justify Content Example</title>
    <style>
        /* styles.css */

        .flex-container {
            display: flex;
            flex-flow: row nowrap;
            /* 设置主轴为水平且不换行 */
            width: 400px;
            height: 100px;
            margin: 0;
            padding: 0;
            list-style: none;
            border: 1px solid #000;
        }

        .flex-item {
            flex: 0 0 50px;
            /* 固定宽度为 50px */
            height: 80%;
            margin: 5px;
            background-color: pink;
            color: #fff;
            text-align: center;
            line-height: 100px;
            border: 1px solid #666;
        }

        /* flex-start */
        .flex-container-start {
            justify-content: flex-start;
        }

        /* flex-end */
        .flex-container-end {
            justify-content: flex-end;
        }

        /* center */
        .flex-container-center {
            justify-content: center;
        }

        /* space-between */
        .flex-container-between {
            justify-content: space-between;
        }

        /* space-around */
        .flex-container-around {
            justify-content: space-around;
        }
    </style>
</head>

<body>

    <h2>Justify Content Example</h2>

    <ul class="flex-container flex-container-start">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
    </ul>

    <ul class="flex-container flex-container-end">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
    </ul>

    <ul class="flex-container flex-container-center">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
    </ul>

    <ul class="flex-container flex-container-between">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
    </ul>

    <ul class="flex-container flex-container-around">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
    </ul>
</body>
</html>

在这里插入图片描述

5.align-items

定义项目在交叉轴上如何对齐。

属性值	属性介绍
stretch(默认值)	如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	居中
baseline	以项目的第一行文字的基线对齐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Align Items Example</title>
    <style>
        .flex-container {
            display: flex;
            height: 150px;
            border: 1px solid black;
            width: 200px;
        }

        .flex-item {
            width: 100px;
            background-color: lightblue;
            margin: 5px;
            text-align: center;
            line-height: 50px;
        }

        .align-start {
            align-items: flex-start;
        }

        .align-end {
            align-items: flex-end;
        }

        .align-center {
            align-items: center;
        }

        .align-baseline {
            align-items: baseline;
        }

        .align-stretch {
            align-items: stretch;
        }
    </style>
</head>

<body>

    <div class="flex-container align-start">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <div class="flex-container align-end">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <div class="flex-container align-center">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <div class="flex-container align-baseline">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <div class="flex-container align-stretch">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

</body>

</html>

在这里插入图片描述

6.align-content

定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

stretch(默认值)	轴线占满整个交叉轴
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Align Content Example</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            height: 150px;
            width: 600px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid black;
            margin-bottom: 10px;
        }

        .flex-item {
            width: 50px;
            height: 50px;
            margin: 5px;
            background-color: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 14px;
        }


        .align-start {
            align-content: flex-start;
        }

        .align-end {
            align-content: flex-end;
        }

        .align-center {
            align-content: center;
        }

        .align-between {
            align-content: space-between;
        }

        .align-around {
            align-content: space-around;
        }
    </style>
</head>

<body>


    <div class="flex-container align-start">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
    </div>

    <div class="flex-container align-end">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
    </div>

    <div class="flex-container align-center">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
    </div>

    <div class="flex-container align-between">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
    </div>

    <div class="flex-container align-around">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
    </div>
</body>

</html>

在这里插入图片描述

五、float浮动

css浮动一般用作设置页面的左右布局，浮动就是让盒子或者元素脱离正常的标准流控制，元素本来在一个位置，加一个浮动它就会像云一样飘浮起来。进而移动到指定的位置。需要记住的是，如果元素或者盒子添加了浮动就不再占有本来的位置了。

1、float属性

left	盒子左浮动
right	盒子有浮动
none	盒子不浮动
inherit	继承父元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Align Content Example</title>
    <style>
        .father {
            height: 100%;
            width: 500px;
            background-color: green;
            border: 1px solid black;
        }

        .son {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin: 10px;
        }

        .son1 {
            float: none;
        }

        .son2 {
            float: left;
        }

        .son3 {
            float: right;
        }
    </style>
</head>

<body>

    <div class="father">
        <div class="son son1"></div>
        <div class="son son2"></div>
        <div class="son son3"></div>
    </div>
</body>

</html>

在这里插入图片描述

2、清除浮动

当设置的浮动影响页面中其他内容的布局，比如父级没高度了、子盒子浮动了、浮动之后影响下面的布局了等情况时都需要清除浮动，以去除浮动对页面其他情况带来的影响；

清除浮动语法 clear

clear: left ———— 清除左侧浮动（几乎不用）
clear: right ———— 清除右侧浮动（几乎不用）
clear: both ———— 清除两侧浮动（重点用）

2.1、在浮动元素后边添加一个标签

.one p {
      background-color: #afd;
      /* 清除浮动带来的影响 */
      clear: both;
    }

<p>清除浮动方式一</p>

2.2、bfc布局法

触发父元素的bfc布局，以实现清除浮动；

.one {
     width: 500px;
      background-color: #bfa;
     /* 方法二：创建bfc布局，父元素添加一个overflow不为visible的样式 */
     overflow: hidden; 
}

2.3、伪元素清除法(推荐)

为元素选择法同伪类选择法原理基本相同，只不过这个是在父元素中添加内容来消除浮动影响；

/* 方法三：伪类选择法 */
.one:after {
     content: "";
     display: block;
     clear: both;
}

2.4、伪类清除法(推荐)

伪类清除法是与方法一一样的原理，都是在浮动的元素后添加一个节点，托起来被浮动影响的元素；

/* 方法四：伪元素选择法 */
.one::after {
     content: "";
     display: block;
     clear: both;
}

六、grid布局

grid详解
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，相当于是创建了一个二维表格，通过设置表格来进行布局，Grid布局远比 Flex布局强大。

gird布局分为两个部分，一部分是父级容器元素，一部分是子级项目元素，他们分别有不同的属性，定义不同的属性时，会有不同的效果；

6.1、容器属性

grid-template-columns 设置子项目有几列(有几个列轨道)

grid-template-columns: 200px 200px 200px;  // 表示创建三列，每列宽200px
grid-template-columns: repeat(3, 200px);   // 表示创建三列，每列宽200px
grid-template-columns: 1fr 1fr 1fr;        // 表示创建三列，三列平均分配
grid-template-columns: repeat(3, 1fr);	   // 表示创建三列，三列平均分配
grid-template-columns: minmax(100px,auto)  // 表示列最窄100px，再大随意
注：这三种定义布局样式可以进行混合使用

grid-template-rows 设置子项目有行列(有几个行轨道)

grid-template-row: 200px 200px 200px;  // 表示创建三行，每行高200px
grid-template-row: repeat(3, 200px);   // 表示创建三行，每行高200px
grid-template-row: 1fr 1fr 1fr;        // 表示创建三行，三行平均分配
grid-template-row: repeat(3, 1fr);	   // 表示创建三行，三行平均分配
grid-template-row: minmax(100px,auto)  // 表示行最窄100px，再大随意
注：这三种定义布局样式可以进行混合使用

理解显示网格和隐式网格

显示网格

显示网格就是我们在容器属性中定义的网格，显示网格样式会根据属性值的不同而不同，式直接定义的

隐式网格

隐式网格就是当我们定义的网格数量不能够将子项目容纳完，溢出的那一部分就是隐式网格，隐式网格的样式会按照默认布局

grid-low-gap=grid-gap 定义子项目每行之间的距离

grid-low-gap: 20px;	// 每行相隔20px
grid-gap: 20px;	// 每行相隔20px

grid-column-gap 定义子项目每列之间的距离

grid-column-gap: 20px;	// 每列相隔20px

grid-template-areas 定义区域，与子项目属性 grid-area 对应，对应的值相同时，显示对应的效果

grid-template-areas: ".      red  red    red    . "
					 "yellow .    .      .      . "
					 "green  .    black  black  . "
					 "green  .    .      .      blue "
					 ".      pink pink   pink   . ";
// . 表示该区域不占用，上边属性可以理解为定义了5行6列的表格，其中值相同的单元格属性一致

grid-auto-flow 定义Grid布局中每一个Grid子项“自动流动”状态，是在设置好的行列的基础上进行其余的排列

grid-auto-flow: row;	// 子项目行排列
grid-auto-flow: column;	// 子项目列排列
grid-auto-flow: dense;	// 子项目多的格子空白填充
grid-auto-flow: row dense;	// 子项目行排列，子项目多的格子空白填充
grid-auto-flow: column dense;	// 子项目列排列，子项目多的格子空白填充

justify-items/align-items 设置单元格内容的水平对齐方式/垂直对齐方式

start	从头到尾
end	从尾到头
center	居中
stretch	拉伸

place-items 设置单元格内容的空间对齐方式 = justify-items+align-items

justify-content/align-content 设置整个内容区域（所有的项目的总和）的水平和垂直的对齐方式

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;   //水平方向
align-content: start | end | center | stretch | space-around | space-between | space-evenly;     // 垂直方向

place-content 设置整个内容区域的空间对齐方式 = justify-content+align-content

grid-auto-columns/grid-auto-rows 用来设置多出来的项目宽和高

6.2、项目属性

grid-column-start 与 grid-column-end同时使用表示该项目占据的列滑道位置(对应值是对应的网格线)

grid-column =grid-column-start + grid-column-end合并的简写形式

grid-row-start 与 grid-row-end同时使用表示该项目占据的行滑道位置(对应值是对应的网格线)

grid-row =grid-row-start + grid-row-end合并的简写形式

grid-area 可以理解为一个二维的位址空间属性值：行开头/行结尾/列开头/列结尾

justify-self/align-self 设置单元格内水平方向/垂直方向的位置

place-self 设置单元格内水平方向和垂直方向的位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>gird布局</title>
  <style>
    .father {
      width: 100%;
      height: 100%;
      background-color: #bfa;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: minmax(50px, auto);
      grid-row-gap: 20px;
      /* grid-auto-flow: column dense; */
      /* justify-items: center; */
      justify-content: space-between;
    }

    .father div {
      height: 100px;
      width: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
    <div class="f">f</div>
    <div class="f">f</div>
    <div class="f">f</div>
    <div class="f">f</div>
  </div>
</body>

</html>

七、column多列布局

属性名	属性介绍
column-count	设置多少列
column-width	设置每列的宽度，与column-count不能同时使用，设置每列宽度时，会根据页面宽度自动计算有多少列
columns	column-count 和 column-width的简写，属性值二选一
column-fill	指定列于列之间的填充方式
column-gap	指定列与列之间的宽度
column-rule-color	指定列之间的颜色
column-rule-style	指定列之间的样式
column-rule-width	指定列之间的宽度
column-rule	指定列与列之间的边框样式
column-span	指定元素跨越多少列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gird布局</title>
    <style>
        .father {
            width: 100%;
            height: 100%;

            /* 设置当前列数为3列 */
            /* column-count: 3; */

            /* 设置每列的宽度，与column-count不能同时使用，设置每列宽度时，会根据页面宽度自动计算有多少列 */
            /* column-width: 100px; */

            /* column-count 和 column-width的简写，属性值二选一 */
            columns: 3;

            /* 设置列的填充方式，可以设置为auto、balance、stretch */
            /* 对列进行协调。浏览器应对列长度的差异进行最小化处理。设置了三列，虽然高度为100%，但浏览器会自动调整每列的高度，使得每列的高度尽可能相等。 */
            /* column-fill: balance; */

            /* 设置列的填充方式为自动，即浏览器根据每列的高度自动调整每列的高度 */
            /* column-fill: auto; */


            /* 设置列与列之间的间距 */
            column-gap: 150px;

            /* 设置列之间的边框宽度，颜色，样式   这里设置的边框宽度不会影响列于列之间的间距 */
            column-rule-width: 10px;
            column-rule-color: red;
            column-rule-style: double;

            /* 上边三个样式的汇总简写 */
            /* column-rule: 1px solid red; */

            /* 设置子元素横跨多少行 */
            column-span: 3;
        }
    </style>
</head>

<body>
    <div class="father">
        <h1>孙悟空大战刘备，武松大战诸葛亮，宋江暗恋林黛玉</h1>
        话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传
        至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄
        权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于
        椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，
        沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。
        帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于
        罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天
        下人心思乱，盗贼蜂起。
    </div>
</body>

</html>