布局
1.等宽的单列布局
<body>
<div class="main">
<div class="header">我是页头部分</div>
<div class="content">我是中间内容部分</div>
<div class="footer">我是页脚部分</div>
</div>
</body>
<!-- 1.等宽的单列布局 -->
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 800px;
margin: 0 auto;
}
.header,
.content,
.footer {
width: 800px;
text-align: center;
}
.main .header {
width: 800px;
height: 64px;
background-color: lightskyblue;
line-height: 64px;
}
.main .content {
height: 500px;
background-color: orange;
line-height: 500px;
}
.main .footer {
height: 64px;
background-color: grey;
line-height: 64px;
}
</style>
2. 两边略窄的单列布局
<body>
<div class="header">
<div class="nav">我是导航栏</div>
</div>
<div class="content">
我是中间的内容部分
</div>
<div class="footer">
<div class="footerCon">
我是页脚的部分
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 64px;
background: #f5f5f5;
}
.header .nav {
width: 80%;
height: 100%;
background: lightskyblue;
margin: 0 auto;
text-align: center;
line-height: 64px;
}
.content {
width: 80%;
height: 590px;
background: blueviolet;
margin: 0 auto;
text-align: center;
line-height: 590px;
}
.footer {
width: 100%;
height: 64px;
background: #f5f5f5;
}
.footer .footerCon {
width: 80%;
height: 100%;
margin: 0 auto;
background: #ccc;
text-align: center;
line-height: 64px;
}
</style>
3. 三栏布局 flex
<body>
<div class="main">
<div class="left">我是左边</div>
<div class="middle">我是中间</div>
<div class="right">我是右边</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: flex;
}
.left {
width: 300px;
height: 500px;
background: salmon;
}
.middle {
flex: 1;
height: 500px;
background: skyblue;
}
.right {
width: 400px;
height: 500px;
background: lawngreen;
}
</style>
4. 三栏布局 position
<body>
<div class="main">
<div class="left">我是左边</div>
<div class="middle">我是中间
<div style="background: blueviolet; width: 200px;height: 200px;">
</div>
</div>
<div class="right">我是右边</div>
</div>
</body>
<!-- 原理:普通文档流中的块级元素在页面排列时,会忽视脱离文档流的元素 -->
<!-- position 缺点 会被挤没 -->
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 500px;
background-color: red;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 500px;
background: greenyellow;
}
.middle {
height: 500px;
background: yellow;
margin-left: 300px;
margin-right: 200px;
}
</style>
5. 三栏布局 table
<body>
<div class="main">
<div class="left">我是左边</div>
<div class="middle">我是中间</div>
<div class="right">我是右边</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
display: table;
}
.left {
display: table-cell;
width: 300px;
height: 500px;
background: salmon;
}
.middle {
height: 500px;
background: skyblue;
}
.right {
display: table-cell;
width: 400px;
height: 500px;
background: lawngreen;
}
</style>
6. 三栏布局 float+BFC
<body>
<div class="main">
<div class="left">我是左边</div>
<div class="right">我是右边</div>
<div class="middle">我是中间</div>
</div>
</body>
<!-- 页面放大 ctrl+滚轮 bug -->
<style>
* {
margin: 0;
padding: 0;
}
.left {
width: 400px;
height: 500px;
background: lightblue;
float: left;
}
.right {
width: 300px;
height: 500px;
background: #008c8c;
float: right;
}
.middle {
overflow: hidden;
height: 500px;
background: blueviolet;
}
</style>
7. 双栏布局 flex
<body>
<div class="main">
<div class="left">我是左边的固定宽度的部分</div>
<div class="right">我是右边自适应的部分</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: flex;
width: 80%;
margin: 0 auto;
}
.left {
width: 200px;
height: 200px;
background-color: greenyellow;
}
.right {
flex: 1;
height: 200px;
background: skyblue;
}
</style>
8. 双栏布局 calc
<body>
<div class="main">
<div class="left">我是左边的固定宽度的部分</div>
<div class="right">我是右边自适应的部分</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 80%;
margin: 0 auto;
}
.left {
float: left;
width: 200px;
height: 300px;
background: yellowgreen;
}
.right {
float: left;
width: calc(100% - 200px);
height: 300px;
background: skyblue;
}
</style>
9. 双栏布局 BFC
<body>
<div class="main">
<div class="left">我是左边的固定宽度的部分</div>
<div class="right">我是右边自适应的部分</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 80%;
margin: 0 auto;
}
.left {
float: left;
width: 400px;
height: 500px;
background: greenyellow;
}
.right {
height: 500px;
width: auto;
background: skyblue;
overflow: hidden;
}
</style>
10. 双栏布局 position
<body>
<div class="main">
<div class="left">我是左边的固定宽度的部分</div>
<div class="right">我是右边自适应的部分</div>
</div>
</body>
<!-- 通过position实现 -->
<!-- 原理:普通文档流中的块级元素在页面排列时,会忽视脱离文档流的元素 -->
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
width: 80%;
margin: 0 auto;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 300px;
background: greenyellow;
}
.right {
margin-left: 200px;
height: 300px;
background: skyblue;
}
</style>