下面是对页面布局的简单总结，希望可以帮助到有需要的小伙伴。
一、两列布局
两列布局：
一列是定宽的, 另一列是自适应的。
其中一列是定宽：将该元素的宽度设置为固定的宽度
其中一列是自适应: 除了定宽之外所有的宽度都为第二列
第一种两列布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种两列布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
}
.left {
width: 200px;
height: 300px;
background-color:darkmagenta;
float: left;
}
.right {
height: 300px;
background-color:cornflowerblue;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
第一种两列布局参考版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种两列布局参考版
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
}
.left {
width: 200px;
height: 300px;
background-color: aquamarine;
float: left;
position: relative;
}
.right-fix {
width: 100%;
float: right;
margin-left: -200px;
}
.right {
height: 300px;
background-color: cadetblue;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right-fix">
<div class="right"></div>
</div>
</div>
</body>
</html>
第二种两列布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种两列布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
}
.left {
width: 200px;
height: 300px;
background-color: aquamarine;
float: left;
}
.right {
height: 300px;
background-color: blueviolet;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
第三种两列布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第三种两列布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
display: table;
table-layout: fixed;
}
.left,
.right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: brown;
}
.right {
height: 300px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
第三种两列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第三种两列布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
display: table;
table-layout: fixed;
}
.left,
.right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: brown;
}
.right {
height: 300px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
二、三列布局
定宽 – 定宽 – 自适应
三列布局的第一种情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局的第一种方法
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
display: table;
table-layout: fixed;
}
.left,
.center,
.right {
display: table-cell;
}
.left,
.center {
width: 200px;
height: 300px;
}
.left {
background-color: burlywood;
}
.center {
background-color: cadetblue;
}
.right {
height: 300px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
三列布局的第二种情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局的第二种情况
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
}
.left,
.center,
.right {
height: 300px;
}
.left,
.right {
margin-top: -300px;
}
.left {
background-color: darkcyan;
width: 200px;
float: left;
}
.center {
background-color: darkgoldenrod;
margin: 0 300px 0 200px;
}
.right {
background-color: darkgray;
width: 300px;
float: right;
}
</style>
</head>
<body>
<div class="parent">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
三、等分布局
等分布局是指子元素平均分配父元素宽度的布局方式
第一种实现等分布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种实现等分布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
}
.column {
width: 25%;
height: 300px;
float: left;
}
.column:nth-of-type(1) {
background-color: darkgray;
}
.column:nth-of-type(2) {
background-color: darkgreen;
}
.column:nth-of-type(3) {
background-color: darkkhaki;
}
.column:nth-of-type(4) {
background-color: darkslateblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</body>
</html>
第二种实现等分布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种实现等分布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
display: table;
table-layout: fixed;
}
.column {
display: table-cell;
height: 300px;
}
.column:nth-of-type(1) {
background-color: lightpink;
}
.column:nth-of-type(2) {
background-color: lightskyblue;
}
.column:nth-of-type(3) {
background-color: mediumaquamarine;
}
.column:nth-of-type(4) {
background-color: mediumslateblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</body>
</html>
四、空白间隙的等分布局
第一种空白间隙的等分布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种空白间隙的等分布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
display: table;
table-layout: fixed;
border-spacing: 5px;
}
.column {
display: table-cell;
height: 300px;
}
.column:nth-of-type(1) {
background-color: mediumslateblue;
}
.column:nth-of-type(2) {
background-color: navajowhite;
}
.column:nth-of-type(3) {
background-color: orchid;
}
.column:nth-of-type(4) {
background-color: palegreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</body>
</html>
第二种等分间隙的等分布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种等分间隙的等分布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.parent-fix {
overflow: hidden;
margin: 0 -5px 0 -5px;
}
.column {
width: 25%;
float: left;
box-sizing: border-box;
padding: 0 5px;
}
.child {
height: 300px;
}
.column:nth-of-type(1) .child {
background-color: palegreen;
}
.column:nth-of-type(2) .child {
background-color: paleturquoise;
}
.column:nth-of-type(3) .child {
background-color: palevioletred;
}
.column:nth-of-type(4) .child {
background-color: peachpuff;
}
</style>
</head>
<body>
<div class="parent">
<div class="parent-fix">
<div class="column">
<div class="child"></div>
</div>
<div class="column">
<div class="child"></div>
</div>
<div class="column">
<div class="child"></div>
</div>
<div class="column">
<div class="child"></div>
</div>
</div>
</div>
</body>
</html>
五、等高布局
第一种实现等高布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种实现等高布局
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
display: table;
table-layout: fixed;
}
.left,
.right {
display: table-cell;
}
.left {
width: 200px;
background-color: peachpuff;
}
.right {
background-color: peru;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
第二种实现等高布局(伪等高)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种实现等高布局(伪等高)
</title>
<style>
.parent {
width: 800px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.left,
.right {
padding-bottom: 9999px;
}
.left {
width: 200px;
float: left;
background-color: plum;
}
.right {
overflow: hidden;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">I don’t know what that dream is that you have.
I don’t care how disappointing it might be as you’re working toward
hat dream. But that dream that you’re holding in your mind – it’s possible.
Some of you already know that it’s hard. It’s not easy. It’s hard changing
your life. In the process of chasing your dreams, you are going to incur a lot
isappointment, a lot of failure,
a lot of pain.
</div>
<div class="right">
There will be moments when you are going to doubt yourself.
You’ll say, “Why? Why is this happening to me? I’m just trying to take care of
my children, and my mother. I’m not trying to steal or rob from anybody. How
did this have to happen to me?” For those of you who have experienced some
hardships – don’t give up on The rough times are gonna come, but they will not stay,
they will come to pass.
</div>
</div>
</body>
</html>
六、全屏布局
第一种全屏布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>第一种全屏布局
</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.header,
.center,
.footer {
width: 100%;
position: fixed;
}
.header {
height: 50px;
top: 0;
background-color: blueviolet;
}
.center {
height: 100%;
top: 50px;
bottom: 100px;
}
.center .left {
width: 200px;
height: 100%;
float: left;
background-color: burlywood;
}
.center .right {
height: 100%;
overflow: hidden;
background-color: cornflowerblue;
}
.page {
width: 100%;
height: 1000px;
}
.footer {
height: 100px;
bottom: 0;
background-color: lightsalmon;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="center">
<div class="left"></div>
<div class="right">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
第二种全屏布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种全屏布局
</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.left {
width: 200px;
height: 100%;
position: fixed;
left: 0;
z-index: 2;
background-color:lightsalmon;
}
.right {
height: 100%;
overflow: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
<div class="header"></div>
<div class="center"></div>
<div class="footer"></div>
</div>
</body>
</html>
