day010:CSS如何进行圣杯布局
圣杯布局如图:
而且要做到左右宽度固定，中间宽度自适应。
1.利用flex布局
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.header,.footer{
-
height:40px;
-
width:100%;
-
background:red;
-
}
-
.container{
-
display: flex;
-
}
-
.middle{
-
flex: 1;
-
background:yellow;
-
}
-
.left{
-
width:200px;
-
background:pink;
-
}
-
.right{
-
background: aqua;
-
width:300px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="header">这里是头部</div>
-
<div class="container">
-
<div class="left">左边</div>
-
<div class="middle">中间部分</div>
-
<div class="right">右边</div>
-
</div>
-
<div class="footer">这里是底部</div>
-
</body>
-
</html>
2.float布局(全部float:left)
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.header,
-
.footer {
-
height: 40px;
-
width: 100%;
-
background: red;
-
}
-
-
.footer {
-
clear: both;
-
}
-
-
.container {
-
padding-left: 200px;
-
padding-right: 250px;
-
}
-
-
.container div {
-
position: relative;
-
float: left;
-
}
-
-
.middle {
-
width: 100%;
-
background: yellow;
-
}
-
-
.left {
-
width: 200px;
-
background: pink;
-
margin-left: -100%;
-
left: -200px;
-
}
-
-
.right {
-
width: 250px;
-
background: aqua;
-
margin-left: -250px;
-
left: 250px;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div class="header">这里是头部</div>
-
<div class="container">
-
<div class="middle">中间部分</div>
-
<div class="left">左边</div>
-
<div class="right">右边</div>
-
</div>
-
<div class="footer">这里是底部</div>
-
</body>
-
-
</html>
这种float布局是最难理解的，主要是浮动后的负margin操作，这里重点强调一下。
设置负margin和left值之前是这样子:
左边的盒子设置margin-left: -100%是将盒子拉上去，效果:
-
.left{
-
/* ... */
-
margin-left: -100%;
-
}
然后向左移动200px来填充空下来的padding-left部分
-
.left{
-
/* ... */
-
margin-left: -100%;
-
left: -200px;
-
}
效果呈现:
右边的盒子设置margin-left: -250px后，盒子在该行所占空间为0，因此直接到上面的middle块中,效果:
-
.right{
-
/* ... */
-
margin-left: -250px;
-
}
然后向右移动250px, 填充父容器的padding-right部分:
-
.right{
-
/* ... */
-
margin-left: -250px;
-
left: 250px;
-
}
现在就达到最后的效果了:
3.float布局(左边float: left, 右边float: right)
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.header,
-
.footer {
-
height: 40px;
-
width: 100%;
-
background: red;
-
}
-
.container{
-
overflow: hidden;
-
}
-
-
.middle {
-
background: yellow;
-
}
-
-
.left {
-
float: left;
-
width: 200px;
-
background: pink;
-
}
-
-
.right {
-
float: right;
-
width: 250px;
-
background: aqua;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div class="header">这里是头部</div>
-
<div class="container">
-
<div class="left">左边</div>
-
<div class="right">右边</div>
-
<div class="middle">中间部分</div>
-
</div>
-
<div class="footer">这里是底部</div>
-
</body>
-
-
</html>
4. 绝对定位
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.header,
-
.footer {
-
height: 40px;
-
width: 100%;
-
background: red;
-
}
-
.container{
-
min-height: 1.2em;
-
position: relative;
-
}
-
-
.container>div {
-
position: absolute;
-
}
-
-
.middle {
-
left: 200px;
-
right: 250px;
-
background: yellow;
-
}
-
-
.left {
-
left: 0;
-
width: 200px;
-
background: pink;
-
}
-
-
.right {
-
right: 0;
-
width: 250px;
-
background: aqua;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div class="header">这里是头部</div>
-
<div class="container">
-
<div class="left">左边</div>
-
<div class="right">右边</div>
-
<div class="middle">中间部分</div>
-
</div>
-
<div class="footer">这里是底部</div>
-
</body>
-
-
</html>
5.grid布局
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
body{
-
display: grid;
-
}
-
#header{
-
background: red;
-
grid-row:1;
-
grid-column:1/5;
-
}
-
-
#left{
-
grid-row:2;
-
grid-column:1/2;
-
background: orange;
-
}
-
#right{
-
grid-row:2;
-
grid-column:4/5;
-
background: cadetblue;
-
}
-
#middle{
-
grid-row:2;
-
grid-column:2/4;
-
background: rebeccapurple
-
}
-
#footer{
-
background: gold;
-
grid-row:3;
-
grid-column:1/5;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div id="header">header</div>
-
<div id="left">left</div>
-
<div id="middle">middle</div>
-
<div id="right">right</div>
-
<div id="footer">footer</footer></div>
-
-
</body>
-
-
</html>
看看grid布局，其实也挺简单的吧，里面的参数应该不言而喻了。
另外说一点，到2019年为止，grid现在绝大多数浏览器已经可以兼容了，可以着手使用了。
当然，还有table布局，年代比较久远了，而且对SEO不友好，知道就可以，这里就不浪费篇幅了。
