前言
为什么今天我会饶有兴趣的写一篇关于我们常用的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;
}
复制代码
Code Pen请移步: 圣杯布局
双飞翼布局
结语
CSS的世界简直可以用多姿多彩来形容,但是在我们日常的开发中,一些基本的布局方式总结起来也不算太多,一旦我们对这些常见的布局方式了解透彻之后,拿到设计原型图之后,脑海中就会有一个大概的雏形了,先把这个雏形在自己的心中过一遍,开发出来的页面也会更加贴合设计的要求,从而减少返工的可能性。
这也是为什么我要写这篇blog的一个初衷吧。