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

665

前言

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

圣杯布局/双飞翼布局

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

二者对比

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

  1. 圣杯布局
  • 布局方式:三栏布局中的特殊布局;左右两栏固定,中间栏自适应;形似圣杯;
  • 本质:给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%,使其高度保持一致。
  • 应用场景:普通门户网站,一般做信息介绍的门户类
  1. 双飞翼布局
  • 布局方式:三栏布局中的特殊布局;左右两栏固定,中间栏自适应;形似展开双翼的鸟禽;
  • 本质:
  • 应用场景:普通门户网站,一般做信息介绍的门户类

圣杯布局


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;
}

Code Pen请移步: 圣杯布局

双飞翼布局

结语

CSS的世界简直可以用多姿多彩来形容,但是在我们日常的开发中,一些基本的布局方式总结起来也不算太多,一旦我们对这些常见的布局方式了解透彻之后,拿到设计原型图之后,脑海中就会有一个大概的雏形了,先把这个雏形在自己的心中过一遍,开发出来的页面也会更加贴合设计的要求,从而减少返工的可能性。

这也是为什么我要写这篇blog的一个初衷吧。