以下次要参考了http://www.ruanyifeng.com/blo... 和 https://developer.mozilla.org... 两篇文章。如果还想更具体的能够看一看这两篇文章。大鹏一日同风起，扶摇直上九万里！一起学习，一起提高！

CSS布局

传统计划是基于盒装模型，依赖display属性+position属性+float属性，但对于一些非凡布局（eg:垂直居中）就不容易实现。

补充：
块元素：呈现在另一个元素上面的元素；
内联元素：呈现在另一个元素旁边的元素，就像段落中的单个单词一样；

dispaly属性一些默认的display的值，段落之间款式默认值为：display:block；<a>元素默认为display:inline。

注：display:flex和display:grid在布局上比拟重要。

1、Flex布局

  • 弹性盒子(Flexbox)

用于创立横向/纵向的一维页面布局，在其父元素上利用display:flex，所有间接子元素机会依照flex进行布局，然而子元素的float,clear,vertical-align属性将生效。

任何一个容器都可指定为flex布局。
.box {   display: flex;}<div class="box">    <div class="box1">one</div>    <div class="box2">two</div>    <div class="box3">three</div></div>

.box {   display: flex;}.box > div {    flex:1}<div class="box">    <div class="box1">one</div>    <div class="box2">two</div>    <div class="box3">three</div></div>

.container{    display:flex;    flex-wrap: wrap; /*可换行*/    justify-content:center;}.item{    flex: 0 1 150px;    margin: 5px; /*外边距*/}
flex：是flex-grow、flex-shrink、flex-basis的合并模式。

2、Grid布局

  • 用于同时在两个维度把元素按行和列排列参差。grad-template-rows和grid-template-columns定义了行和列的轨道。grid-gap定义了网格间的间距。
Grid 布局只对我的项目失效，不对我的项目子元素起作用。

如下代码：

.box {    display:grid;    grid-template-columns: 1fr 1fr 1fr;    grad-template-rows: 100px 100px;    grid-gap:10px;}<div class="box">    <div class="box1">one</div>    <div class="box2">two</div>    <div class="box3">three</div>    <div class="box1">one</div>    <div class="box2">two</div></div>
注：
a.fr单位跨网格轨道可用空间的散布。下面代码中有着3个大小为1fr的轨道的网格容器，创立了三个列轨道；
b.若最初一个是2fr，则示意最初一个轨道是前者的二倍；
c.还能够与相对单位联合应用，eg:
grid-template-columns: 150px 1fr 2fr;示意第一列宽是150像素，第三列宽是第二列宽的2倍;
d.grid-template-columns: 150px auto 150px;auto 示意由浏览器本人决定
  • 默认状况下，容器元素都是块级元素，但也能够设为行内元素。如下代码，就是指定了div是一个行内元素，该元素外部采纳网格布局：

div{display: inline-grid;}

注：设为网格布局后，容器子元素（我的项目）的float、display:inline-block、display:table-cell、vertical-align和column-*等设置都将生效。
  • 容器指定了网格布局后，就要划分行和列了。

    列宽：grid-template-columns
    行高：grid-template-rows

代码如下：

.container {    display:grid;    grid-template-columns:100px 100px 100px;    grid-template-rows:100px 100px 100px;}

下面代码指定了一个三行三列的网格，列和宽都是100px,当然也可用百分比;
或用repeat(3,100px)也可；
或用repeat(auto-fill,100px)，当容器大小不确定时能够用。

  • 比拟罕用的布局

两栏布局：

grid-template-columns: minmax(150px,25%) 1fr;

示意第一列宽度最小为150px，最大宽度为总宽度的25%。

三明治布局
grid-template-rows：auto 1fr auto;
垂直划分为上中下三局部（页眉、内容区、页脚），页眉和页脚都是原本的内容高度，内容区是剩下所有的高度。

圣杯布局（最罕用）
是将三明治布局中的内容辨别成三局部（右边栏、主栏、左边栏）

html代码：

<div class="container">    <header/>    <div/>    <main/>    <div/>    <footer/></div>

CSS代码：

.container{    display: grid;    grid-template: auto 1fr auto / auto 1fr auto;}

示意垂直方向（页眉和页脚都是自身内容高度，内容区占满残余的高度），程度方向（右边栏和左边栏都是自身内容高度，两头主栏占满残余的高度）。

十二网格布局：

grid-template-columns: repeat(12, 1fr);

一些罕用的网格属性

  • 行间距：grid-row-gap
  • 列间距：gid-column-gap
  • 合并写法：grid-gap
  • 设置单元格内容的程度地位：justify-items
  • 设置单元格内容的垂直地位：align-items
  • 合并写法：place-items
  • 整个内容区域在容器外面的程度地位：justify-content
  • 整个内容区域在容器外面的垂直地位：align-content
  • 合并写法：place-content
  • grid-column：1/3等同于grid-column: 1/span 2示意从第一根列线到第三根列线（即第一列和第二列）
  • grid-row：1/span 2，第一根行线，横跨两个网格，（即示意第一行和第二行）
  • grid-area：指定我的项目放在哪个区域
如不欠缺之处，评论区欢迎您！