前言
最近在刷一些面试题以及看了一些大佬们面试总结，碰到了不少有关前端页面布局的题目，就深入学习和整理了一波。
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 |
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. 最后
笔者大三，目前正在寻找前端实习，未来待续.......
