1.圣杯布局
主要：浮动 + margin-left + 相对定位
- 写一个大容器container,里面包含了middle,left和right,middle放在前面
- container下面的三个容器浮动，且写上高度200px
- 给middle宽度写上100%，此时left和right被挤到第二行，给left,right设置宽度200px
- 给left的margin-left设置为-100%，此时left回到第一行左边,right回到第二行左边
- 给right的margin-right设置-200px，此时right回到第一行右边
- 因为此时，left和right会压住middle
- 给container设置padding: 0 200px,给left和right留下空间
- 给left和right设置相对定位后，left模块的left值设置为-200px，回到为其留下的空间，同理right块设置right值为-200px
- 此时因为container因为子元素浮动，其高度会为0，为其增加overflow:hidden,使其变为BFC，显示正常高度
- 此时如果页面缩得很小会出现显示混乱问题，给contariner加上min-width属性，或者用双飞燕布局解决
为什么在container加padding，而不是在middle？
因为middle的宽度设置为100%,设置了padding也是占满全屏宽度，给大容器设置，才能给left和right留下位置
<style>
.container {
overflow: hidden;
padding: 0 200px;
min-width: 400px;
}
.middle {
background-color: yellow;
width: 100%;
}
.left {
background-color: blue;
width: 200px;
margin-left: -100%;
left: -200px;
}
.right {
background-color: pink;
width: 200px;
margin-left: -200px;
right: -200px;
}
.container > div {
float: left;
height: 200px;
position: relative;
}
</style>
<body>
<div class="container">
<div class="middle">
1265416531635
</div>
<div class="left">
123
</div>
<div class="right">
456
</div>
</div>
</body>
2.双飞燕布局
主要：浮动(不用相对定位)
-
设置三个容器，middle,left,right三个模块，middle模块放于前面,中间再嵌套一个middle_in模块，主要的作用是middle宽度继承100%，而里面的模块用margin或者paading为left和right预留空间，解决了left和right占住中间元素位置的问题，并且也不用相对定位。
-
让middle、left、right左浮动，且left和right宽度设置为200px，middle宽度100%,此时left和right被撑到第二行。再为三者设置高度。
-
让middle_in继承高度100%，left模块margin-left设置为-100%，right的margin-left设置为-200px，此时它们已经位于第一行的左边和右边，且压住了middle模块
-
为middle_in设置padding或者margin解决被压住的问题
-
同理为container设置为BFC
<style> .container { overflow: hidden; } .container > div { float: left; height: 200px; } .middle { background-color: yellow; width: 100%; } .middle_in { background-color: red; height: 100%; margin: 0 200px; /* padding: 0 200px; */ } .left { background-color: blue; width: 200px; margin-left: -100%; } .right { background-color: pink; width: 200px; margin-left: -200px; } </style> <body> <div class="container"> <div class="middle"> <div class="middle_in"> 1265416531635 </div> </div> <div class="left"> 123 </div> <div class="right"> 456 </div> </div> </body>
3.flex布局实现
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
lex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex为一个非负数字n：该数字为flex-grow的值，
flex：n；= flex-grow：n；
flex-shrink：1；
flex-basis：0%；
设置一个大容器flexc，包含了center,left,right，给大容器设置高度，子元素会自动继承高度
给flexc设置display:flex，给left和right的高度固定200px
给center设置flex:1，其中flex-basis默认为0%,但是flex-grow的值为1，会自动撑开剩余空间
给三个模块设置order排序
<style>
.flexc {
display: flex;
height: 200px;
}
.centerc {
background-color: yellow;
flex: 1;
order: 1;
}
.leftc {
background-color: blue;
width: 200px;
order: 0;
}
.rightc {
background-color: pink;
width: 200px;
order: 2;
}
</style>
<body>
<!-- 弹性布局 -->
<div class="flexc">
<div class="centerc">
123
</div>
<div class="leftc">
456
</div>
<div class="rightc">
789
</div>
</div>
</body>