微信改版了，现在看到我们全凭缘分，为了不错过【全栈工程师修炼指南】重要内容及福利，大家记得按照上方步骤设置「接收文章推送」哦~

关注【公众号】回复【学习交流群】加入【SecDevOps】学习交流群!

文章目录：

实践文章整理不易，请各位看友，点击文中广告，支持支持作者我呀!

原文链接:

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(2)由于篇幅过长的原因，作者将CSS布局文章分为两个小节，前面相信大家已经了解了Flexbox以及网格布局的基础知识，现在我们继续深入学习CSS 多列布局、浮动布局及了解表格和其他传统布局，它是学习CSS之路上一个重点，在进行前端开发时常用到。https://mp.weixin.qq.com/s/Z8ahX_iDPTNpqoYoItG1Cw

0x00 前言简述

描述: 由于篇幅过长的原因，作者将CSS布局文章分为两个小节，前面相信大家已经跟着【WeiyiGeek】作者一起学习了CSS Flexbox以及网格布局的基础知识了，现在我们在此基础上继续深入学习CSS 多列布局、浮动布局以及了解表格布局及其他传统布局，它是学习CSS之路上一个重点，是在进行前端开发时常常使用到的，所以说我们需要认真学习，若有不懂的地方可以在文章末尾，以及作者交流群【在公众号回复微信交流群】进行留言交流。

同时，欢迎各位看友支持《#前端学习之路》专栏的更新。

复习：CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置，本章将主要针对正常布局流, FlexBox(弹性盒子), Grid(网格), Column (多列布局), 以及最后再了解一下CSS 表格布局（它是传统的布局方式，在当前开发中不建议使用，我们简单了解即可）等技术进行讲解。

CSS 布局相关属性一览

# 传统布局
display (前已学习): 此章节主要的几个布局属性，即 flex、grid
position (前已学习)：此章节主要的几个布局属性, 即 静态定位（默认）、相对定位、绝对定位、固定定位(类似于绝对)、粘性定位。
 
# 常规流布局,即在你没有改变默认布局规则情况下的页面元素布局方式。
 
# FlexBox 流布局 
display: flex; 指定元素的布局为 flexible。
display: inline-flex; 元素的子元素作为 flex 项但是该元素的行为类似于行内元素。
flex: 设置 flex 项的动态尺寸，表示每个 flex 项沿主轴的可用空间大小, 实际上它可以指定最多三个不同值的缩写属性。
flex-grow : 指定 flex 元素的flex 增长系数。
flex-shrink ： 指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。
flex-basis : 指定 flex 元素在主轴方向上的初始大小。
flex-direction : 指定主轴的方向（弹性盒子子类放置的地方），其默认值为 row (`行布局`)，当然你可以设置 column (`列布局`) ，以及 row-reverse (`行元素排列的方向相反`) ， column-reverse (`列元素排列的方向相反`)
flex-wrap : 当弹性盒子子类元素宽度超过父元素宽度时，使用其 wrap 值可以自动换行。
flex-flow : 它是 flex-direction 和 flex-wrap 两个属性的缩写，其属性值设置, 值为 row wrap 或者 row 单用。
 
# Grid 布局 
grid-template-columns 属性: 定义网格列的数量及宽度大小，建议使用 fr 单位来设置灵活网格，此单位代表网格容器中可用空间的一份(`1fr 1fr 1fr` = `repeat(3, 1fr);`=>表明了后续列宽的配置要重复多少次)
grid-template-rows 属性: 定义网格行的数量及行高大小。
grid-auto-columns 属性: 默认是 auto 大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。
grid-auto-rows 属性: 默认是 auto大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。
grid-gap 属性：同时定义网格的列、行间隙，若想单独定义请看下面两个属性。
grid-column-gap 属性：定义列间隙。
grid-row-gap 属性 ：定义行间隙。
grid-column 属性 ：用于指定网格项目`列`的大小和位置，开始与结束的线的序号要使用/符号分开。
grid-column-start 属性 ：指定网格项在网格`列`中的起始位置。
grid-column-end 属性 ：指定网格项在网格`列`中的起始位置。
grid-row 属性 ：用于指定网格项目`行`的大小和位置，开始与结束的线的序号要使用/符号分开。
grid-row-start 属性 ：指定网格项在网格`行`中的起始位置
grid-row-end 属性 ：指定网格项在网格`行`中的起始位置
grid-template-areas 属性 ：定义放置元素的区域，是网格区域 grid areas 在 CSS 中的特定命名。
 
# 多列布局 multicol
column-count: 创建指定数量的列
column-width: 创建列具有弹性的宽度（尽可能按照宽度创建列，若容器与宽度成比例的数量）
column-fill：此属性控制在分解为列时如何平衡元素的内容。
column-span：属性使元素在其值设置为all时可以跨所有列。
column-gap：设置列间间隙
column-rule：在列间加入一条分割线(颜色、样式、宽度)
column-rule-color：设置分割线颜色
column-rule-style：设置分割线样式
column-rule-width：设置分割线宽度
 
# Table 布局 display: table (不建议，简单了解)
display: table-row-group ：该元素的行为类似于 HTML 的  元素。
display: table-header-group：该元素的行为类似于 HTML 的  元素。
display: table-footer-group： 该元素的行为类似于 HTML 的  元素。
display: table-row: 该元素的行为类似于 HTML 的  元素。
display: table-cell: 该元素的行为类似于 HTML 的  元素。
display: table-column-group: 该元素的行为类似于 HTML 的  元素。
display: table-column: 该元素的行为类似于 HTML  元素。
display: table-caption: 该元素的行为类似于 HTML 的  元素。
display: ruby-base 实验性 : 该元素的行为类似于 HTML 的  元素。
display: ruby-text 实验性 : 该元素的行为类似于 HTML 的  元素。
display: ruby-base-container 实验性 : 该元素是作为匿名盒子生成的。
display: ruby-text-container 实验性 : 该元素的行为类似于 HTML 的  元素。

0x01 CSS 页面布局

4.多列布局（Multicol）

描述: 多列布局(multicol)实际上是一种把内容按列排序的方式，由于在 web 内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式，那么把内容排列成多列可能是一种有用的技术；就像文本在报纸文章上排列的方式。

网格布局的相关属性

column-count: 创建指定数量的列
column-width: 创建列具有弹性的宽度（尽可能按照宽度创建列，若容器与宽度成比例的数量）
column-fill：此属性控制在分解为列时如何平衡元素的内容。
column-span：属性使元素在其值设置为all时可以跨所有列。
column-gap：设置列间间隙
column-rule：在列间加入一条分割线(颜色、样式、宽度)
column-rule-color：设置分割线颜色
column-rule-style：设置分割线样式
column-rule-width：设置分割线宽度
break-inside: 控制 multicol 和多页媒体中的内容拆分、折断.

column-count - 列数设置

描述: 此属性是描述元素的列数。

语法参数:

column-count: auto | 
 
/* 参数 */
auto ：用来表示列的数量由 column-width 属性指定。
 ：正数  ，用来描述元素内容被划分的理想列数。
 
/* 格式 */
column-count: 3;
column-count: auto;

column-width - 列宽设置

描述: 此属性设置多列布局中的理想列宽，容器将创建尽可能多的列，其中任何列的宽度都不小于列宽值，如果容器的宽度小于指定值，则单列的宽度将小于声明的列宽。

语法参数:

column-width = 
  auto                                |
  0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content(  )  
 
/* 格式 */
/* Keyword value */
column-width: auto;
/*  values */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

示例演示:

• 示例1.三列布局与列宽设置。我们先来看看一个最简单的多列布局的示例, 要把一个块转变成多列容器 (multicol container) ，我们可以使用 column-count 属性来告诉浏览器我们需要多少列，也可以使用 column-width 来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。

"container">
  
Multi-column layout 示例1
  
Paragraph 1.网名 & 历史网名: WeiyiGeek 、唯一、 Weiy_、Weiy-Buf
  
Paragraph 2.兴趣爱好: 计算机互联网技术、网络安全技术、学|看|写代码、搬砖|找轮子、单人运动