经过前期的准备工作，现在就可以正确的开始布局了。这里也将是页面布局开始的地方。
常规的文档流布局
这种是最基础的布局，从上至下从左向右。
浮动布局 float
浮动的效果已经讲解过就不再赘述
定位 position
使用不同的定位方式，得到不同的效果，绝对定位调整left top right和bottom来调整位置。
css表格 display:table
还有行内table display:inline-table
使用csstable有能力让你像table一样对元素进行布局，并且更符合语义化，对屏幕阅读器的用户更加友好。
值得一提是，虽然csstable有这么多优势，但是尽量只作用于小范围内，比如表单。
当父容器设置为table时，需要针对性的对子元素设计。
-
display:table-row子元素将作为表行显示 tr -
display:table-cell子元素将作为单元格显示 td / th -
display:table-column子元素将作为表列显示 col -
display:table-caption子元素将作为表格标题 caption -
display:table-header-group子元素将作为一行或多行分组显示 thead -
display:table-row-group子元素将作为一行或多行分组显示 tbody -
display:table-column-group子元素将作为一列或多列分组显示 colgroup -
display:table-footer-group子元素将作为一行或多行分组显示 tfoot
table的行列合并
table中常见的 行列合，使用colspan和rowspan，但是csstable没有些属性，因此需要折返
使用table 将单元格内容拆分，再控制width，将单元格等列分布，使用百分比计算单元格宽度
<div class="table">
<div class="tr">
<div class="td">
<div class="inner-table">
<div class="inner-tr">
<div class="inner-td" style="width:50%"></div>
<div class="inner-td" style="width:50%"></div>
</div>
</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="inner-table">
<div class="inner-tr">
<div class="inner-td" style="width:100%"></div>
</div>
</div>
</div>
</div>
</div>
嵌套table使用宽度达到满足合并列的效果，行合并也是一样的，将行分成需要的列，然后内容单独成行
比较有意思的table-caption属性，设置该元素为表格标题后，通过caption-side将标题放在表格的上面top还是下面bottom
弹性盒子 display:flex
弹性盒子最早在2009年纳入标准，现在主流的浏览器已经支持，对于webkit内核需要内核前缀-webkit-
父容器设置为flex后，父元素本身变成 flex container，内部的直接下级所有子元素变成flex item。
flex-direction排列方向，按照横轴排列row，纵轴排列column，横轴反向排列row-reverse，纵轴反向排列column-reverse
这里的排列方向是设定主轴，在flex container内部有两个轴，水平主轴 (row axis) 垂直主轴 (column axis)。
默认主轴就是文档流从左到右从上到下的方向。flex-wrap默认情况下，所有子元素将会在主轴方向上排列一排，如果不够将被挤压，直到撑破容器。
因此，对于多列情况就需要换行适应。默认情况下nowrap，设定为wrap，会按照主轴方向向下换行，设定为wrap-reverse，会在主轴方向向上换行。【不知道为什么总跟reverse过不去】flex-flowflex流，是上面两个的简写形式。-
justify-content元素内容调整。向主轴开始方向靠近flex-start、向主轴结束方向靠近flex-end、向中部center-
space-between两端对齐。第一个元素在flex-start，最后一个元素在flex-end ，其余元素的空白区域均匀分布。 -
space-around空间上环绕对齐。和between相反，元素以center为中心在两侧均匀分布
-
-
align-items元素在主轴的交叉轴上的对齐方式。和上面的主轴对齐方式一样，flex-start靠近交叉轴开始位置，flex-end靠近交叉轴结束位置，center靠近交叉轴中间位置。-
baseline这个是按照第一行的文本的基准线对齐。【这个有什么用么？跟晾衣服一样】 -
stretch默认值，就是沾满整个交叉轴。
-
-
align-content多轴时【其实也就是flexwrap换行情况下，主轴方向上换行操作后产生的多轴】，其对齐方式和justify-content相似，只是设定的内容是多轴的轴线排列。轴线排列的方向是主轴的交叉轴方向。类似将主轴的轴线变成交叉轴的元素，然后使用justify-content调整。
多轴轴线 order排列顺序。可以把order理解为index，从主轴方向上，从小到大排列。flex-grow放大比例，默认为0。如果空间剩余，将按照放大比例侵占剩余空间flex-shrink收缩比例，默认为1，如果空间不足，将按照收缩比例收缩空间flex-basis初始值。默认auto，即元素自身大小。flex上面三个的缩写align-self给子元素本身单独设定对齐方式，覆盖父元素的align-items属性。
大多数情况下，弹性盒子嵌套使用，以面对更复杂的情况。
网格布局 display:grid
网格布局和一般表格一样，有行(row)列(column) 还有行列之间的空隙称之为 沟槽(gutter)或者叫间隙（gap），每一个行列覆盖的元素叫轨道track。翻译过来的命名就是很奇怪啊。
除此之外，在显示创建的网格体系中，会创立网格线，每一条网格线有相应的编号，也可以设定名称。
除了display:gird还可以设定display:inline-gird，在行内元素使用网格布局，也可以嵌套使用display:
<div class="wrapper">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
当我们设定好布局为grid时，需要给grid设定模板。
显式网格设置
-
grid-template-columns设定列数，以及每一列的宽度。比如grid-template-columns:15px 22px 22px;，定义了三列，每一列分别为 15，22，22个像素 。这里有用到一个非常好用的函数repeat()-
repeat()这个函数传递两个参数，第一个参数是填充多少次，第二个是每个值是多少。 比如repeat(12, 1fr)关于fr，可以查看 数值和单位 2.5 fr 的介绍。这里的就可以改写为grid-template-columns:15px repeat(2,22px); -
minmax()使用这个函数为每一个网格设定最小到最大范围。当元素空间调整时，将会按照范围的最大和最小值进行扩张和收缩。
-
grid-template-rows设定行数以及每一行的高度，如果超出预订的范围，超出的元素使用自身高度。
设定隐式网格
当template覆盖不完全时，可以使用隐式网格限定元素宽高。
grid-auto-columns设定超出设定列元素的列宽grid-auto-rows设定超出设定行元素的行高grid-column-gap列间距grid-row-gap列间距grid-gap行列间距的缩写。
子元素设定
当我们设定好网格的行列和间距后，如果想对子元素单独设定，比如合并行合并列的操作前，先了解grid line——网格线。
比如我们在白纸上画一个2行3列网格，那这个网格的在水平方向上一共4条垂直网格线，分别记为col1-col4，在垂直方向上一共三条水平网格线 ，分别记为row1-row3。
使用template表示出来就是
grid-template-columns:[col1] 20px [col2] 60px [col3] 20px [col4] ;
grid-template-rows:[row1] 20px [row2] 60px [row3] ;
定义了每一列每一列的网格线，每一行和每一行的网格线。
网格线命名可以是重名的，同一个网格线可以明名为多个名称。重名的名称在使用时，根据元素所在的位置确定名称代表的是哪一条网格线。
假设我们需要合第一行的所有列时，在水平方向上，需要擦除中间的第二条和第三条垂直网格线。因此，第一行的列的跨度就是1/4——从第一个垂直网格线到第四个垂直网格线。垂直方向上也是等同。
记住这个概念，下面就可以来合并网格内容了。
-
grid-column-start表格开始的列，代表当前元素从哪一列开始。比如grid-column-start:1 -
grid-column-end表格结束的列，代表当前元素宽度持续到哪一列grid-column-end:4
这里用的column比如说是grid lines。从第一个网格线到第4个网格线之间的区域。此之外，我们也可以用名称来指定跨度，实际上也是每一个网格线。无论时编号还是名称都指代的是网格线本身。
上面的可以简写为 -
grid-column : 1/4除此之外，还有一种和colspan rowspan一样的合并写法grid-column:1 / span 3，
这里使用span(跨度)关键字，计算的方式就是从第一个gridline开始 ，向后合并3列，所以跨度就是 1，1+3。本质上还是不变的。当我们没办法指定列从哪一列开始时，我们需要使用到auto关键字，代表表格从当前计算后得到的元素的位置开始。而auto实际上就是 默认值。grid-column : auto / span 3
但是假如我们时从中间开始合并，但是又不太确定起始位置。
在行上也是一样的
grid-row-start行开始grid-row-end行结束grid-row缩写grid-area这个是grid-column-start，grid-column-end，grid-row-start，grid-row-end的缩写
书写形式为grid-area:<grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>
比如grid-area: 1 / 1 / 2 / 3。
当我们指定了元素的开始列和行的开始位置和结束位置时，元素排列的位置可能被替换掉。比如上述的 1/1/2/3 ，假设这个属性应用在第二个元素上就会发生这样的情况
假如我们指定了开始位置是默认值auto，而给了结束位置，这时候就可以完成元素的位置替换操作。
网格线也是可以使用负数，代表从正向的对角线位置开始。上述的修改可以是 grid-area:auto/auto/-1/-1。也就是正数和倒数的区别，加上正负号以区分方向。
切换横纵坐标 grid-auto-flow
默认情况下，grid的开始方向是水平方向，使用 grid-auto-flow:column 切换为垂直方向。但是定义的模板还是按照行列排序，只是修改元素的填充方向。这一点和flex布局的flex-direction有本质的区别。
当我们调试网格布局时，在chrome下可以方便的查看当前grid的排列情况，在elements里面，选中gird元素时，chrome会将当前表格的实际行列以及大小使用虚线展示出来，方便调试。
