关于前端:05-CSS3布局上前端必须掌握

以下次要参考了 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：指定我的项目放在哪个区域

如不欠缺之处，评论区欢迎您！