css經典佈局
阿新 • • 發佈：2020-08-01
經典佈局方案
聖盃佈局
雙飛翼佈局
（左右固定，中間自適應）
聖盃佈局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>聖盃佈局</title> <style> * { margin: 0; padding: 0; } .wrapper { padding: 0 100px; overflow: hidden; } .middle, .left, .right { float: left; position: relative; } .middle { width: 100%; height: 200px; background: red; } .left { width: 100px; height: 100px; background: yellow; margin-left: -100%; left: -100px; } .right { width: 100px; height: 100px; background: blue; margin-left: -100px; right: -100px; } </style> </head> <body> <div class="wrapper"> <div class="middle"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
1.三欄佈局，中間內容區（middle）放在最前面，因為最先渲染，設定width：100%，給left和right設定寬、高、顏色
2.middle，left，right同時設定float：left，此時會出現以下情況
3.我們需要把left和right放到左右兩邊，利用負邊距，left設定margin-left：-100%，right設定margin-left：-100px
4.這時位置正確了，但是覆蓋了middle，需要給三者的父級加一個padding：0 100px，留出left和right的位置，然後設定left：-100px，right：-100px，最後還需要給三者加一個共同屬性position：relative定位
雙飛翼佈局：
1.與聖盃佈局最大的區別是解決內容覆蓋的方式不同。
2.去掉共同的父級wrapper，給middle加一個父級middle-wrap，屬性設定為margin：0 100px，同時取消三者共同屬性position：relative，也不用給left和right去調整位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>雙飛翼佈局</title> <style> * { margin: 0; padding: 0; } .middle, .left, .right { float: left; } .middle { width: 100%; height: 200px; background: red; } .middle-wrap { margin: 0 100px; } .left { width: 100px; height: 100px; background: yellow; margin-left: -100%; } .right { width: 100px; height: 100px; background: blue; margin-left: -100px; } </style> </head> <body> <div class="middle"> <div class="middle-wrap"> 奧克蘭的加拉時間到拉薩的驕傲了斯柯達就愛上了肯德基阿喀琉斯拉克絲建檔立卡是覺得卡收到卡時間很多卡就是電話卡接收到卡薩丁黃金卡速度哈空間收到貨 </div> </div> <div class="left"></div> <div class="right"></div> </body> </html>
flex佈局：
只需按照left，middle，right排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex佈局</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
}
.left {
flex-basis: 100px;
height: 100px;
background: blue;
}
.middle {
flex: 1;
height: 200px;
background: red;
}
.right {
flex-basis: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>