等高佈局
利用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>
漸進增強與優雅降級
- 漸進增強
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後在針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優雅降級
一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。