PC端CSS布局汇总

前言

此文章是解剖CSS布局原理的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。

因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对PC端的布局进行讲解，以下代码只写关键代码。如果你发现你写了关键打代码还达不到效果，请检查是否写了不该写的样式。

为了提高网页性能，考虑到repaint/reflow，表格元素尽量少用，有其他选择的情况尽量用其他布局。

居中布局

一、单个元素水平居中

<div id="container">
  <div class="box"></div>
</div>

1. 宽度固定

方法一：

.box {
  width: 300px;
  margin: 0 auto;
}

比较常用的方法

方法二：

#container {
  position: relative;
}
.box {
  width: 100px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

此方法适用于定位时的居中方式

2. 宽度不固定

方法一：

.box {
  display: table;
  margin: 0 auto;
}

缺点：设置为表格元素，内部元素的布局有可能收到影响

方法二：

#container {
  position: relative;
}
.box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

缺点：要用到 transform ，兼容性较差

方法三：

#container {
  display: table-cell;   // 这属性在这可加可不加
  text-align: center;
}
.box {
  display: inline-block;
}

缺点：需要涉及到父类的样式

二、单个元素垂直居中

<div id="container">
  <div class="box"></div>
</div>

高度固定

方法一：

#container {
  position: relative;
}
.box {
  height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

缺点：要用到定位，脱离文档流

方法二：

#container {
  height: 400px;
  line-height: 400px;
}
.box {
  display: inline-block;
  height: 50px;
  vertical-align: middle;
}

注意，父容器设置了行高，子类要记得重置行高

高度不固定

方法一：

#container {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

缺点：要用到 transform ，兼容性较差

方法二：

#container {
  display: table-cell;
  verticle-align: middle;
}

缺点：由父类控制是否居中

三、多个元素水平居中

<div id="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

#container {
  width: 200px;
  height: 100px;
  background: #ccc;
  text-align: center;
}
span {
  display: inline-block;
  background: #9fc;
}

四、多个元素垂直居中

<div id="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

#container {
  height: 200px;
  display: table-cell;
  vertical-align: middle;
}

单行多列布局

一、等宽排列

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div> 
</div>

#container {
  display: table;
  table-layout: fixed;
}
.box {
  display: table-cell;
}

二、两列布局

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

1. 一列定宽，一列自适应，高度各自自适应

左列定宽：

.left {
  float: left;
  width: 100px;
}
.right {
  margin-left: 100px;
}

右列定宽：

#container {
  padding-right: 100px;
  overflow: hidden;
}
.left {
  float: left;
  width: 100%;
}
.right {
  position: relative;
  float: left;
  width: 100px;
  right: -100px;
  margin-left: -100px;
}

2. 一列定宽，一列自适应，高度相同取两者最大值

#container {
  display: table;
  table-layout: fixed;
}
.left,
.right {
  display: table-cell;
}
.right {
  width: 100px;
}

需要定宽的那列设置宽度

3、一列不定宽，一列自适应

右列自适应：

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.left {
  float: left;
}
.right {
  overflow: auto;
}

左列自适应：

<div id="container">
  <div class="right"></div>
  <div class="left"></div>
</div>

.left {
  overflow: auto;
}
.right {
  float: right;
}

三、三列布局

1、两侧定宽，中间自适应，高度各种自适应

方法一：

<div id="container">
  <div class="left">定宽</div>
  <div class="center">自适应</div>
  <div class="right">定宽</div>
</div>

.left,
.right {
  position: absolute;
  top: 0;
}
.left {
  left: 0;
  width: 150px;
}
.center {
  margin: 0 80px 0 150px;
}
.right {
  right: 0;
  width: 80px;
}

方法二：圣杯布局

<div id="container">
  <div class="left">定宽</div>
  <div class="center">自适应</div>
  <div class="right">定宽</div>
</div>

#container {
  padding: 0 8px 0 150;
}
.left,
.center,
.right {
  position: relative;
  float: left;
}
.left {
  width: 150px;
  left: -150px;
  margin-right: -100%;
}
.center {
  width: 100%;
  height: 200px;
}
.right {
  width: 80px;
  right: -80px;
  margin-left: -80px;
}

方法三：双飞翼布局

<div id="container">
  <div class="wrap">
    <div class="center">自适应</div>
  </div>
  <div class="left">定宽</div>
  <div class="right">定宽</div>
</div>

.left,
.wrap,
.right {
  float: left;
}
.left {
  width: 150px;
  margin-left: -100%;
}
.wrap {
  width: 100%;
}
.center {
  margin: 0 80px 0 150px;
}
.right {
  width: 80px;
  margin-left: -80px;
}

2、两列定宽，中间自适应，高度相同取两者最大值

<div id="container">
  <div class="left">定宽</div>
  <div class="center">自适应</div>
  <div class="right">定宽</div>
</div>

#container {
  width: 100%;
  display: table;
}
.left,
.right,
.center {
  display: table-cell;
}
.left {
  width: 150px;
}
.right {
  width: 80px;
}

多行多列布局

一、图文并茂

<div class="article">
  <img src="../img/icon.png">随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
</div>

img {
  float: left;
}

二、均衡分布

1、相同间距

<ul class="list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

方法一：用浮动

.list {
  width: 500px;
  height: 260px;
}
.list li {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 20px;
  margin-top: 20px;
  background: #c9f;
}

通过 margin 来达到等距效果，根据父容器宽高和子类宽高与个数，算出 margin-left 和 margin-top 的值

方法二：用内联块

.list {
  width: 500px;
  height: 260px;
  font-size: 0;
}
.list li {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-left: 20px;
  margin-top: 20px;
  background: #c9f;
}

用内联块的话，如果子类有文本，要记得设置 font-size

2. 去除边界间距

在上一个例子下去除边界间距

.list {
  width: 460px;
  height: 220px;
}
.list li {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 20px;
  margin-top: 20px;
  background: #c9f;
}
.list li:nth-of-type(4n+1) { margin-left: 0 }
.list li:nth-of-type(-n+4) { margin-top: 0 }

若要兼容IE8，则在对应的标签上加类名，单独处理

三、瀑布流布局

如上图，所谓的瀑布流布局就是一系列盒子或图片的等宽不等高布局。

真正的瀑布流布局是这样：

给每张图片设置相同的宽度，第一行全部置顶，顺序排列

从第二行开始寻找最低高度的那一列作为下一张图片的排列位置，这时很显然第二列高度最低，就把第四张图片放在第二列下面

这时第一列和第三列高度相同，我们优先选择左边那列，把第五张图片放在第一列下面

这时第三列高度最低，第六张图片放在第三列下面，以此类推。

网上有人说用多列浮动布局、用CSS3布局、用flexbox，其实实现的都是假的瀑布流，都有可能出现三列的高度差异较大的情况，真正的瀑布流是三列高度相差不大的。以下的瀑布流的具体实现

html

<div class="list">
  <img src="../img/1.jpg" class="img1">
  <img src="../img/2.jpg" class="img2">
  <img src="../img/3.jpg" class="img3">
  <img src="../img/4.jpg" class="img4">
  <img src="../img/5.jpg" class="img5">
  <img src="../img/6.jpg" class="img6">
  <img src="../img/7.jpg" class="img7">
  <img src="../img/8.jpg" class="img8">
  <img src="../img/9.jpg" class="img9">
</div>

css

.list {
  position: relative;
  width: 600px;
}
.list img {
  position: absolute;
}

document.addEventListener('DOMContentLoaded', function () {
  var listDOM = document.querySelector('.list');
  var imgsDOM = listDOM.querySelectorAll('img');
  
  waterfallFlowLayout(listDOM, imgsDOM, 3);
})

/**
 * 瀑布流布局
 * 
 * @param {DOM object} listDOM  存放图片列表的容器DOM
 * @param {DOM object} imgsDOM  图片DOM
 * @param {number} colsCount    列数
 */
function waterfallFlowLayout (listDOM, imgsDOM, colsCount) {
  colsCount = colsCount || 3;   // 默认3列

  var currHeightArr = []; // 存放当前每列的总高度
  var imgWidth = listDOM.offsetWidth / colsCount

  // 遍历所有图片DOM元素
  for (var i = 0; i < imgsDOM.length; i++) {
    var imgDOM = imgsDOM[i];
    imgDOM.style.width = imgWidth + 'px';  // 设置各个图片的宽度

    // 如果是第一行的就直接存高度，并设置top和left
    if (i < colsCount) {
      currHeightArr.push(imgDOM.offsetHeight);
      imgDOM.style.left = (i % colsCount) * imgWidth + 'px';
      imgDOM.style.top = 0;
    }
    // 否则
    else {
      var minNum = Math.min.apply(Math, currHeightArr);     // 获取最小值
      var index = currHeightArr.indexOf(minNum);            // 获取最小值的下标

      // 根据最小值下标得到对应的DOM，获取它的left赋给当前的left
      imgDOM.style.left = imgsDOM[index].offsetLeft + 'px'; 
      imgDOM.style.top = minNum + 'px'; // 使用最小值作为当前的top

      // 更新每列的总高度
      currHeightArr[index] += imgDOM.offsetHeight;
    }
  }
}

全屏布局

<div class="head">头部</div>
<div class="sidebar">侧边导航</div>
<div class="main">主体内容</div>
<div class="foot">底部</div>

.head,
.foot,
.sidebar,
.main {
  position: absolute;
}
.head {
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
}
.foot {
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
}
.sidebar {
  top: 80px;
  bottom: 60px;
  left: 0;
  width: 100px;
}
.main {
  top: 80px;
  bottom: 60px;
  left: 100px;
  right: 0;
}

PC端CSS布局汇总

前言

居中布局

一、单个元素水平居中

1. 宽度固定

2. 宽度不固定

二、单个元素垂直居中

高度固定

高度不固定

三、多个元素水平居中

四、多个元素垂直居中

单行多列布局

一、等宽排列

二、两列布局

1. 一列定宽，一列自适应，高度各自自适应

2. 一列定宽，一列自适应，高度相同取两者最大值

3、一列不定宽，一列自适应

三、三列布局

1、两侧定宽，中间自适应，高度各种自适应

2、两列定宽，中间自适应，高度相同取两者最大值

多行多列布局

一、图文并茂

二、均衡分布

1、相同间距

2. 去除边界间距

三、瀑布流布局

全屏布局

Jencia

引用和评论

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 如何模拟“真实的”进度条？

纯CSS实现有趣emoji切换开关

那些年我用过的SAP IDE

SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版