一、单列布局
1. 等宽的单列布局
header,content 和 footer 等宽的单列布局
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* margin值
1个值:上 下 左 右均一样
2个值:先上下 后左右
3个值:上 左右 下
4个值:上 右 下 左 顺时针 中间用空格
.header {
margin: 0 auto;
// width当屏幕小于 960px 时,会出现滚动条;而max-width不会出现
width: 960px;
height: 100px;
background-color: red;
}
.content {
margin: 0 auto;
// width当屏幕小于 960px 时,会出现滚动条;而max-width不会出现
width: 960px;
height: 400px;
background-color: pink;
}
.footer {
margin: 0 auto;
// width当屏幕小于 960px 时,会出现滚动条;而max-width不会出现
width: 960px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
2. 不等宽的单列布局
header,content 和 footer 不等宽的单列布局
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header {
margin: 0 auto;
width: 200px;
height: 100px;
background-color: red;
}
.content {
margin: 0 auto;
width: 100px;
height: 400px;
background-color: pink;
}
.footer {
margin: 0 auto;
width: 200px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
二、两栏布局
一般指左边一栏宽度固定、右边一栏宽度随浏览器宽自适应
1. 利用浮动:父盒子一个高度+左边固定宽度左浮动+右边margi-left:左边宽度值
(1)一个父盒子里装两个小盒子;(2)左边盒子给一个固定宽度,再float:left 浮动,浮动脱标,不占据位置;(3)右边盒子给一个margin-left:左边盒子宽度值; 右边盒子宽度自适应;
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
height: 100px;
}
.left {
float: left;
height: 100px;
width: 200px;
background-color: pink;
}
.right {
height: 100px;
margin-left: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
2. 利用浮动:左边固定宽度左浮动+右边overflow:hidden宽度自适应
(1)两个小盒子;(2)(2)左边盒子给一个固定宽度,再float:left 浮动,浮动脱标,不占据位置;(3)右边盒子设置overflow: hidden; 因为设置overflow: hidden;的盒子会触发BFC,BFC的区域会看到左边浮动的盒子;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left {
width: 200px;
height: 100px;
background: red;
float: left;
}
.right {
/* 高度可以不一样 */
height: 200px;
background: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
3. 利用flex:父盒子flex+左边固定宽度+右边flex
flex布局:https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
(1)父盒子flex,里面的子元素会变成inline-block元素;(2)左边给个固定宽度;(3)右边 flex:1; === flex:1 1 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background-color: red;
}
.right {
flex: 1;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
4. 利用定位:父盒子relative相对定位+左盒子absolute绝对定位并固定宽度+右盒子margin-left:左盒子宽度值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: red;
}
.right {
margin-left: 200px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
5. 利用定位:父盒子relative相对定位+左盒子固定宽度+右盒子绝对定位:left值为左盒子宽度,其余值为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
position: relative;
height: 100px;
}
.left {
width: 200px;
height: 100px;
background: red;
}
.right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
6. 利用浮动: 左右都浮动,左固定宽度+右width:calc()宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
position: absolute;
width: 100%;
height: 100px;
}
.left {
float: left;
width: 200px;
height: 100px;
background-color: blue;
}
.right {
float: left;
width: calc(100% - 200px);
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
calc()函数详解:http://caibaojian.com/css3-calc.html
三、三栏布局
一般指左右两栏宽度固定、中间宽度随浏览器宽自适应
1. 利用浮动:左盒子固定宽度且左浮动+右盒子固定宽度且右浮动+中间盒子margin-left:左盒子宽度值;margin-right:右盒子宽度值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
height: 100px;
}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="right"></div>
// 中间盒子必须放最后
<div class="center"></div>
</div>
</body>
</html>
2. 利用flex:父盒子flex+左边固定宽度+右边固定宽度+中间flex:1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
3. 利用定位: 父盒子relative相对定位+左盒子绝对定位+右盒子绝对定位+中间盒子margin-left:左盒子宽度值;margin-right:右盒子宽度值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
4. 圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
padding-left: 220px;
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}
</style>
</head>
<body>
<article class="container">
<div class="center">
<h2>圣杯布局</h2>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</body>
</html>