CSS 常见布局方式学习及总结

对于很多前端er 来说，CSS 布局应该是日常工作中碰到最多的东西之一。一个好的布局不仅可以减少代码的书写量，而且有助于我们理解页面结构，更好地实现多种页面效果。而一般情况下我们对页面布局最常用到的当属float、display、position 这三个属性了，本文将对这三个属性做简单的说明并给出几种常见的布局方式。

float、display、position 基本知识点

float——控制元素浮动

• none ：元素不浮动；
• left ：元素左浮动；
• right ：元素右浮动。

display——控制元素生成的框的类型

• none ：元素不显示；
• inline ：内联显示；
• inline-block ：行内块元素；
• block ：块元素；
• flex ：弹性盒子，响应式地实现页面布局，-webkit-flex；inline-flex。

position——控制元素定位方式

• static ：默认值，没有定位。
• relative ：相对定位，相对其正常位置定位；
• absolute ：绝对定位，相对于其第一个非 static 定位的父元素；
• fixed ：绝对定位，相对于可视窗口定位。

常规布局方式

要理解页面常规布局，首先我们要知道：

• 所有的 HTML 元素默认都是不浮动的；
• 所有的 HTML 元素默认分为内联元素和块元素；
• 所有的 HTML 元素默认定位方式是跟随文档流的。

如上图所示，一般情况下我们会选择使用块元素 (display: block;) 固定好布局的大体框架，灰色部分，然后在其内添加内联元素 (display: inline;)，绿色部分 ，由于内联元素无法控制宽高等属性，对于一些特殊的需求可能需要将其转换为行内块元素 (display: inline-block;) 进行操作，橘色部分。对于需要左右排列的，我们一般会使用 float 属性控制其左右浮动。一般我们不会修改元素的 position 属性，而对于一些特殊要求，比如侧栏固定，底部广告条，蓝色部分。可能需要修改 position 为 fixed 或其他值使其相对于其定位参照偏移一定位置进行定位。

特殊布局方式

常规的布局方式可以应付大部分的日常工作，对于一些稍微学习过前端的同学应该问题不大，而且常规的布局方式一般固定页面大小，无法做到有效自适应。针对于此，这里主要介绍几种特殊的布局方式。

Flex 弹性布局

flex 布局是一种弹性布局，每一个 Flex 容器默认存在两根轴：水平的主轴和垂直的交叉轴。其内部元素根据这两条轴进行排列，使用 Flex 布局除了要设置 display: flex; 或者 display: inline-flex; 将其转换为 Flex 布局外，还需要注意一下几个属性：

父容器属性

• flex-direction：控制主轴（元素排列）方向，row (→)| row-reverse (←)| column (↓)| column-reverse (↑) ；
• flex-wrap：控制元素是否换行，nowrap (不换行)| wrap (换行)| wrap-reverse (首行在下) ；
• flex-flow：flex-direction 和 flex-wrap 的简写形式，默认 row nowrap ；
• justify-content：控制项目在主轴上的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| space-between (两端对齐，项目间隔)| space-around(两端对齐，四周间隔) ；
• align-items：控制交叉轴上的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| baseline (基线对齐)| stretch(占满容器) ；
• align-content：控制多根轴线的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| space-between (两端对齐，项目间隔)| space-around(两端对齐，四周间隔)| stretch(占满容器) ；

子项目属性

• order：控制项目的排列顺序，整数；
• flex-grow：控制项目的放大比例，设置比例可控制不同项目空间占比；
• flex-shrink：控制项目的缩小比例，设置比例可控制不同项目空间占比；
• flex-basis：控制分配多余空间之前，项目占据的主轴空间；
• flex：flex-grow, flex-shrink 和 flex-basis的简写；
• align-self：控制当前项目有与其他项目不一样的对齐方式；

实例-自适应均匀排布

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout.html

实例-圣杯布局

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout-2.html

实例-水平等高瀑布流布局

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout-3.html

Grid 网格布局

Grid 布局是一种网格布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。不过目前该布局方式兼容性存在一定问题，慎用！同样的，处理定义父容器 display: grid; 或者 display: inline-grid; 将其转换为 Grid 布局方式外，我们还需要了解如下属性：

父容器属性

• grid-template-columns：控制网格的列宽，px、%、fr、repeat()、auto-fill、minmax()、auto、[]；
• grid-template-rows：控制网格的行高，px、%、fr、repeat()、auto-fill、minmax()、auto、[]；
• grid-row-gap：控制网格的行间距；
• grid-column-gap：控制网格的列间距；
• grid-gap：grid-column-gap和grid-row-gap的简写；
• grid-template-areas：定义区域，一个区域由单个或多个单元格组成；
• grid-auto-flow：控制单元格排列顺序，row (按行)| column (按列)| row dense (行稠密)| column dense (列稠密)；
• justify-items：控制单元格内容的水平位置，start | end | center | stretch ；
• align-items：控制单元格内容的垂直位置，start | end | center | stretch ；
• place-items：align-items 和 justify-items 的简写；
• justify-content：控制整个内容区域在容器里面的水平位置，start | end | center | stretch | space-around | space-between | space-evenly ；
• align-content：控制整个内容区域在容器里面的垂直位置，start | end | center | stretch | space-around | space-between | space-evenly ；
• place-content：align-content 和 justify-content 的简写；
• grid-auto-columns：控制浏览器自动创建的多余网格的列宽；
• grid-auto-rows：控制浏览器自动创建的多余网格的行高；
• grid-template：grid-template-columns、grid-template-rows 和 grid-template-areas的简写；
• grid：grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 的 简写。

子项目属性

• grid-column-start：指定单元格列的起始位置网格线（左）；
• grid-column-end：指定单元格列的终止位置网格线（右）；
• grid-row-start：指定单元格行的起始位置网格线（上）；
• grid-row-end：指定单元格行的终止位置网格线（下）；
• grid-column：grid-column-start 和 grid-column-end 的简写；
• grid-row：grid-row-start 和 grid-row-end 的简写；
• grid-area：指定项目放在哪一个区域，还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写；
• justify-self：控制当前单元格内容的水平位置，start | end | center | stretch ；
• align-self：控制当前单元格内容的垂直位置，start | end | center | stretch ；
• place-self：align-self 和 justify-self 的简写。

实例-嵌套盒子布局

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-grid-layout.html

Multi-column 多列布局

Multi-column 多列布局是 CSS3 中新出现的一种布局方式，它能轻松的让文本呈现多列显示，就像报纸上的新闻排版一样。与 Flex 及 Grid 不同的是，Multi-column 布局不会影响子元素在其文档流中的正常显示方式，最后 Muti-column 需要了解的属性有：

• column-count：控制列的数量；
• column-width：控制列的宽度，最小宽度；
• columns：column-count 和 column-width 的简写；
• column-gap：控制列与列之间的间隙；
• column-rule-color：控制列与列之间的边框颜色；
• column-rule-style：控制列与列之间的边框样式；
• column-rule-width：控制列与列之间的边框宽度；
• column-rule：column-rule-color 、column-rule-style 和 column-rule-width 的简写；
• column-span：控制对象元素是否横跨所有列，可应用于子项目；
• column-fill：控制内容是如何分割成列；

实例-垂直等宽瀑布流布局

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-multi-column-layout.html

以上。