两栏布局
左侧固定宽高,右侧自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#left{
width: 300px;
height: 100%;
background-color: red;
float: left;
}
/*! 方法一
#right{
height: 100%;
margin-left: 300px;
background-color: indianred;
}
*/
/*方法二*/
#right{
height: 100%;
overflow: hidden;
background-color: indianred;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
页面效果
方法三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container:after, .container:before {
content: "";
display: table;
}
.container:after {
clear: both;
overflow: hidden;
}
.main-wrap {
float: left;/*很重要*/
width: 100%;/*很重要*/
}
.main-content {
margin-left: 240px;/*sidebar width + margin-right*/
background-color: #F2F2E6;
height: 350px;
}
.sidebar {
width: 220px; /*左边栏宽度,可自行修改*/
height: 350px;
background-color: #E7DBD5;
float: left; /*侧栏居左*/
margin-left: -100%;/*容器container的宽度*/
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="main-wrap">
<div class="main-content"><h2>Main Content</h2></div>
</div>
<div class="sidebar"><h2>Sidebar Content</h2></div>
</div>
</body>
</html>
页面效果
三栏布局
两边固定,中间自适应
1、流体布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流体布局</title>
<style type="text/css">
*{
text-align: center;
}
.left{
margin-right: 20px;
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right{
margin-left: 20px;
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main{
height: 200px;
background-color: rosybrown;
}
/** BFC三栏布局
.main{
height: 200px;
overflow: hidden;
background-color: rosybrown;
}
*/
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
</html>
页面效果
2、BFC三栏布局
BFC区域不会与浮动元素重叠,所有左右部分设置的margin值有效,缺点是主体内容无法最先加载,当页面内容较多时影响用户体验
代码与流体布局大体相似
页面效果
3、双飞翼布局
利用浮动元素的margin负值的应用,主体内容可以优先加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{
text-align: center;
}
.container{
float: left;
width: 100%;
}
.main{
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: rosybrown;
}
.left{
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right{
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
页面效果
4、圣杯布局
优先加载主体内容
基本思路是:让中间部分在结构中位于最前面,先让中间层100%宽度,占满同一高度的空间,此时 左右两层被挤至下层,然后给左右盒子设置负边距,将左右栏拉回与主体部分同一水平高度 。这时主体部分有一部分被遮挡住了,给包含三个盒子的父盒子设置margin或padding,给左右边栏留出位置 ,再接着将左右边栏设置相对定位,将它们移到对应的空白位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
text-align: center;
}
.container{
margin-left: 120px;
margin-right: 220px;
}
.main{
float: left;
width:100%;
height:200px;
background-color: rosybrown;
}
.left{
float:left;
width:100px;
height:200px;
margin-left:-100%;
position:relative;
left:-120px;
background-color: red;
}
.right{
float:right;
width:200px;
height:200px;
margin-left:-200px;
position:relative;
right:-220px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
页面效果
5、flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
*{
text-align: center;
}
.container{
display: flex;
}
.main{
flex-grow: 1;
height: 300px;
background-color:rosybrown;
}
.left{
order: -1;
flex:0 1 100px;
margin-right: 20px;
height: 300px;
background-color: red;
}
.right{
flex:0 1 200px;
margin-left: 20px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
页面效果
6、Table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style type="text/css">
/*设置margin无效*/
*{
text-align:center;
}
.container{
display: table;
width:100%;
}
.left,.main,.right{
display: table-cell;
}
.left{
width:100px;
height:200px;
background-color: red;
}
.right{
width:200px;
height:200px;
background-color: blue;
}
.main{
background-color: rosybrown;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
页面效果
7、绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
*{
text-align: center;
}
.container{
position: relative;
}
.main{
height:200px;
margin: 0 120px;
background-color: rosybrown;
}
.left{
position: absolute;
width:100px;
height:200px;
left:0;
top:0;
background-color: red;
}
.right{
position:absolute;
width:100px;
height:200px;
background-color: blue;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
页面效果