CSS的使用（四）——网页布局方式

网页的布局也就是如何对网页的元素进行排版。

一、标准流排版方式

我们所创建的元素默认的排版方式为标准流排版方式。也就是块级元素垂直排布，行内元素水平排布；同时也可以使用display对其排版方式进行修改，使用该方式两个元素之间有个缝隙。

display: inline-block;

二、浮动流排版方式（浮动布局）

若想在页面中脱离标准流，可以通过float浮动的方式，属性值为left向左向上浮动，right则向右向上浮动，采用该方式两个元素之间没有空隙。

float: left;

浮动，也就是漂浮起来。如果我们对第一个元素设置了float，但是没有对第二个设置，那么第一个元素就会漂浮起来，第二个元素就会被其覆盖。

        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .div2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }

相反的，如果我们只对第二个元素设置了float，由于第一个元素仍是块级元素自己占一行，因此第二个元素浮动在第一个元素下方，仍然是分两行的。（即如果浮动元素上边是⼀个没有浮动的块元素，则浮动元素不会超过块元素。）

2.1 浮动中的字围现象

简单来说，“字围现象”就是浮动的元素不会挡住未浮动的文字元素。同时，我们要注意，浮动流中没有居中对齐。

    <style>
        img{
            width: 80px;
            float: left;
        }
    </style>

    <!-- 图片 -->
    <img src="https://pics1.baidu.com/feed/1ad5ad6eddc451da9ddd508586207168d116329b.jpeg@f_auto?token=b68772755670d32a3313c2df0ff8ce7d" alt="">
    <!-- 文字描述 -->
    <p>第一章：程序员的浪漫，QQ的诞生
    1993年，马化腾从深圳大学毕业，怀揣着对计算机的热爱，踏入了互联网这片新兴领域。那时的他，或许还不知道自己即将开启一个怎样的时代。1998年，一个名为OICQ的即时通讯软件横空出世，这就是后来大名鼎鼎的QQ。据说，马化腾最初的动机很简单，就是想解决自己和朋友们之间的沟通问题。谁承想，这个“为了方便自己”的小工具，竟成了几代人的青春记忆，也让马化腾一跃成为了“社交魔术师”。
    第二章：“企鹅爸爸”的幽默日常</p>

2.2 高度塌陷现象

在⽂档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。

    <style>
        .father{
            width: 500px;
            border: 5px solid red;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>

    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>

但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素⽆法撑起父元素的高度，导致父元素的高度塌陷。

 float: left;

那么如何解决高度塌陷问题呢？

1.把父元素高度写死。

2.在子元素的最后加一个用作撑起父元素的空div。（不推荐，可能会引起结构混乱。）

        <!-- 撑起父元素的div -->
        <div style="clear: both;"></div>

clear属性取值有：right清除右浮动、left清除左浮动、both清除全部。

3.通过父元素的after伪类选择器，为其增加一个空元素。

        /* 解决父元素高度塌陷的方案 */
        .father::after{
            /* 空白元素 */
            content: '';
            /* 将空白元素切换为块级元素 */
            display: block;
            /* 清除浮动 */
            clear: both;
        }

4.使用BFC解决。（不推荐，当子元素比较多时，这种方式会出现滚动条。）

            /* 开启BFC解决 */
            overflow: auto;

格式化上下文（BFC），MDN对其的定义为：块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的⼀部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单来说，BFC是一个独立的布局环境，其内部元素布局与外部互不影响。

BFC布局规则：

1. 内部的Box会在垂直方向⼀个接着⼀个地放置。

2. Box垂直方向上的距离由margin决定。属于同⼀个BFC的两个相邻的Box的margin会发⽣重叠。

3. 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。

4. BFC的区域不会与float box重叠。

5. BFC就是页面上的⼀个隔离的独⽴容器，容器里面的子元素不会影响到外⾯的元素，反之亦然。

6. 计算BFC的高度时，浮动子元素也参与计算。

哪些元素会生成BFC：

1.根元素

2.float属性不为none

3.position为absolute或fixed

4.display为inline-block table-cell table-caption flex inline-flex

5.overflow不为visible

作用：

解决高度塌陷问题，以及两栏、三栏的自适应布局。

三、定位流排版方式（定位布局）

浮动定位常用于界面的框架搭建，而定位布局常用于细节的刻画。

3.1 静态定位

所有元素默认的定位方式即为静态定位，默认文档流。

        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: rgb(0, 255, 0);
        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>

3.2 相对定位

相对定位relative是以自己为基准点进行各个方向（top right bottom left）的偏移，是不脱离标准流的，会区分块级、行内元素。在使用过程中，不论偏移到任何位置，任然会占用标准流的位置。

        .div2{
            width: 200px;
            height: 200px;
            background-color: rgb(0, 255, 0);
            /* 相对定位 */
            position: relative;
            /* 通过top right bottom left来设置当前位置 */
            left: 200px;
            top: 200px;
        }

3.3 绝对定位

绝对定位absolute是以浏览器的左上角为基准点进行偏移，是脱离标准流的。如果祖先元素在定位流（任何定位布局均可）中，子元素设置绝对定位时是以祖先元素的左上角为基准点进行偏移的，同时会忽略祖先元素设置的padding值。上面的情况我们称作“子绝父相”，我们常用这种方式进行布局的细节刻画。

        .div2{
            width: 300px;
            height: 300px;
            border: 1px solid;
            /* 父-相对定位 */
            position: relative;
        }
        .div2 .son{
            width: 100px;
            height: 100px;
            background-color: rgb(0, 255, 0);
            /* 子-绝对定位 */
            position: absolute;
            /* 水平方向居中 */
            left: 50%;
            margin-left: -50px;
            /* 垂直方向居中 */
            top: 50%;
            margin-top: -50px;
        }

    <div class="div2">
        <div class="son"></div>
    </div>

3.4 固定定位

固定定位fixed也是以页面左上角为基准点偏移，是脱离标准流的，和前面的背景关联方式很像。我们常见的用途为“回到顶部”按钮。

        .toTop{
            text-align: center;
            width: 70px;
            line-height: 70px;
            border: 1px solid;
            /* 固定定位 */
            position: fixed;
            bottom: 40px;
            right: 40px;
        }

    <div class="toTop">
        <a href="#">回到顶部</a>
    </div>

3.5 粘滞定位

粘滞定位sticky表现为当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。如下，设置了top: 20px，那么在sticky元素到达距离相对定位的元素顶部20px的位置时固定，不再向上。

        /* 父容器样式 */
        .container{
            width: 1000px;
            height: 4000px;
            margin: 0 auto;
        }
        /* 对所有的div子元素进行样式设置 */
        .container div{
            width: 1000px;
            height: 500px;
        }
        /* 隔行变色 */
        .container div:nth-child(odd){
            background-color: yellow;
        }
        .container div:nth-child(even){
            background-color: red;
        }
        /* 左侧侧边栏 */
        .container .left{
            width: 100px;
            height: 400px;
            background-color: blue;
            float: left;
            margin-left: -150px;
            /* 粘滞定位 */
            position: sticky;
            top: 20px;
        }
        /* 右侧侧边栏 */
        .container .right{
            width: 100px;
            height: 400px;
            background-color: blue;
            float: right;
            margin-right: -150px;
            /* 粘滞定位 */
            position: sticky;
            top: 20px;
        }


    <div class="container">
        <div></div>
        <!-- 左边侧边栏 -->
        <aside class="left"></aside>
        <!-- 右边侧边栏 -->
        <aside class="right"></aside>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

z-index

专门用于控制定位流元素的覆盖关系的一个属性，默认值为0，其数值越大显示越靠上。我们在网页开发时一般不使用，容易造成混乱。

四、弹性布局（flex）

采用flex布局的元素，称为flex弹性容器。只要在父元素中声明display: flex;，则父元素即为父容器，该父容器的所有子元素均为弹性元素。弹性元素也可以再次声明为容器，因此⼀个元素既可以是弹性容器也可以是弹性元素。

每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。但是轴向可以发生变化，因此，水平的轴不一定是主轴。

flex布局是⼀种⼀维布局模型，一次只能处理一行或一列元素，即flex布局大多作用于主轴，交叉轴只是被动变化。如果子元素的宽高超过了父元素的大小，flex布局会将子元素进行压缩，因此一般不会超出父元素。

4.1 容器属性

容器属性就是加在父容器的属性。

flex-direction：用于修改主轴轴向。属性值有：row横向排列（默认）、row-reverse横向顺序倒转、column纵向排列、column-reverse纵向顺序倒转。

flex-wrap：用于控制子元素换行。属性值有：nowrap不换行（默认）、wrap换行、wrap-reverse反向换行（就是第一行变为最后一行）。

flex-flow：以上两种属性的简写方式。

justify-content：改变主轴（根据flex-direction的值判断是主轴还是交叉轴）的对齐方式。属性值有：flex-start左对齐（默认）、flex-end右对齐、center居中对齐、space-between元素和元素之间的空隙平分、space-around元素和元素之间的空隙是元素和父容器之间空隙的二倍、space-evenly元素和元素之间以及元素和父容器之间空隙平分。

align-items：改变交叉轴的对齐方式。属性值有：stretch如果没写子元素的高度则在容器中铺满（默认）、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>Document</title>
    <style>
        /* 父元素样式 */
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid;
            margin: 20px auto;
            /* 开启flex布局 */
            display: flex;
            /* 主轴方向 */
            /* flex-direction: row; */
            /* 控制子元素是否换行 */
            /* flex-wrap: nowrap; */
            /* 简写格式 */
            flex-flow: row wrap;
            /* 主轴方向上的对齐方式 */
            justify-content: space-evenly;
            /* 交叉轴方向上的对齐方式 */
            align-items: center;
        }
        /* 子元素样式 */
        .div1,.div2,.div3{
            width: 100px;
            height: 100px;
            text-align: center;
            color: white;
            font-size: 28px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red ;
        }
        .div3{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="div1">item1</div>
        <div class="div2">item2</div>
        <div class="div3">item3</div>
    </div>
</body>
</html>

align-content：改变多行元素在交叉轴方向的对齐方式，如果项目只有一行不会生效，需设置 flex-wrap:wrap;才生效。属性值有：stretch自动适应高度（默认）、flex-start顶部对齐、flex-end底部对齐、center居中对齐、space-between行元素和行元素之间的空隙平分、space-around行元素和行元素的间隙是行元素与父容器间隙的两倍、space-evenly行元素和行元素之间以及行元素和父容器之间空隙平分。

            /* 简写格式 */
            flex-flow: row wrap;
            /* 交叉轴方向上的多行对齐方式 */
            align-content: space-evenly;

4.2 元素属性

元素属性就是加载子元素上的属性。

flex-grow：用于控制元素在空间有剩余时是否放大，默认值为0不放大。假设默认三个元素中前两个是0，最后的一个元素是1，最后的元素占满剩余所有空间。（会覆盖width）

        .div2{
            background-color: red ;
            /* 放大div2 */
            flex-grow: 2;
        }

flex-shrink：用于控制元素在空间不足时是否缩小，默认值为1，即空间不足时一起等比缩小。如果某一个元素设置为0，则在空间不足时也不缩小。（会覆盖width）

        .div3{
            background-color: green;
            /* div3不缩小 */
            flex-shrink: 0;
        }

flex-basis：用于控制元素的宽度，默认值为auto，也就是默认宽度或者设置的width。（会覆盖width）

        .div1{
            background-color: blue;
            /* 宽度改为200px */
            flex-basis: 200px;
        }

flex：以上三个属性的简写方式。常用flex:1;也就是放大，其余为默认值；none为不放大不缩小；auto为等分放大缩小。

        .div1{
            background-color: blue;
            /* 有空隙时放大 */
            flex: 1;
        }

order：用于改变元素排列顺序，默认值为0，值越大越靠后。

        .div1{
            background-color: blue;
            /* 排列顺序 */
            order: 5;
        }

align-self：用于让个别元素在交叉轴向有与众不同的自己的对齐方式。属性值有：auto与其他相同（默认）、flex-start单独顶部对齐、flex-end单独底部对齐、center单独居中对齐、baseline单独第一行字基线对齐、stretch在容器中铺满。

        .div2{
            background-color: red ;
            /* div2单独底部对齐 */
            align-self: flex-end;
        }