bootstrap4 网格布局实例_详解CSS布局

INTRO

CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。涉及到以下技术细节：

1. 文档流
2. 浮动
3. 定位
4. css表格
5. 盒模型（flex）
6. 网络（grid）

文档流

不对页面进行任何布局控制，HTML元素完全按照源码中出现的先后次序显示。

默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block;。

默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠,

外边距合并：块级元素的 上外边距和 下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者。（注：浮动元素和绝对定位元素的外边距不会折叠）。其出现在：相邻元素之间、父元素与其第一个或最后一个子元素之间、空的块级元素。

浮动（float）

1、float 属性有四个可能的值：

• left — 将元素浮动到左侧。
• right — 将元素浮动到右侧。
• none — 默认值, 不浮动。
• inherit — 继承父元素的浮动属性。

2、浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边（右侧）。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧（左侧）的空间。

3、实例——中间宽度自适应三栏布局：

<h1>2 column layout example</h1>

<div>
  <h2>1 column</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>


<div>
  <h2>2 column</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. , eget fermentum sapien.</p>
</div>


<div>
  <h2>3 column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est.</p>
</div>

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  background: #0ff;
  width: 100px;
  float: left;
}

div:nth-of-type(2) {
  background: #f0f;
   width: 100px;
   float: right;
}


div:nth-of-type(3) {
  background: #ff0;
 
}

4、清除浮动

浮动的弊端：所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包围（环绕）。

有一种简单的方法可以解决这个问题——clear属性。当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的float声明应用到此后的另一个元素。

clear 可以取三个值：

• left：停止任何活动的左浮动
• right：停止任何活动的右浮动
• both：停止任何活动的左右浮动

5、浮动布局的局限性

浮动布局不能根据单一列的高度自适应同步更新其余列的高度。这也是Flexbox（后文详细介绍）的优势。

定位（position）

定位技术(position)允许我们将一个元素从它在页面的原始位置准确地移动到另外一个位置。

定位类型：

• 静态定位(Static positioning)是每个元素默认的属性——将元素放在文档布局流的默认位置——没有什么特殊的地方。
• 相对定位(Relative positioning)相对于元素在正常的文档流中的位置移动它。不脱离文档流。
• 绝对定位(Absolute positioning)将元素完全从页面的正常布局流中移出，相对于离元素最近的被定位的祖先元素(ancestor element)定位。
• 固定定位(Fixed positioning)与绝对定位非常类似它是将一个元素相对浏览器视口固定。 在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。

1、相对定位 relative

占据在正常的文档流中。

top, bottom, left, right 相对于原本的位置

2、绝对定位 absolute

定位的元素应该在文档流中所占有的空间不再存在。不再存在于正常文档布局流中。

top, bottom, left, right 相对于最近的position不为static祖先元素。

3、固定定位 fixed

这与绝对定位的工作方式完全相同。

top, bottom, left, right 相对于浏览器。

4、 sticky todo

弹性盒子（flex）

弹性盒子是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。 弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。

flex是现代的布局解决方案，能够灵活的实现几乎所有布局。

详情请看阮一峰老师的博客：

Flex 布局教程：语法篇 - 阮一峰的网络日志​www.ruanyifeng.com

网格布局（grid）

网格布局（Grid）是最强大的 CSS 布局方案。

Grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

1、关键概念：

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

行和列的交叉区域，称为"单元格"（cell）。

划分网格的线，称为"网格线"（grid line）

2、容器属性

display: grid指定一个容器采用网格布局。

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

grid-auto-flow 属性：划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

3、项目属性

• grid-column-start属性：左边框所在的垂直网格线
• grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线
• grid-row-end属性：下边框所在的水平网格线

grid-area属性指定项目放在哪一个区域。

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

详情请看阮一峰老师的博客：

CSS Grid 网格布局教程 - 阮一峰的网络日志​www.ruanyifeng.com

布局之水平垂直居中问题：

这篇文章写得很好：

水平垂直居中布局的多种实现方式 - 掘金​juejin.im