前端学习——CSS布局

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

CSS页面布局技术允许拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、正常布局流

正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
下面布局技术会覆盖默认的布局行为：

• display 属性——标准的value，比如：block、inline、inline-block。
• 浮动——应用float值，如left能够让块级元素互相并排成一行，而不是堆叠在一起。
• position属性——允许精准设置盒子中的盒子的位置，正常的布局流中，默认为static，使用其它值会引起元素不同的布局方式。
• 表格布局——表格的布局方式可以用在非表格内容上。、
• 多列布局——Multi-column layout属性，可以让块按列布局。

display属性

在 css 中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。
更改默认显示行为。例如，<li>元素默认为display:block，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为inline，它们将显示在彼此旁边。

弹性盒子（Flexbox）

Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。
例子：
有一个class为wrapper的容器元素，它的内部有三个<div>元素。默认会作为块元素从上到下进行显示。

.wrapper {
  display: flex;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class=