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

  一、居中方式  

水平居中

 

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

行内元素:对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局,对父元素设置display:flex;justify-content:center;

 

垂直居中

 

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

父元素一定,子元素为单行内联文本:设置父元素的height等于行高line-height
父元素一定,子元素为多行内联文本:设置父元素的display:table-cell或inline-block,再设置vertical-align:middle;
块状元素:设置子元素position:absolute并设置top、bottom为0,父元素要设置定位为static以外的值,margin:auto;

 

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

 

二、单列布局 

 

特征:定宽、水平居中

 

常见的单列布局有两种:

 

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

 

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

 

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

 

 

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

实现多列布局的方式有:

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

  下面所举例子(以三栏布局为例)的DOM文档内容如下:

    <!-- 三栏布局 -->
    <!-- 这里要注意DOM的书写顺序问题。 -->
    <aside class="aside1"></aside>
    <aside class="aside2"></aside>
    <article class="main"></article>

 

  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更容易理解一些,它的实现思路如下:

 

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

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

 

  5、双飞翼布局 

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

    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、完全支持旧浏览器的网站