两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.left {
width: 200px;
background-color: aquamarine;
}
.right {
background-color: aliceblue;
}
</style>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
/*基本思路*/
.left{
float: left;
}
.right{
margin-left: 200px;
}
/*BFC*/
.left{
float: left;
}
.right{
overflow: hidden;
}
/*flex*/
.outer{
display: flex;
}
.left{
}
.right{
flex: 1;
}
/*绝对定位*/
.outer{
position: relative;
}
.left{
}
.right{
position: absolute;
left: 200px;
}
/* Grid */
.outer{
display：grid;
grid-template-column: 200px 1fr
}
.left{
}
.right{
}
</style>
</body>
</html>
三栏布局
思路：
圣杯布局：
- 优化加载center内容 同时设置成width：100%
- .left .right 的 margin设置成负值 移动到上边
- 通过相对定位将 .left .right 移动合适的位置
双飞翼布局：
- 优化加载center内容 同时设置成width：100%
- .left .right 的 margin设置成负值 移动到上边
- 设置center的 margin-left -right的位置移动相应的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
min-height: 100px;
}
.left {
width: 100px;
background-color: aquamarine;
}
.center{
background-color: bisque;
}
.right {
width: 200px;
background-color: aliceblue;
}
</style>
<body>
<div class="outer">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="outer">
<!-- 圣杯布局 实现优先加载cenetr-->
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="outer">
<!-- 双飞翼布局 实现优先加载cenetr-->
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<style>
/* 基本思路 */
.left {
float: left;
}
.center{
margin-left: 200px;
margin-right: 200px;
}
.right {
float: right;
}
/*flex*/
.outer{
display: flex;
}
.left {
}
.center{
flex: 1;
}
.right {
}
/* 绝对定位 */
/* Grid */
.left {
}
.center{
display: grid;
grid-template-columns: 100px 1fr 100px;
}
.right {
}
/* 圣杯布局 */
.outer{
padding-left: 100px;
padding-right: 200px;
}
.left {
float: left;
margin-left: -100%; /*将元素移动到上边*/
position: relative;
left: -100px;
}
.center{
float: left;
width: 100%;
}
.right {
float: left;
margin-left: -200px;
position: relative;
left: 200px;
}
/* 双飞翼布局 */
.outer{
float: left;
width: 100%;
}
.left {
float: left;
margin-left: -100%;
}
.center{
margin-left: 100px;
margin-right: 200px;
}
.right {
float: left;
margin-left: -200px;
}
</style>
</body>
</html>
