本文共 3562 字，大约阅读时间需要 11 分钟。

　　布局是CSS中一个重要部分，下面总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现）。

　　一、居中方式　　

水平居中

水平居中对于子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案是不同。 

行内元素：对父元素设置text-align:center;

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案也是不同的。

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height

通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。

二、单列布局　

特征：定宽、水平居中

常见的单列布局有两种：

·        一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。

·        一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。

对于第一种，对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。

三、实现多列布局的几种方式

实现多列布局的方式有：

2. 1. 使用BFC隐藏属性
   2. float margin
   3. absolute margin
   4. 圣杯布局
   5. 双飞翼布局
   6. flex布局

　　下面所举例子（以三栏布局为例）的DOM文档内容如下：

　　1、使用BFC隐藏属性

　　　　在对需要自适应的元素BFC化，可以实现两列或三列布局

　　三列布局方式示例如下：

/*固定宽度*/        .aside1 {
              float: left; 　　　　　　/*给浮动元素设置margin-right使两栏之间有间隙*/          margin-right: 10px;          width: 100px;          height: 100vh;          background-color: lightsalmon;        }         /*固定宽度*/        .aside2 {
              float: right;          margin-left: 10px;          width: 100px;          height: 100vh;          background-color: lightsalmon;        }         /*BFC化自适应宽度*/        .main {
              overflow: hidden;          height: 100vh;          background-color: lightpink;        }

　　使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题。如果将aside2与article交换位置，那么aside2元素会被挤到article元素之下，无法实现三栏自适应布局。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

　　2、float margin

       在自适应宽度的元素上设置margin值，margin的值大于或等于固定宽度的值即可。实现思路与使用BFC隐藏属性差不多。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

CSS样式：

.aside1 {
     float: left;  width: 100px;  height: 100vh;  background-color: lightsalmon;}.main {
     margin-left: 110px;  margin-right: 110px;  height: 100vh;  background-color: lightpink;}.aside2 {
     float: right;  width: 100px;  height: 100vh;  background-color: lightsalmon;}

3、absolute margin

使用position: absolute时，DOM元素顺序并不重要。给左右两栏定宽，主内容自适应宽度。缺点：侧边栏元素脱离文档流。优点：article元素可先加载。

CSS样式：

.aside1 {
     position: absolute;  left: 0;  top: 0;  width: 100px;  height: 100vh;  background-color: lightsalmon;}.aside2 {
     position: absolute;  right: 0;  top: 0;  width: 100px;  height: 100vh;  background-color: lightsalmon;}.main {
     margin: 0 110px;  height: 100vh;  background-color: lightpink;}

4、圣杯布局

　　圣杯布局叫float 负margin relative更容易理解一些，它的实现思路如下：

2. 1. 两栏和自适应元素都设置同一方向的浮动(如float: left)
   2. 父元素设置左右padding为左右边栏的宽度。
   3. 自适应元素设置宽度为100%
   4. 左边栏margin-left为负100%，再设置relative，最后通过left属性偏移负的自身宽度。
   5. 右边栏margin-left为负自身宽度，再设置relative，最后通过right属性偏移负的自身宽度。

　　而且，该布局方式与其他布局方式有一个明显的不同：它需要有一个父元素。缺点：宽度小于两栏宽度时，元素会因为宽度不足而掉下去。

　　5、双飞翼布局　

双飞翼布局与圣杯布局相似。只不过少了relative与left, right的步骤和共同父元素，主内容元素多了层父元素。实现思路如下：

1. 1. 两栏和自适应元素都设置同一方向的浮动(如float: left)
   2. main元素设置左右margin值，值为左右两栏的宽度。main父元素设置宽度为100%
   3. 左边栏margin-left为负100%
   4. 右边栏margin-left为负自身宽度

　　6、flex布局

flex布局还可以称之为弹性布局，它可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。

弹性布局的使用方式如下：

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

　　虽然 在需要缩放，对齐和重新排序元素的情况下使用flex布局非常方便，但以下情况应该尽量避免使用 Flex 布局：

　　1、整体页面布局

　　2、完全支持旧浏览器的网站

转载地址：https://blog.csdn.net/qq_29069777/article/details/102214400 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！