# CSS 布局
css页面布局允许我们拾取网页中的元素，并且控制它们相对正常流布局，周边元素，父容器或者主视口/窗口的位置。
页面的大概布局：
- 正常布局流
- display 属性
- 弹性盒子
- 网格
- 浮动
- 定位
- 多列布局
# 正常流布局
正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
HTML元素完全按照源码中出现的先后次序显示，html元素有块级和行级之分。
简单来说： 块级元素具有类似一个盒子，具备宽高。行级元素可以设置高度，而宽度则是根据内容自动的扩张，无法手动设置。
当你使用css创建一个布局时，你正在离开正常布局流，但是对于页面上的多数元素，正常布局流将完全可以创建你所需要的布局。
所以你需要一个良好HTML结构，下列布局会覆盖默认的布局行为：
- display属性: 标准的value, 比如block, inline 或者 inline-block 元素在正常布局流中的表现形式. 又或者是全新的布局方式, 比如 Grid 和 Flexbox.
- float属性： 应用浮动，诸如
left能够让块级元素互相并排成一行，而不是一行接着一行排列。 - position属性： 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为
static，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。
# display 属性
在css中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。
display 可以修改原有的元素呈现方式，将原本为块级的元素修改为行级元素，原本为行级的元素修改为行块级元素
# 块元素和行级元素
| 元素 | 设置 | 区别 |
|---|---|---|
| 块级元素 | display: block | 1. 可以设置宽高 2. 默认换行，从上到下排列 |
| 行级元素 | display: inline | 1. 不能设置宽高 2. 默认不换行，从左到右排列 |
| 行内块元素 | display: inline-block | 1. 可以设置宽高 2.默认不换行，从左到右排列 |
常见的块级元素有：
div, address, article, aside, header, form, blockquote, fieldset, dd, h1~h6, hr, ol, p, pre, section, table, ul,audio, video
常见的行级元素有：
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
span,a, bdo, br, img, map, object, q, script,sub, sup
button, input, label, select, textarea
# flexbox
Flexbox 是CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。
要使用 flexbox, 你只需要在想要进行flex布局的父元素上应用 display: flex ，所有直接子元素都将会按照flex进行布局。
# grid
Flexbox用于设计横向或纵向的布局，而Grid布局则被设计用于同时在两个维度上把元素按行和列排列整齐。
同flex一样，你可以通过指定display的值来转到grid布局：display: grid。
# float
把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。 这一元素会浮动到左侧或右侧，并且从正常布局流中移除，这时候其他的周围内容就会在这个被设置浮动(float)的元素周围环绕。
float 属性有四个可能的值：
left: 将元素浮动到左侧right: 将元素浮动到右侧none: 默认值, 不浮动。inherit— 继承父元素的浮动属性。
# position
定位(positioning)能够让我们把一个元素从它原本在正常布局流(normal flow)中应该在的位置移动到另一个位置。
定位(positioning)并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。
一般有五种类型的定位类型：
- 静态定位是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
- 相对定位允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计非常有用。
- 绝对定位将元素完全从页面的正常布局流(中移出，类似将它单独放在一个图层中。
- 固定定位与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。
- 粘性定位是一种新的定位方式，它会让元素先保持和
position: static一样的定位，当它的相对视口位置达到某一个预设值时，他就会像position: fixed一样定位。