实现圣杯布局
1、浮动 float
.content>.left+.center+.right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
min-height: 40px;
}
.header{
100%;
background-color: skyblue;
text-align: center;
}
.footer{
100%;
background-color: #f2f2f2;
text-align: center;
}
.left{
float: left;
200px;
background-color: pink;
}
.right{
float: right;
200px;
background-color: orange;
}
.center{
background-color: forestgreen;
}
</style>
<body>
<div class="header">头部</div>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>float 布局</h2>
</div>
</div>
<div class="footer">页尾</div>
</body>
</html>
.content>.left+.conter+.right 方式的话需要修改一点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
min-height: 40px;
}
.header{
100%;
background-color: skyblue;
text-align: center;
}
.footer{
100%;
background-color: #f2f2f2;
text-align: center;
}
.left{
float: left;
200px;
background-color: pink;
}
.right{
float: right;
200px;
background-color: orange;
}
.center{
background-color: forestgreen;
/* 跟我下面理解的绝对定位原理一样 */
position: absolute;
left: 200px;
right: 200px;
}
</style>
<body>
<div class="header">头部</div>
<div class="content">
<div class="left"></div>
<div class="center">
<h2>float 布局</h2>
</div>
<div class="right"></div>
</div>
<div class="footer">页尾</div>
</body>
</html>
2、绝对定位 position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
min-height: 40px;
}
.content>div{
position: absolute;
}
.header{
100%;
background-color: skyblue;
text-align: center;
}
.footer{
100%;
background-color: #f2f2f2;
text-align: center;
}
.left{
200px;
background-color: pink;
left: 0;
}
.right{
200px;
background-color: orange;
right: 0;
}
.center{
background-color: forestgreen;
left: 200px;
right: 200px;
}
</style>
<body>
<div class="header">头部</div>
<div class="content">
<div class="left"></div>
<div class="center">
<h2>绝对定位布局</h2>
</div>
<div class="right"></div>
</div>
<div class="footer">页尾</div>
</body>
</html>
/*绝对定位理解，当元素设定绝对定位的时候，元素脱离了文档流，左右两个元素刚好靠在两边，.center元素left：200px——在外界（视图）看来就是你的右边多了200px空位置，这200px的位置刚好把挡住的.left元素显示出来，右边同理*/
3、flex
浮动布局很好理解，就一个，两边定宽，中间的设置flex:1,（占据剩余空间）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
height: 50px;
100%;
background-color: skyblue;
text-align: center;
}
.footer{
height: 50px;
100%;
background-color: #f2f2f2;
text-align: center;
}
/* 此处是实现区 */
.content{
100%;
display: flex;
}
.left{
200px;
height: 200px;
background-color: pink;
}
.right{
200px;
height: 200px;
background-color: orange;
}
.center{
flex: 1;
height: 200px;
background-color: forestgreen;
}
</style>
<body>
<div class="header">头部</div>
<div class="content">
<div class="left float"></div>
<div class="center float"></div>
<div class="right float"></div>
</div>
<div class="footer">页尾</div>
</body>
</html>
4、表格布局table-cell
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
min-height: 40px;
}
.header{
100%;
background-color: skyblue;
text-align: center;
}
.footer{
100%;
background-color: #f2f2f2;
text-align: center;
}
/* 此处是实现区 */
.content{
display: table;
100%;
}
.content>div{
display: table-cell;
}
.left{
200px;
background-color: pink;
}
.right{
200px;
background-color: orange;
}
.center{
background-color: forestgreen;
}
</style>
<body>
<div class="header">头部</div>
<div class="content">
<div class="left"></div>
<div class="center">
<h2>table 布局</h2>
</div>
<div class="right"></div>
</div>
<div class="footer">页尾</div>
</body>
</html>
5、网格布局grid
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
min-height: 40px;
}
.header{
100%;
background-color: skyblue;
text-align: center;
}
.footer{
100%;
background-color: #f2f2f2;
text-align: center;
}
/* 此处是实现区 */
.content{
100%;
display: grid;
grid-template-columns: 200px auto 200px;
}
.left{
200px;
background-color: pink;
}
.right{
200px;
background-color: orange;
}
.center{
background-color: forestgreen;
}
</style>
<body>
<div class="header">头部</div>
<div class="content">
<div class="left"></div>
<div class="center">
<h2>float 布局</h2>
</div>
<div class="right"></div>
</div>
<div class="footer">页尾</div>
</body>
</html>