CSS 布局
简介
布局在我们前端日常开发来说是非常重要的，一个好的布局能简化代码的同时还能提高网页的性能。常见的布局方法有`浮动(float)布局`、`绝对定位(position)布局`、`表格布局(table)`、`弹性(flex)布局`、`网格(grid)布局`。关于布局方法本文不做详细讲解，笔者推荐看 阮一峰老师 flex布局教程 和 阮一峰老师 grid布局教程 。
本文主要讲解水平垂直居中、等高布局、单栏布局、双栏布局、三栏布局一些项目中常用的布局方案。
居中
居中在我们日常工作中还是会经常碰到。
水平居中
对于水平居中一般可以使用如下四种方式
- 对于行内元素我们可以在父元素上设置
text-align:center;来实现。 - 对于定长块级元素我们可以使用
margin: 0 auto;来实现。 - 我们可以在父元素上使用
flex布局来实现。 - 我们可以在父元素上使用
grid布局来实现。
垂直居中
对于垂直居中一般可以使用如下三种方式
- 我们可以在父元素上设置
line-height等于height来实现。 - 我们可以在父元素上使用
flex布局来实现。 - 我们可以在父元素上使用
grid布局来实现。 - 我们可以在父元素上使用
table布局来实现。
水平垂直同时居中
比如我们想实现如下水平垂直同时居中的效果
实现水平垂直同时居中我们可以使用绝对定位、table布局、flex布局 或
grid布局来实现。
首先我们创建一个需要居中的盒子。
纯绝对定位
绝对定位加负外边距
绝对定位加平移
使用flex实现
使用grid实现
使用table加外边距实现
使用table布局需要注意如下
display: table时padding会失效display: table-row时margin、padding同时失效display: table-cell时margin会失效
等高布局
等高布局一般把网页垂直分成几部分，每一部分的高度是取这几个模块中最高的那个。效果如下
最常见的场景就是我们看视频的时候，左边是视频播放窗口，右边是视频目录，两边的高度是一样的。
flex布局实现
使用flex需要注意：align 方向不可以设置，设置了值，高度就不会撑开。
grid布局实现
使用grid需要注意：align 方向不可以设置，设置了值，高度就不会撑开。
单栏布局
单栏布局我们常用在网页框架上，一般我们把网页分为 header、content、footer三部分。
在不同的项目我们可能对这三部分的样式需求有所差别，比如需要顶部固定、需要底部固定等等。
顶底部都不固定
比如想实现如下效果，footer在内容不足的时候吸附在窗口底部，当内容多的时候又可以被抵到窗口下面。
使用padding加负margin实现
使用flex实现
顶部固定
使用padding加负margin加fixed实现顶部固定布局
使用flex加fixed定位实现
底部固定
使用padding加负margin实现底部固定布局
使用flex加fixed定位实现
顶底部都固定
使用fixed实现顶底部固定布局
使用flex加fixed定位实现
两栏布局
两栏布局就是一边固定，另外一边自适应，效果如下
实现两栏布局的方法也有很多，笔者接下来介绍用的比较多的几种方式。
absolute定位加margin-left（右边自适应）
absolute定位加margin-right（左边自适应）
使用flex实现
使用grid实现
三栏布局
三栏布局就是两边固定，中间自适应布局，效果如下
实现三栏布局的方法也有很多，笔者接下来介绍用的比较多的几种方式。