最近在学习 CSS 布局,看到了这两个经典布局(其实是同一个只是实现方式不同),才发现自己原来对很多 CSS 属性理解的都不够,于是仔细看了这两个布局的实现方式自己动手做了一遍,希望能有更深的理解。
圣杯布局和双飞翼布局都是实现三栏布局的方法,页面整体分为三部分,header、container、footer,其中 container 部分左右定宽,中间自适应,是很常见的布局,效果如下图。
下面分别介绍两种布局的实现原理。
圣杯布局
html 代码如下:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Layout Demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
note: 先写 main 部分是因为要先渲染中间部分。
- 给每一部分加上背景颜色,左右边栏固定宽度100px,中间栏宽度自适应,此时页面长这样:
- 将 main、left、right 部分都设置左浮动,此时由于中间部分脱离了文档流,footer 就会挤上去,因此需要给 container 加上
overflow: hidden;
,保证中间部分的空间留出来。
- 此时 left 和 right 依旧在下一行,为了使 left 和 right 移上去,则需要缩小 main 部分的宽度,通过 container 的 padding 来设置。设置 container 的左右 padding 为 100px,给 left 加上
margin-left: -100%
使其上移一行。
-
使用相对定位使left 靠左
position: relative; left: -100px;
-
同理,将 right 部分上移
margin-left: -100px; position: relative; right: -100px;
双飞翼布局
双飞翼布局和圣杯布局在实现思路上大致相同,区别是双飞翼布局在 main 部分外面多了一层 div,利用父层 div 的 margin 值取代了圣杯布局中 container 的 padding,
- 先回到基础布局的样子
-
给 main 部分加一个内层 div,三部分(main、left、right)都设置
float: left;
, main 部分width: 100%;
, left 和 right 定宽html 结构如下:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Layout Demo</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="header">header</div> <div class="container"> <div class="main"> <div class="inner-main">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body> </html>
- 为了使 left 和 right 上移需要缩小 main 的宽度,和圣杯布局不同的是,这里通过设置 inner-main 的 margin 来留出位置,同样使用负 margin 来使得 left 和 right 上移(这里不需要使用相对定位)
总结
通过上面两种实现方式可以看出,圣杯布局和双飞翼布局在思路上的区别是:
圣杯布局通过设置主元素的 padding 来为左右栏留出位置,而双飞翼布局是在中间栏增加子元素,通过内层子元素的 margin 来为左右栏留出位置(注意: 双飞翼布局中 width 和 float 属性都是设置在外层 div 上的)
圣杯布局中为了使得左右栏分布在最左和最右需要同时使用负 margin 和相对定位实现,而双飞翼布局中不需要使用相对定位