【干货】常用且顺手的CSS布局方式

2020年12月24日 16:13

前言

为什么今天我会饶有兴趣的写一篇关于我们常用的CSS布局的文章？我相信每一个前端工程师在开发的过程中都有过这样的迷茫期：js和HTML写起来流畅飞快，但是在遇到复杂的或者没有经历过的样式设置时，就会耗费较长的时间去处理甚至卡在一个小问题上而停滞不前。但作为一个前端工程师而非javascript工程师，HTML, CSS, Javascript三者缺一不可，下面就将为童鞋们带来关于那些常见的布局方式以及源码。
主要包括：全屏的上中下布局方式、居中布局方式、多列布局方式、跨行/跨列布局方式、单列等宽，其他列自适应布局方式等。
接下来，我们就开始吧。

1.header+main+footer的布局方式

布局的效果如下，其具有的特点是：有顶部、主体和底部三部分组成，三个部分占满了左右屏幕，header和footer高度固定，main高度自适应。可以打开QQ音乐的PC网页版本查看，就能发现明显的三个部分。

方式1

采用position+top/right/bottom/left来实现。 header, main, footer三个部分均使用left:0和right:0使其左右拉满；header和footer分别使用top:0和bottom:0将其拉到顶部和底部，将高度设为固定值；将main的top和bottom分别设为header高度和footer高度。通过绝对定位的方式将header, main, footer固定在特定位置，互不干扰。
HTML

<div class="wrapper">
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>
复制代码

CSS

.wrapper {
  position: relative;
  width: 300px;
  height: 300px; 
}
.header,
.main,
.footer {
  position: absolute;
   left: 0;
   right: 0;
}
.header {
    top: 0;
    height: 40px;
    background-color: #007FFF;
  }
.main {
    top: 40px;
    bottom: 40px;
    background-color: #f0f0f0;
  }
.footer {
    bottom: 0;
    height: 40px;
    background-color: #009900;
  }
复制代码

上述布局的代码已经放在了Pen上面，需要的童鞋请移步： Code Pen position+top/right/bottom/left实现

方式2

flex布局实现。我个人比较喜欢这种方式，因为flex实现实在是太方便了，且看起来简洁。当我们设置为display: flex后，同时需要设置flex-direction: column,使其纵向排列。因为需要header和footer都有吸顶和吸底的效果，所以需要设置main高度自适应,flex: 1则可以实现这样的效果。
其实，大多数我们能见到的布局方式，都可以用flex轻松实现，因此，我们也常常被称为flex程序猿。
HTML

<div class="wrapper">
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>
复制代码

CSS

.wrapper {
  display:flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
}
.header {
  height: 40px;
  background-color: #007FFF;
}
.main {
  flex: 1;
  background-color: #f0f0f0;  
}
.footer {
  height: 40px;
  background-color: #009900;
}
复制代码

Pen链接： Code Pen display:flex实现

多列布局

两列布局

两列布局方式之前在博客中也有专门提到过，请童鞋们移步到此处查看：【干货】解锁常用的双栏布局姿势

三列布局

首先来看三列布局的效果图（如下所示）, 这也是前端较为经典的布局效果，一般是有2列宽度固定，剩余1列宽度自适应且三列高度相等。

HTML

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>
复制代码

CSS

.wrapper {
  width: 300px;
  height: 300px;
}
.left {
  float: left;
  width: 60px;
  height: 100%;
  background-color: #007FFF;
}
.middle {
  float: left;
  width: 80px;
  height: 100%;
  background-color: #222222;
}
.right {
  overflow: hidden;
  height: 100%;
  background-color: #009900;
}
复制代码

想要自己亲自动手尝试的童鞋，请移步：Code Pen 三列布局

导航栏实现

实现类似于tabs的导航功能，且随着光标移动下滑先跟随着光标一起移动，同时满足光标从左向右移动，下划线也从左向右出现，反之光标从右向左移动，下划线也从右向左出现。且下划线的长度与内容的长度保持一致。

HTML

<ul>
   <li>Home</li>
   <li>About</li>
   <li>Introduction</li>
  <li>Certificate</li>
  <li>Enquiry</li>
</ul>
复制代码

CSS

ul {
  display: flex;
  position: absolute;
  width: 100%;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
}

li {
  list-style: none;
  position: relative;
  padding: 20px;
  font-size: 24px;
  color: #222;
  line-height: 1;
  transition: 0.2s all linear;
  cursor: pointer;
}

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #222;
    transition: 0.2s all linear;
}

li:hover::before {
  width: 100%;
  top: 0;
  left: 0;
  transition-delay: 0.1s;
  border-bottom-color: #222;
  z-index: -1;
}

li:hover ~ li::before {
  left: 0;
}

li:active {
  background: #222;
  color: #fff;
}
复制代码

Code Pen请移步：导航-光标移动下划线跟随

圣杯布局/双飞翼布局

圣杯布局和双飞翼布局都是由左中右三列组成，其实就是三栏布局中比较特殊的布局方式，特点为左右两列宽度固定、中间一列宽度自适应和三列高度固定且相等。

二者对比

那我们来看看这两种布局方式有什么区别吧。

圣杯布局

布局方式：三栏布局中的特殊布局;左右两栏固定，中间栏自适应;形似圣杯;
本质：给left,right设置float让其脱离文档流；
给left和right设置上各自的宽度（如：60px），middle宽度设置为100%；给left,right,分别设置left的margin-left设置负的left宽度, right的margin-left设置负的right宽度(如: .left {margin-left: -60px;} .right {margin-left: -60px;})最后将left,right,middle的高度都设置为100%,使其高度保持一致。
应用场景：普通门户网站，一般做信息介绍的门户类

双飞翼布局

布局方式：三栏布局中的特殊布局;左右两栏固定，中间栏自适应;形似展开双翼的鸟禽;
本质：
应用场景：普通门户网站，一般做信息介绍的门户类

圣杯布局

HTML

<div class="wrapper">
  <div class="left">
    <span>Left</span>
  </div>
  <div class="right">
    <span>Right</span>
  </div>
  <div class="middle">
    <span>Middle</span>
  </div>
</div>
复制代码

CSS

.wrapper {
  padding: 0 60px;
  width: 300px;
  height: 300px;
  }
.left {
  float: left;
  margin-left: -60px;
  width: 60px;
  height: 100%;
  background-color: #007fff;
}
.right {
  float: right;
  margin-left: -60px;
  width: 60px;
  height: 100%;
  background-color: #009900;
}
.middle {
  height: 100%;
  background-color: #4d4d4d;
}
span {
  font-size: 16px;
  color: #ffffff;
}
复制代码