等高布局
利用margin-bottom负值与padding-bottom配合实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>等高布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
border: 10px solid black;
overflow: hidden;
}
.box1 {
float: left;
width: 100px;
background-color: red;
margin-bottom: -20000px;
padding-bottom: 20000px;
}
.box2 {
float: right;
width: 100px;
background-color: blue;
margin-bottom: -20000px;
padding-bottom: 20000px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="box2">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</div>
</body>
</html>
双飞翼布局
三列布局，左右固定，中间自适应
- BFC方式
- 定位
- 浮动 ( 双飞翼布局、圣杯布局 )
margin负值 - flex弹性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: #ccc;
}
.container .center {
float: left;
width: 100%;
height: 200px;
}
.container .center p {
background-color: yellow;
margin: 0 150px 0 100px;
height: 100%;
}
.container .left {
float: left;
width: 100px;
height: 200px;
background-color: red;
margin-left: -100%;
}
.container .right {
float: left;
width: 150px;
height: 200px;
background-color: blue;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="center">
<p> 内容部分</p>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
ps: 通过浮动和margin负值实现
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.clear::after {
content: "";
display: block;
clear: both;
}
.header {
height: 100px;
background-color: #ccc;
}
.container {
background-color: yellow;
margin: 0 150px 0 100px;
}
.container .center {
float: left;
width: 100%;
height: 200px;
}
.container .left {
position: relative;
left: -100px;
float: left;
width: 100px;
height: 200px;
background-color: red;
margin-left: -100%;
}
.container .right {
position: relative;
right: -150px;
float: left;
width: 150px;
height: 200px;
background-color: blue;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container clear">
<div class="center">
内容部分
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
渐进增强与优雅降级
- 渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。