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

前言

    为什么今天我会饶有兴趣的写一篇关于我们常用的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请移步：导航-光标移动下划线跟随