一文详解主流CSS布局

介绍水平居中布局、垂直居中布局、居中布局、两列布局、三列布局、圣杯布局、双飞翼布局等主流css布局。

一、水平居中布局

  水平居中布局主要有三种实现方式:
  ● inline-block + text-align 属性配合使用
  ● table + margin 属性配合使用
  ● absolute + transform 属性配合使用

1. inline-block + text-align

  原理:
  text-align属性:是为文本内容设置对齐方式
    ৹ left:左对齐
    ৹ center:居中对齐
    ৹ inline-block:右对齐
  display属性
    ৹ block:块级元素(width和height属性有效)
    ৹ inline:内联元素(text-align属性有效,width和height属性无效)
    ৹ inline-block:行内块级元素(块级+内联)

  代码实现:

<style type="text/css">
  .parent {
    width: 100%;
    height: 100px;
    background: #ccc;

    text-align: center;
  }
  .child {
    width: 100px;
    height: 100px;
    background: #c9394a;

    display: inline-block;
  }
</style>

<div class="parent">
  <div class="child">水平居中</div>
</div>

  效果演示:
水平居中第一种解决方案

  优缺点:
  ● 优点
    ৹ 浏览器兼容性比较好(IE6~9)
  ● 缺点
    ৹ text-align 属性具有继承性,导致子级元素的文本也是居中显示的(见上图中的文字“水平居中”四个字)

2. table + margin

  原理:
  display属性
    ৹ table 和 block 都可以,div元素默认是block块级元素
  margin属性(核心):外边距
    ৹ auto 表示根据浏览器自动分配(等分左右外边距)

  代码实现:

<style type="text/css">
  .parent {
    width: 100%;
    height: 100px;
    background: #ccc;
  }
  .child {
    width: 100px;
    height: 100px;
    background: #c9394a;

    display: table;
    margin: 0 auto;
  }
</style>

<div class="parent">
  <div class="child">水平居中</div>
</div>

  效果演示:
水平居中第二种解决方案

  优缺点:
  ● 优点
    ৹ 只需要对子级元素进行设置就可以实现水平方向居中布局效果
  ● 缺点
    ৹ 如果子级元素脱离文档流(float 或 absolute 或 fixed),会导致 margin 属性的值无效

3. absolute + transform

  这种方式比前两种要复杂些。
  原理:
  position属性
    ৹ absolute 绝对定位,如果父级元素没有开启定位的话,当前元素是相对于页面定位的;反之当前元素是相对于父级元素定位的
    ৹ relative、absolute、fixed 这三个值都是开启定位,position的默认值static表示不开启定位
    ৹ relative 是不脱离文档流的,absolute、fixed 都是脱离文档流的
  left属性
    ৹ 50%,设置子级元素相对于父级元素左边50%
  transform属性
    ৹ 子级元素往左(往左是负值)移动它宽度的一半

  代码实现:

<style type="text/css">
  .parent {
    width: 100%;
    height: 100px;
    background: #ccc;

    position: relative;
  }
  .child {
    width: 100px;
    height: 100px;
    background: #c9394a;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

<div class="parent">
  <div class="child">水平居中</div>
</div>

  效果演示:
水平居中第三种解决方案

  优缺点:
  ● 优点
    ৹ 无论父级元素是否脱离文档流,不影响子级元素水平居中效果(子级元素设置了绝对定位,父级元素开启了定位即已经脱离了文档流)
  ● 缺点
    ৹ transform属性是CSS3中新增属性,浏览器支持情况不好

二、垂直居中布局

  垂直居中布局主要有两种实现方式:
  ● table-cell + vertical-align 属性配合使用
  ● absolute + transform 属性配合使用

1. table-cell + vertical-align

  原理:
  display属性
    ৹ table:设置当前元素为<table>元素(表格)
    ৹ table-cell:设置当前元素为<td>元素(单元格),单元格的内容可以有垂直和水平两种方向的对齐
  vertical-align属性:用于设置文本内容的垂直方向对齐方式
    ৹ top:顶部对齐
    ৹ middle:居中对齐
    ৹ bottom:底部对齐

  代码实现:

<style type="text/css">
  .parent {
    width: 100px;
    height: 200px;
    background: #ccc;

    display: table-cell;
    vertical-align: middle;
  }
  .child {
    width: 100px;
    height: 50px;
    background: #c9394a;
  }
</style>

<div class="parent">
  垂直居中
  <div class="child"></div>
</div>

  效果演示:
垂直居中第一种解决方案

  优缺点:
  ● 优点
    ৹ 浏览器兼容性比较好(IE6~9)
  ● 缺点
    ৹ vertical-align 属性具有继承性,导致父级元素的文本也是居中显示的(见上图中的文字“垂直居中”四个字)

2. absolute + transform

  原理:
  position属性
    ৹ absolute 绝对定位,如果父级元素没有开启定位的话,当前元素是相对于页面定位的;反之当前元素是相对于父级元素定位的
    ৹ relative、absolute、fixed 这三个值都是开启定位,position的默认值static表示不开启定位
    ৹ relative 是不脱离文档流的,absolute、fixed 都是脱离文档流的
  top属性
    ৹ 50%,设置子级元素相对于父级元素上边50%
  transform属性
    ৹ 子级元素往上(往上是负值)移动它宽度的一半

  代码实现:

<style type="text/css">
  .parent {
    width: 100px;
    height: 200px;
    background: #ccc;

    position: relative;
  }
  .child {
    width: 100px;
    height: 50px;
    background: #c9394a;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

<div class="parent">
  垂直居中
  <div class="child"></div>
</div>

  效果演示:
垂直居中第二种解决方案

  优缺点:
  ● 优点
    ৹ 父级元素是否脱离文档流,不影响子级元素垂直居中效果
  ● 缺点
    ৹ transform 属性是CSS3中新增属性,浏览器支持情况不好

三、居中布局

  居中布局实际上就是既要水平方向居中,也要垂直方向居中。

  居中布局主要如下两种实现方式(整合水平居中和垂直居中的方案):
  ● table + margin 实现水平方向居中,table-cell + vertical-align实现垂直方向居中
  ● absolute + transform 实现水平方向和垂直方向居中

1. table + margin & table-cell + vertical-align

  原理:
  整合水平居中和垂直居中的方案。

  代码实现:

<style type="text/css">
  .parent {
    width: 600px;
    height: 400px;
    background: #ccc;

    display: table-cell;
    vertical-align: middle;
  }
  .child {
    width: 100px;
    height: 100px;
    background: #c9394a;

    /* 按照前面介绍这边应该是table,但<table>作为<td>的子元素,与html语义化不符 */
    /* 使用block也能起到一样的效果 */
    display: block;
    margin: 0 auto;
  }
</style>

<div class="parent">
  居中
  <div class="child"></div>
</div>

  效果演示:
居中布局第一种解决方案

  优缺点:
  ● 优点
    ৹ 浏览器兼容性比较好(IE6~9)
  ● 缺点
    ৹ 只需要设置子元素的居中效果,但却同时修改了父元素的属性,不够干净

2. absolute + transform

  原理:
  利用定位的方式来实现居中效果。

  代码实现:

<style type="text/css">
  .parent {
    width: 600px;
    height: 400px;
    background: #ccc;

    position: relative;
  }
  .child {
    width: 100px;
    height: 100px;
    background: #c9394a;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="parent">
  居中
  <div class="child"></div>
</div>

  效果演示:
居中布局第二种解决方案

  优缺点:
  ● 优点
    ৹ 在不考虑浏览器兼容性的情况下,优于上一种解决方案(目前老版本浏览器的市场占有率越来越低)
  ● 缺点
    ৹ 只需要设置子元素的居中效果,但却同时修改了父元素的属性,不够干净
    ৹ transform 属性是CSS3中新增属性,浏览器支持情况不好

四、两列布局

  两列布局是多列布局的一种,一般情况下是指一列(左列)确定宽度,另一列(右列)自适应(自动填满剩余所有空间)。

  两列布局主要有三种实现方式:
  ● float + margin 属性配合使用
  ● float + overflow 属性配合使用
  ● display 属性的 table 相关值使用

1. float + margin(不建议采用)

  原理:
  width属性:左列元素设置定宽,右列元素div默认是100%
  height:需要设置高度,否则div元素默认高度是0
  margin-left属性:右列元素是100%的宽度,左外边距需要和左列元素宽度相等

  代码实现:

<style type="text/css">
  .left, .right {
    height: 300px;
  }
  .left {
    width: 300px;
    background: #c9394a;

    float: left;
  }
  .right {
    background: #ccc;

    margin-left: 300px;
  }
</style>

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

  效果演示:
两列布局第一种解决方案

  优缺点:
  ● 优点
    ৹ 实现方式简单
  ● 缺点
    ৹ 自适应元素 margin 属性值与定宽元素的 width 属性值保持一致(耦合性强)
    ৹ 定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好(老版本浏览器会在两个元素间有一个空白区)
    ৹ 如果在自适应那一列中存在子集元素,并且使用了 clear: both;清除浮动时,显示就会存在问题

2. float + margin(优化版,但也不建议采用)

  原理:
  为自适应元素(右列)定义父级元素,
  float属性:右列元素的父元素设置为浮动后,导致默认宽度为0,需要设置宽度为100%
  margin-left属性:右列元素的父元素设置margin-left为负值(向左移动)
  position属性:左列元素设置相对定位,让它的显示层级更高

  代码实现:

<style type="text/css">
  .left, .right {
    height: 300px;
  }
  .left {
    width: 300px;
    background: #c9394a;

    float: left;
    position: relative;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -300px;
  }
  .right {
    background: #ccc;
  }
</style>

<div class="parent">
  <div class="left"></div>
  <div class="right-fix">
    <div class="right"></div>
  </div>
</div>

  效果演示:
两列布局第一种解决方案优化版

  优缺点:
  ● 优点
    ৹ 解决了上一种方案的第1和第3个缺点
  ● 缺点
    ৹ 给右列元素多增加了一个父级容器,且为了解决相关问题,又设置了很多相关的css内容,解决方案很复杂
    ৹ 上一种方案的第2个缺点没有解决

3. float + overflow

  原理:
  为自适应元素(右列)定义父级元素,
  overflow属性:右列元素设置为溢出值隐藏,开启BFC模式(当前元素的内部环境与外界完全隔离)

  代码实现:

<style type="text/css">
  .left, .right {
    height: 300px;
  }
  .left {
    width: 300px;
    background: #c9394a;

    float: left;
  }
  .right {
    background: #ccc;

    overflow: hidden;
  }
</style>

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

  效果演示:
两列布局第二种解决方案

  优缺点:
  ● 优点
    ৹ 实现方式简单
    ৹ 上面两种解决方案中的问题在此解决方案中都没有
  ● 缺点
    ৹ overflow 属性不仅解决了两列布局问题,同时设置了内容溢出的情况(实际使用中我们可能不要隐藏溢出内容)

4. 利用display属性的table相关值

  原理:
  对左右两列的父级元素进行设置(如果没有父级元素,需要新增一个)
  display属性:table值的特性:表格的单元格的宽度会自动分配(默认是50%等分,设置值后,另外的部分会自适应)
  table-layout属性:设置为fixed,防止过长的内容撑破表格

  代码实现:

<style type="text/css">
  .parent {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .left, .right {
    height: 300px;
    display: table-cell;
  }
  .left {
    width: 300px;
    background: #c9394a;
  }
  .right {
    background: #ccc;
  }
</style>

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

  效果演示:
两列布局第三种解决方案

  优缺点:
  ● 优点
    ৹ 浏览器兼容性比较好
  ● 缺点
    ৹ 将所有元素的 display 属性设置为 table 相关值,受到相应制约

五、三列布局

  三列布局是多列布局的一种,一般情况下是指三列中左边两列是确定的宽度,右边一列是自动填满剩余所有空间的一种布局效果。
  三列布局比两列布局多了一列“定宽”,但实现起来并不比两列布局复杂多少。

  三列布局主要有三种实现方式:
  ● float + margin 属性配合使用
  ● float + overflow 属性配合使用
  ● display 属性的 table 相关值使用

  可见,三列布局的实现方式和两列布局基本上是类似的,下面举一个例子来演示。

1. float + margin

  原理:
  和两列布局的第一种解决方案类似。

  代码实现:

<style type="text/css">
  .left, .center, .right {
    height: 300px;
  }
  .left {
    width: 300px;
    background: #c9394a;

    float: left;
  }
  .center {
    width: 300px;
    background: #008000;

    float: left;
  }
  .right {
    background: #ccc;

    margin-left: 600px;
  }
</style>

<div class="parent">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

  效果演示:
三列布局第一种解决方案

2. 其他几种解决方案略

  其他几种解决方案略。
  可以举一反三,四列、五列布局都可以采用相同的方式来实现。

六、圣杯布局

  圣杯布局是一个完整页面的布局(一个较为复杂的页面可能会由各种布局方式组合而成,此处抽离出一个简单的模型),呈现一种三行三列的结构,一般“三列”多出现在第二行中,如下图所示:
圣杯布局示例
  圣杯布局是来源于该布局效果类似圣杯而得名。简单来说,就是指三行三列布局。

  圣杯布局的实现方式:
  由于 div 元素本来就是垂直方向排列的,所以不用作任何的设置,三个 div 标签就可以实现三行的效果了;
  因此圣杯布局的核心就是中间主体部分的 左右定宽 + 中间自适应 的布局效果;
  中间主题部分实现后,只需要在首尾增加两个 div 标签,即可实现圣杯布局。

  原理:
  ● 思路
    ৹ parent(外面包裹一层)设置 margin-leftmargin-right 预留出两个定宽位置;
    ৹ left和right部分通过两次移动,移动到理想位置。

  ● Tips
    ৹ 子级元素增加浮动,父级元素没有加浮动,父级元素会有高度坍塌的问题(高度为0),因此需要给父级元素设置 height 属性;
    ৹ div 元素默认宽度是父级元素的100%,但设置为 float 后,默认宽度变成了0;
    ৹ 由于三个元素都是浮动的,因此可以通过水平方向的移动(margin-left)移动到上一行;
    ৹ 除了 margin-left 可以移动元素,leftright 也可以,但需要开启定位,但为了避免脱离文档流的麻烦,使用 relative 相对定位。

  ● 详情见下面代码注释。

  代码实现:

<style type="text/css">
  .parent {
    height: 300px;
    /* 对应的是left元素的宽度 */
    margin-left: 300px;
    /* 对应的是right元素的宽度 */
    margin-right: 300px;
  }

  .left, .center, .right {
    height: 300px;
    float: right;
  }
  .left, .right {
    width: 300px;
  }
  .left {
    background: #c9394a;
    /* 将当前元素从当前行,移动到上一行同一个位置 */
    margin-left: -100%;

    position: relative;
    /* 将当前元素移动到理想位置 */
    left: -300px
  }
  .center {
    background: #008000;
    /* 表示为父级元素宽度的100% */
    width: 100%;
  }
  .right {
    background: #ccc;

    margin-left: -300px;
    position: relative;
    right: -300px
  }
</style>

<div class="parent">
  <div class="center"></div> <!-- SEO角度考虑,center放最前面 -->
  <div class="left"></div>
  <div class="right"></div>
</div>

  效果演示:
圣杯布局解决方案

七、双飞翼布局

  双飞翼布局最早是淘宝团队提出,是针对圣杯布局的优化解决方案。主要是优化了圣杯布局中开启定位(即left和right两列)的问题。

  双飞翼布局和圣杯布局本质上都是为了解决一个问题:三列的重合部分如何解决。下面看下双飞翼布局给出的解决方案。

  原理:
  ● 优化
    ৹ 需要优化圣杯布局中 position 定位的问题

  ● 思路
    ৹ center(自适应那一列)中增加子级元素(本案例中为inner);
    ৹ 之后开发的内容写在 inner 元素里。

  ● 详情见下面代码注释。

  代码实现:

<style type="text/css">
  .parent {
    height: 300px;
  }

  .left, .center, .right {
    height: 300px;
    float: right;
  }
  .left, .right {
    width: 300px;
  }
  .left {
    background: #c9394a;
    /* 将当前元素从当前行,移动到上一行同一个位置 */
    margin-left: -100%;
  }
  .center {
    background: #008000;
    /* 表示为父级元素宽度的100% */
    width: 100%;
  }
  .right {
    background: #ccc;

    margin-left: -300px;
  }
  .inner {
    height: 300px;
    background-color: #FF69B4;
    /* 对应的是left元素的宽度 */
    margin-left: 300px;
    /* 对应的是right元素的宽度 */
    margin-right: 300px;
  }
</style>

<div class="parent">
  <div class="center">
    <div class="inner"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

  效果演示:
双飞翼布局解决方案

八、等分布局

  等分布局就是指一行被分为若干列,每一列的宽度是相同的值。

  等分布局主要有两种实现方式:
  ● float 属性实现等分布局效果
  ● display 属性的 table 实现等分布局效果

  需要兼顾的问题:
  ● 实现等分布局时,有可能需要每一列之间实现空白间隔区域
    ৹ 通过在原有HTML页面源代码的基础上增加一个父级容器(本案例中为parent-fix)来实现

1. float属性实现

  代码实现:

<style type="text/css">
  .parent-fix {
    overflow: hidden;
  }

  .parent {
    height: 300px;
    /* 整体向左移动10px,让最左边的间隙消失 */
    margin-left: -10px;
  }

  .col1, .col2, .col3, .col4 {
    height: 300px;
    width: 25%;
    float: left;

    box-sizing: border-box;
    /* 增加空白间隙 */
    padding-left: 10px;
  }

  .inner {
    height: 300px;
  }

  .col1 .inner {
    background: hotpink;
  }
  .col2 .inner {
    background: lightblue;
  }
  .col3 .inner {
    background: green;
  }
  .col4 .inner {
    background: yellow;
  }
</style>

<div class="parent-fix">
  <div class="parent">
    <div class="col1">
      <div class="inner"></div>
    </div>
    <div class="col2">
      <div class="inner"></div>
    </div>
    <div class="col3">
      <div class="inner"></div>
    </div>
    <div class="col4">
      <div class="inner"></div>
    </div>
  </div>
</div>

  效果演示:
等分布局第一种解决方案

2. table元素实现

  代码实现:

<style type="text/css">
  .parent-fix {
    overflow: hidden;
    width: 1444px;
  }

  .parent {
    width: 1434px;
    /* <table> */
    display: table;

    margin-left: -10px;
  }

  .col1, .col2, .col3, .col4 {
    height: 300px;
    /* <td> */
    display: table-cell;

    box-sizing: border-box;
    padding-left: 10px;
  }

  .inner {
    height: 300px;
  }

  .col1 .inner {
    background: hotpink;
  }
  .col2 .inner {
    background: lightblue;
  }
  .col3 .inner {
    background: green;
  }
  .col4 .inner {
    background: yellow;
  }
</style>

<div class="parent-fix">
  <div class="parent">
    <div class="col1">
      <div class="inner"></div>
    </div>
    <div class="col2">
      <div class="inner"></div>
    </div>
    <div class="col3">
      <div class="inner"></div>
    </div>
    <div class="col4">
      <div class="inner"></div>
    </div>
  </div>
</div>

  效果演示:
等分布局第二种解决方案

九、等高布局

  等高布局就是指一行被分为若干列,每一列的高度是相同的值。

  等高布局主要有两种实现方式:
  ● display 属性的 table 实现等高布局效果
  ● padding + margin 属性实现等高布局效果

1. table元素实现

  原理:
  表格的单元格默认是等高的。

  代码实现:

<style type="text/css">
  .parent {
    display: table;
  }
  .left, .right {
    width: 300px;

    display: table-cell;
  }
  .left {
    background: #93394a;
  }
  .right {
    background: #ccc;
  }
</style>

<div class="parent">
  <div class="left">我是左列</div>
  <div class="right">我是右列我是右列我是右列我是右列www.wenyuanblog.com我是右列我是右列我是右列我是右列www.wenyuanblog.com我是右列我是右列我是右列</div>
</div>

  效果演示:
等高布局第一种解决方案

  优缺点:
  ● 优点
    ৹ 浏览器兼容性比较好

2. padding + margin

  原理:
  padding-bottom 和 margin-bottom都设置为极大且相反值的时候,有一个对冲的效果,然后结合父元素的 overflow 属性,实现伪等高布局

  这种解决方案实现的并不是真正的等高布局,只是视觉上等高的伪等高布局。在实现页面布局中有句话叫做:眼见不一定为实,说的就是这种情况。

  代码实现:

<style type="text/css">
  .parent {
    overflow: hidden;
  }

  .left, .right {
    width: 300px;

    float: left;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    background: #93394a;
  }
  .right {
    background: #ccc;
  }
</style>

<div class="parent">
  <div class="left">我是左列</div>
  <div class="right">我是右列我是右列我是右列我是右列www.wenyuanblog.com我是右列我是右列我是右列我是右列www.wenyuanblog.com我是右列我是右列我是右列</div>
</div>

  效果演示:
等高布局第二种解决方案

十、CSS3多列布局

1. columns属性

  columns 属性:它是一个简写属性,可以分成以下两个属性
  ● column-count 属性:定义列的数量
    ৹ auto:默认值,用于表示列的数量由其他CSS属性决定
    ৹ number:必须是正整数,用于表示定义列的数量
  ● column-width 属性:定义列的宽度
    ৹ auto:默认值,用于表示列的宽度由其他CSS属性决定
    ৹ length:必须是正整数,用于表示定义列的宽度

  代码实现:

<style type="text/css">
  .parent {
    column-count: 4;
    column-width: 300px;
  }

  .col1, col2, col3, col4 {
    height: 300px;
  }

  .col1 {
    background: hotpink;
  }

  .col2 {
    background: lightblue;
  }

  .col3 {
    background: green;
  }

  .col4 {
    background: yellow;
  }
</style>

<div class="parent">
  <div class="col1"></div>
  <div class="col2"></div>
  <div class="col3"></div>
  <div class="col4"></div>
</div>

  效果演示:
CSS3多列布局的columns属性

2. 列的间距

  上图中可以看到,列与列之间有空白的间隙,这个间隙不是由padding或者margin设置的,而是CSS3在多列布局时自动分配的。

  在CSS3中,column-gap 属性用于设置列与列之间的间距,该属性主要为多列显示时的元素设置。

  column-gap 属性有两个属性值:
  ● normal:用于表示使用浏览器定义列的默认间距,默认值为1em
  ● length:必须是正整数,用于表示定义列之间的间距

  代码实现:

<style type="text/css">
  .parent {
    columns: 4 300px;
    column-gap: 20px;
  }

  .col1, col2, col3, col4 {
    height: 300px;
  }

  .col1 {
    background: hotpink;
  }

  .col2 {
    background: lightblue;
  }

  .col3 {
    background: green;
  }

  .col4 {
    background: yellow;
  }
</style>

<div class="parent">
  <div class="col1"></div>
  <div class="col2"></div>
  <div class="col3"></div>
  <div class="col4"></div>
</div>

  效果演示:
CSS3多列布局列的间距

3. 列的边框

  在CSS3中,column-rule 属性用于定义列与列之间的边框,其中包括边框宽度、边框颜色以及边框样式。

  column-rule 属性:它是一个简写属性,可以分成以下三个属性
  ● column-rule-width 属性:用于表示列与列之间的边框宽度
  ● column-rule-color 属性:用于表示列与列之间的边框颜色
  ● column-rule-style 属性:用于表示列与列之间的边框样式

  代码实现:

<style type="text/css">
  .parent {
    columns: 4 300px;
    column-gap: 20px;
    column-rule: 5px tomato double;
  }

  .col1, col2, col3, col4 {
    height: 300px;
  }

  .col1 {
    background: hotpink;
  }

  .col2 {
    background: lightblue;
  }

  .col3 {
    background: green;
  }

  .col4 {
    background: yellow;
  }
</style>

<div class="parent">
  <div class="col1"></div>
  <div class="col2"></div>
  <div class="col3"></div>
  <div class="col4"></div>
</div>

  效果演示:
CSS3多列布局列的边框

4. 横跨多列

  在CSS3中,column-gap 属性用于定义一个列元素是否跨列。

  column-gap 属性有两个属性值:
  ● none:用于表示元素不跨列
  ● all:用于表示元素跨所有列

  代码实现:

<style type="text/css">
  .parent, .parent2 {
    columns: 4 300px;
    column-gap: 20px;
    column-rule: 5px tomato double;
  }

  .col1, col2, col3, col4, col5 {
    height: 300px;
  }

  .col1 {
    background: hotpink;
  }

  .col2 {
    background: lightblue;
  }

  .col3 {
    background: green;
  }

  .col4 {
    background: yellow;
  }

  .col5 {
    background: tomato;

    column-span: all;
  }
</style>

<div class="parent">
  <div class="col1"></div>
  <div class="col2"></div>
  <div class="col3"></div>
  <div class="col4"></div>
</div>
<div class="parent2">
  <div class="col5"></div>
</div>

  效果演示:
CSS3多列布局横跨多列

5. 列的填充

  在CSS3中,column-fill 属性用于定义列的高度是由内容决定,还是统一高度。

  column-fill 属性有两个属性值:
  ● auto:默认值,用于表示列的高度由内容决定
  ● balance:用于表示列的高度根据内容最多的一列高度为准

  这个属性在Chrome浏览器中兼容不是很好,此处省略示例。

十一、全屏布局

  全屏布局就是指HTML页面铺满整个浏览器窗口,并且没有滚动条。而且还可以跟随浏览器的大小变化而变化。

  全屏布局示意图如下图所示:
全屏布局示意图

全屏布局的一种解决方案

  代码实现:

<head>
  <style type="text/css">
    html, body {
      margin: 0;
      overflow: hidden;
    }

    header {
      height: 100px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: lightgray;
    }

    .content {
      position: fixed;
      left: 0;
      right: 0;
      top: 100px;
      bottom: 100px;
      overflow: auto; /* 解决内容溢出问题 */
      background: lightblue;
    }

    .content .left {
      width: 300px;
      height: 100%;
      position: fixed;
      left: 0;
      top: 100px;
      bottom: 100px;
      background: lightcoral;
    }
    .content .right {
      height: 600px; /* div是个块级元素,它的高度由后代元素的高度之和决定,故设置100%无效*/
      margin-left: 300px;
      background: greenyellow;
    }

    footer {
      height: 100px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: lightslategray;
    }
</style>
</head>

<body>
  <header></header>
  <div class="content">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <footer></footer>
</body>

  效果演示:
全屏布局的一种解决方案

十二、总结

  其它布局在网上已经有很多人总结过了,这里不再赘述,例如:
  ● 网格布局(响应式布局)
  ● 弹性盒子布局(flex布局)

  最后需要注意,没有完美的解决方案,在实际开发中,要根据实际情况选择合适的布局方案。


  目录