如何实现圣杯布局和双飞翼布局
关于负值margin!!!核心点
- margin-top和margin-left负值,元素向上、向左移动
- margin-right负值,右侧元素左移,自身不受影响
- margin-bottom负值,下方元素上移,自身不受影响
圣杯布局和双飞翼布局的目的
- 三栏布局,中间一栏最先加载和渲染(内容最重要)
- 两侧内容固定,中间内容随着宽度自适应
- 一般用于PC网页
圣杯布局和双飞翼布局的技术总结
- 使用float布局
- 防止中间内容被两侧覆盖,圣杯布局用padding,双飞翼布局用margin(留白)
- 两侧使用margin负值,以便和中间内容横向重叠
圣杯布局例子:
- 左右定宽;
- 先做float布局(column左浮动,footer清除浮动);
- 再设container的左右padding,给left\right留位置;
- 再设置margin负值和中间内容横向重叠(margin-left:-100%;margin-right:-(自己的宽度));
- 然后设置position到对应的位置。
为什么left和right设置margin后能在一行?
- right设置margin-right,本来应该自身不动,但margin-right设置成负的自身宽度后,相当于不占原来宽度大小的空间了,而它右边的元素footer设置过清除浮动,所以不会和它重叠,因此right只能被footer挤到上一行去;而left设置margin-left:-100%,是元素自身向左移动。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局手写练习</title>
<style>
body {
min-width: 550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right {
background-color: red;
width: 150px;
margin-right: -150px;
}
#footer {
text-align: center;
background-color: #f1f1f1;
}
/* 手写 clearfix */
.clearfix::after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>
双飞翼布局例子:
- 左右定宽;
- 先做float布局(col设置左浮动);
- 再设container的左右margin,给left\right留位置;
- 再设置margin负值和中间内容横向重叠(margin-left:-100%;margin-left:-(自己的宽度));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局练习</title>
<style>
body {
min-width: 550px;
}
.col {
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px;
}
#left {
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%;
}
#right {
width: 190px;
height: 200px;
background-color: #FF0000;
margin-left: -190px;
}
</style>
</head>
<body>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>