CSS 布局

经过前期的准备工作，现在就可以正确的开始布局了。这里也将是页面布局开始的地方。

常规的文档流布局

这种是最基础的布局，从上至下从左向右。

浮动布局 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-

MDN弹性盒子元素说明

父容器设置为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-flow flex流，是上面两个的简写形式。

• 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:

MDN网格布局

<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 ，假设这个属性应用在第二个元素上就会发生这样的情况

grid-area:1 / 1 / 2 / 3

假如我们指定了开始位置是默认值auto，而给了结束位置，这时候就可以完成元素的位置替换操作。

grid-area: auto / auto / 3 / 4

网格线也是可以使用负数，代表从正向的对角线位置开始。上述的修改可以是 grid-area:auto/auto/-1/-1。也就是正数和倒数的区别，加上正负号以区分方向。

切换横纵坐标 grid-auto-flow

默认情况下，grid的开始方向是水平方向，使用 grid-auto-flow:column 切换为垂直方向。但是定义的模板还是按照行列排序，只是修改元素的填充方向。这一点和flex布局的flex-direction有本质的区别。

row column

当我们调试网格布局时，在chrome下可以方便的查看当前grid的排列情况，在elements里面，选中gird元素时，chrome会将当前表格的实际行列以及大小使用虚线展示出来，方便调试。

chrome调试grid