CSS 布局

最后更新于3年前

这有帮助吗？

CSS 布局

1. 定位

参考链接：

CSS 定位主要分为静态定位 static，固定定位 fixed，绝对定位 absolute，相对定位 relative，粘性定位 sticky。

1.1 静态定位 static

元素默认为静态定位，正常文档流中。

1.2 绝对定位 absolute

脱离文档流，不在正常文档流中占据空间
left、right、top、bottom 等属性相对于其最接近的一个有定位设置的父级元素进行定位，如果父元素均没有设置定位，则依据 body 元素左上角作为参考进行定位
绝对定位元素可以堆叠，通过 z-index 属性控制顺序

设置了绝对定位的元素，在文档流中是不占据空间的，它在文档流中的位置会被删除，相当于浮了起来。区别于浮动，浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。

绝对定位无视参考的那个盒子的 padding，例如下图所示的例子，蓝色的子元素设置为绝对定位，其无视了参考父元素的 padding 部分。

1.3 相对定位 relative

相对指的是相对于原来的位置而言，区别于绝对定位是相对于设有定位的父元素而言

未脱离文档流，会在正常文档流中占据空间，留下空白
left、right、top、bottom 等属性设置在正常文档流中偏移自身位置
通过 z-index 属性控制顺序，但相对定位元素不可层叠

相对定位基本上就两个作用，一是微调元素，二是作为绝对定位的参考

1.4 固定定位 fixed

固定定位类似于绝对定位，其相对于浏览器窗口而言定位，脱离文档流。最常见的用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏。

1.5 粘性定位sticky

类似于像 relative 和 fixed 的结合，主要用于页面滚动：在跨越特定阈值前为 relative 定位（定位基点是自身默认位置），之后变成 fixed 定位（定位基点是视口）。使用的时候必须搭配top、bottom、left、right这四个属性（之一）一起使用。

规则：页面滚动，当父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

<head>
  <style>
    body{
      height: 2000px;
      width: 100%;
      background-color: red;
    }
    div {
      height: 200px;
      margin-top: 50px;
      border: solid deepskyblue;
      width: 400px;
      background-color: deepskyblue;
    }
    nav {
      position: sticky;
      top: 20px;
      background: yellow;
      height: 60px;
      line-height: 60px;
    }
  </style>
</head>
<body>
  <div>
    <nav>导航</nav>
  </div>
</body>

知识点：z-index 属性

属性值大的位于上层，属性值小的位于下层
只有定位了的元素，才能有z-index值（除 static），浮动元素不支持 z-index
从父现象：如果父亲1比父亲2大，那么即使儿子1比儿子2小，儿子1也能在上层

2. Flex 布局*

采用 Flex 布局dispaly:flex;的元素，称为 Flex 容器（flex container）；所有子元素自动成为容器成员，称为 Flex 项目（flex item）。默认水平的叫主轴（main axis），垂直的叫交叉轴（cross axis）。

2.1 容器的属性

flex-direction*：决定主轴的方向（即项目的排列方向），默认从左到右

属性值

描述

row

从左到右水平排列子元素（默认值）

column

从上到下垂直排列子元素

row-reverse

从右向左排列子元素

column-reverse

从下到上垂直排列子元素

flex-wrap：决定一条轴线排不下如何换行，默认不换行

flex-flow：flex-direction || flex-wrap；

justify-content*：定义了项目在主轴上的对齐方式，默认左对齐

属性值

描述

flex-start

从主轴的起点对齐（默认值）

flex-end

从主轴的终点对齐

center

居中对齐

space-around

在父盒子里平分

space-between

两端对齐平分

align-items*：定义项目在交叉轴上如何对齐

属性值

描述

flex-start

交叉轴的起点对齐

flex-end

交叉轴的终点对齐

baseline

项目的第一行文字的基线对齐

center

交叉轴的中点对齐

stretch

如果项目未设置高度或设为auto，将占满整个容器的高度

align-content：定义了多根交叉轴线的对齐方式

2.2 项目的属性

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大（用于确定各部分的比例大小，例如属性都为1，则等分剩余空间）。

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小（爷用于确定各部分的比例大小，例如属性都为1，则等比例缩小，特殊的是如果一个项目属性为0，其他项目都为1，则空间不足时，前者不缩小）。

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目的本来大小。

flex*：none | [ flex-grow flex-shrink || flex-basis]

默认值：0 1 auto
auto：1 1 auto
none：0 0 auto
1：1 1 0%
2 3：2 3 0%
0%：1 1 0%
200px: 1 1 200px
10 100px：10 1 100px

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

示例（项目长度）：容器宽度600px，项目1设置width: 140px; flex: 2 1 0%;，项目2设置width: 100px; flex: 2 1 auto;，项目3设置flex: 1 1 200px;。

目前已占据宽度 0%+100px+200px=300px（注意项目1尽管设置了宽度140px，但flex-basis设置为0%，则不认为其占据了宽度），因此剩余300px。根据比例2:2:1分配300px，最终项目1-120px，项目2-220px，项目3-260px。

3. 居中布局

示例：红包在页面严格居中

<!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>
            /* 整个弹窗组件 */
            .component_popup {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 100;
            }

            /* 遮罩背景 */
            .popup_mask {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.7);
            }

            /* 弹窗区域（内容 + close）：严格居中 */
            .popup_content {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            /* 弹窗的内容部分 */
            .content_box {
                width: 15.45rem;
                height: 19.32rem;
                background: url(http://img.smyhvae.com/20191010_1500_red-packet.png) no-repeat;
                background-size: 15.45rem 19.32rem;
            }

            /* 弹窗的close图标 */
            .content_close {
                width: 1.25em;
                height: 1.25em;
                background: url(http://img.smyhvae.com/20191010_1500_close.png) no-repeat;
                background-size: 1.25rem 1.25rem;
                margin: 0 auto;
                margin-top: 0.5rem;
            }
        </style>
    </head>
    <body>
        <div class="content">默认文档流中的页面主体</div>

        <div class="component_popup">
            <div class="popup_mask"></div>
            <div class="popup_content">
                <div class="content_box"></div>
                <div class="content_close"></div>
            </div>
        </div>
    </body>
</html>

4. 浮动

float: left;
float: right;

浮动的元素脱离标准流
一旦元素设置浮动了，那么无论原来的元素是块级还是行内都能够设置宽高了
不浮动的元素会出现在浮动元素下方，因为浮动元素脱离了文档流，但浮动的元素之间会互相贴靠，而不是存在堆叠情况
浮动的元素有“字围”效果，标准流中的文字不会被浮动的盒子遮挡住
一个浮动元素，如果没有设置 width，那么将自动收缩为内容宽度（非常像行内元素）

如下图所示，图片所在的 div 设置了浮动，则图片会显示在下方盒子上面，但是文字不会被遮挡，而是存在字围效果。

5. 多列布局

5.1 自适应布局

5.1.1 两列布局（定宽 + 自适应）

<div class="parent">
    <div class="left-fix">left</div>
    <div class="right-auto">right</div>
</div>

<!-- 浮动 + margin -->
<style>
    .left-fix {
        float: left;
        width: 100px;
    }

    .right-auto {
        margin-left: 100px;
    }
</style>

<div class="parent">
    <div class="left-fix">left</div>
    <div class="right-auto">right</div>
</div>

<!-- 浮动 + BFC -->
<style>
    .left-fix {
        float: left;
        width: 100px;
    }

    .right-auto {
        overflow: hidden; /* 形成BFC */
    }
</style>

<div class="parent">
    <div class="left-fix">left</div>
    <div class="right-auto">right</div>
</div>

<!-- flex-->
<style>
    .parent{
        display: flex;
    }
    .left-fix {
        width: 100px;
    }

    .right-auto {
       flex: 1;
    }
</style>

5.1.2 内容定宽 + 自适应

<div class="parent">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>

<!-- 绝对定位 -->
<style>
.parent{ position: relative}
.top{ position: absolute; height: 100px; top: 0; left: 0; right: 0; }
.left{ position: absolute; width: 200px; top: 100px; left: 0; bottom: 50px; }
.right{ position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px;}
.bottom{ position: absolute; height: 50px; left: 0; right: 0; bottom: 0; }
</style>

<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</div>

<!-- flex 布局 -->
<style>
.parent{display: flex;flex-direction: column;height: 100%;}
.top{height: 100px;}
.bottom{height: 50px;}
.middle{flex: 1}

.middle{display: flex; flex-direction: row;}
.left{width: 200px;}
.right{flex:1;}
</style>

5.1.3 内容自适应 + 自适应

<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</div>

<!-- flex 布局 -->
<style>
.parent{display: flex;flex-direction: column;height: 100%;}
.middle{flex: 1}
.middle{display: flex; flex-direction: row;}
.right{flex:1;}
</style>

5.2 等分布局

<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>

<!-- flex（推荐） -->
<style>
    .parent {
        display: flex;
    }

    .column {
        flex: 1;
    }

    .column + .column {  /*下一兄弟节点选择器*/
        margin-left: 20px;
    }
</style>

5.3 等高布局

等高指的是列等高，当一列高度增加时，旁边的列也都和其等高，即所有列的高度都等于最高的列。

<div class="parent">
    <div class="column">left</div>
    <div class="column">right</div>
</div>

<!-- 负margin正padding -->
<style>
    .parent {
        overflow: hidden;
    }

    .column {
        margin-bottom: -9999px;
        padding-bottom: 9999px;
    }
</style>

此外还可以借助flex，本身默认值就满足等高要求，例如 flex 的 align-items 属性默认值 stretch 表示如果项目未设置高度或设为 auto，将占满整个容器的高度。

6. Grid 布局

简单区别于Flex 布局，Flex是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。同样采用网格布局dipaly:grid的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。划分网格的线，称为"网格线"（grid line）。正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，n行和m列会产生n x m个单元格。