前言

最近在刷一些面试题以及看了一些大佬们面试总结，碰到了不少有关前端页面布局的题目，就深入学习和整理了一波。

1. 介绍

前端页面布局是我们在前端开发中比较重要的一环，这直接影响着前端页面的结构样式。而页面和布局是一名前端程序员的必修课，当然这也不是一蹴而就的，需要通过不断练习、反复地调试才能熟练掌握，因此我们就需要了解前端页面布局的一些规则和方式，如此以往，方能如鱼得水。

2. 页面布局规则

这里介绍前端页面布局的一些规则：

盒模型计算；
内联元素与块状元素布局规则；
文档流布局；
元素堆叠。

下面让我们一一走近这些美化页面的小技巧

2.1 盒模型计算

1. 概念

css定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。

2. 组成

盒模型主要用来描述元素所占空间的内容，它由四个部分组成：

外边框边界margin（橙色部分）
边框边界border（黄色部分）
内边距边界padding（绿色部分）
内容边界content（蓝色部分）

3. 应用效果

盒模型会发生margin外边距叠加，叠加后的值会以最大边距为准。比如，我们给两个相邻的<div>元素分别设置了不同的margin外边距：

<style>
        .box-model-sample {
            margin: 20px;
            padding: 20px;
            border: solid 2px #000;
        }
        .large-margin {
            margin: 30px;
        }
      </style>
      <div class="box-model-sample">这是一个div</div>
      <div class="box-model-sample">这是另一个div</div>
      <div class="box-model-sample large-margin">这是一个margin大一点的div</div> 
复制代码

运行效果如下，两个<div>元素之间发生了margin外边距叠加，它们被合并成单个边距。

如果两个元素的外边距不一样，叠加的值大小是各个边距中的最大值,下图使用的是第三个边框的外边距值30px。对于盒模型的计算，我们可以通过box-sizing属性进行设置盒模型的计算方式，正常的盒模型默认值是content-box,对于默认的盒模型,其计算宽高的方法是：content + padding + border

<style>
        .box-model-sample {
          height: 50px;
          margin: 10px;
          padding: 5px;
          border: solid 2px #000;
        }
        .border-box {
          box-sizing: border-box;
        }
      </style>
      <div class="box-model-sample">这是一个div(content-box)</div>
      <div class="box-model-sample border-box">这是另一个div(border-box)</div>
复制代码

那么该效果图的宽高应该是50 + 5 * 2 + 2 * 2 = 64px

但当我们设置了border-box之后，元素所占的总宽高为设置的元素宽高,因此，另一个div的高度为50px

2.2 内联元素与块状元素

2.1 概念

内联元素叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。内联元素的显示，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。
块级元素，一般都是从新行开始，它可以容纳行级元素和其他块元素，常见块级元素比如div/p等。form这个快元素比较特殊,他只能来容纳其他块元素

2.2 两者的区别

内联元素	块级元素
相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化	独占一行,默认情况下，其宽度自动填满其父元素宽度
行内元素设置width，height属性无效	可以设置width，height属性
行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。	可以设置margin和padding属性
对应于display:inline；	对应于display:block

详细可看1 详细可看2

2.3 文档流和元素定位

1. 概念

文档流就是在浏览器中的规则，将窗体自上而下分成一行一行，并在每行中按照从左到右依次排放元素，称为文档流（又称普通流）。文档流布局方式可以使用position样式进行调整，包括：static（默认值）、inherit（继承父元素）、relative（相对定位）、absolute（相对非static父元素绝对定位）、fixed（相对浏览器窗口进行绝对定位）。

2. static

如果我们设置了属性值为static时，其他的定位是无效的

<style type="text/css">
            a,
            p,
            div {
                border: solid 1px red;
            }
            .static{
                position: static;
                left: 100px;
                top: 100px;
            }
</style>
 </head>
<body>
            <h3>默认流：position=static</h3>
            <a style="color:yellow;">a1</a>
            <a style="color:red;">a2</a>
            <a style="color:blue;">a3</a>
            <a style="color:green;">a4</a>
            <p style="color:yellow;">p1</p>
            <p style="color:red;">p2</p>
            <p style="color:blue;">p3</p>
            <p style="color:green;">p4</p>
            <div style="background:yellow;">div1</div>
            <div style="background:red;">div2</div>
            <div style="background:blue;">div3</div>
            <div style="background:green;">div4</div>
            <h3>普通流：position=static, left=100px, top=100px</h3>
            <a class="static" style="color:yellow;">a1</a>
            <a class="static" style="color:red;">a2</a>
            <a class="static" style="color:blue;">a3</a>
            <a class="static" style="color:green;">a4</a>
            <p class="static" style="color:yellow;">p1</p>
            <p class="static" style="color:red;">p2</p>
            <p class="static" style="color:blue;">p3</p>
            <p class="static" style="color:green;">p4</p>
            <div class="static" style="background:yellow;">div1</div>
            <div class="static" style="background:red;">div2</div>
            <div class="static" style="background:blue;">div3</div>
            <div class="static" style="background:green;">div4</div>
</body>
复制代码

效果图显示static元素设置的定位效果是无效的

3. relative

.relative{
     position: relative;
     left: 100px;
     top: 100px;
}
复制代码

当我们设置了属性为relative时，元素会保持原有文档流，但相对本身的原始位置发生位移，且会占用空间，如浏览器显示

4. absolute

.parent {
            border: solid 1px blue;
            width: 300px;
        }
        .parent > div {
            border: solid 1px red;
            height: 100px;
            width: 300px;
        }
        .absolute {
            position: absolute;
            left: 100px;
            top: 100px;
        }
复制代码

在这里，我们设置属性值为absolute,而absolute的元素不占位，因此下一个符合普通流的元素会略过absolute元素排到其上一个元素的后方。如图

当我们给父元素加上absolute属性时，即可将一个元素固定在页面的某个位置

.parent {
            border: solid 1px blue;
            width: 300px;
            position: absolute;
        }

复制代码

5. fixed

当我们设置fixed属性时，元素脱离文档流、且不占位，此时看上去与absolute相似。但当我们进行页面滚动的时候，会发现fixed元素位置没有发生变化。

这是因为fixed元素相对于浏览器窗口进行定位，而absolute元素只有在满足“无static定位以外的父元素”的时候，才会相对于document进行定位。

该部分还会衍出脱离文档流，待日后慢慢细谈。

2.4 元素堆叠 z-index

我们还可以通过设置z-index属性来控制元素的堆叠顺序,话不多说,直接上图

分析代码可以知道:

当同级元素不设置z-index或者z-index相等时，后面的元素会叠在前面的元素上方；
当同级元素z-index不同时，z-index大的元素会叠在z-index小的元素上方。

3. 页面布局方式

前端页面布局不仅有规则，还有方式，我们聊完了规则，那么我们聊聊方式。前端页面布局的方式一般有以下几种：

传统布局方式；
Flex 布局方式；
Grid 布局方式。

3.1 传统布局

传统布局方式基本上使用上面介绍的布局规则，结合display/position/float属性以及一些边距、x/y 轴距离等方式来进行布局。传统方式布局的优势在于兼容性较好，在一些版本较低的浏览器上也能给到用户较友好的体验。但传统布局需要掌握的知识较多也相对复杂，对于整个页面的布局和排版实现，常常是基于盒模型、使用display属性+position属性+float属性的方式来进行，这个过程比较烦琐，因此更多时候我们都会使用开源库（比如 bootstrap）来完成页面布局。

3.2 flex布局

Flex 布局（又称为 flexbox）是一种一维的布局模型。在使用此布局时，需掌握几个概念。

flexbox 的两根轴线。其中，主轴由flex-direction定义，交叉轴则垂直于主轴。
在 flexbox 中，使用起始和终止来描述布局方向。
认识 flex 容器和 flex 元素。来个小实例

<style>
        div {
          border: solid 1px blue;
          margin: 10px;
        }
        .box {
          display: flex;
        }
      </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3 <br />有其他 <br />内容</div>
      </div>
</body>
复制代码

效果图

Flex 布局的出现，解决了很多前端开发居中、排版的一些痛点，尤其是垂直居中，因此现在几乎成为主流的布局方式。除此之外，还可以对 Flex 元素设置排列顺序、放大比例、缩小比例等。

3.3 grid布局

Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于父元素 (成为 Grid Container 网格容器)和其子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。使用 Grid 布局可以：

实现网页的响应式布局；
实现灵活的 12 列布局（类似于 Bootstrap 的 CSS 布局方式）；
与其他布局方式结合，与 css 其他部分协同合作。

通过 Grid 布局我们能实现任意组合不同布局，其设计可称得上目前最强大的布局方式，它与 Flex 布局是未来的趋势。其中，Grid 布局适用于较大规模的布局，Flex 布局则适合页面中的组件和较小规模布局。

在这里笔者没有将布局方式过度的展开阐述，因为在规模庞大的css宝库中,布局方式体量大，且细，笔者目前也还没具备该实力(太菜了)。给大家提供一些优质美文让大家详细了解css的布局方式:

4. 最后

笔者大三，目前正在寻找前端实习，未来待续.......

聊聊前端页面布局那些事

前言

1. 介绍

2. 页面布局规则

2.1 盒模型计算

1. 概念

2. 组成

3. 应用效果

2.2 内联元素与块状元素

2.1 概念

2.2 两者的区别

2.3 文档流和元素定位

1. 概念

2. static

3. relative

4. absolute

5. fixed

2.4 元素堆叠 z-index

3. 页面布局方式

3.1 传统布局

3.2 flex布局

3.3 grid布局

4. 最后