前端面试题CSS-经典布局

CSS经典布局有：圣杯布局，双飞翼布局（左右固定中间自适应）

圣杯布局

结构是一体的,中间部分在最前面

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

float 浮动布局

.container {
    height: 100%;
    padding: 0 200px;
}
.left,
.right,
.center {
   float: left;
}
.left,
.right {
    width: 200px;
}
.center {
    width: 100%;
}
.left {
    margin-left:-100%;
    position: relative;
    left: -200px;
}
.right {
    margin-left: -200px;
}

双飞翼布局

结构是身体跟两边是分开的

<div class="box">
   <div class="container">
   		<div class="center"></div>
   </div>
   <div class="left"></div>
   <div class="right"></div>
</div>

float 浮动布局

.box {
    height: 100%;
    overflow: hidden;
}
.left,
.right,
.center {
   float: left;
}
.container {
    width: 100%;
    padding: 0 200px;
}
.left,
.right {
    width: 200px;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

两种方法的核心就是

• container 设置padding：0 200px
• left，right和center都设置float：left
• 圣杯布局：left设置margin-left:-100%; position: relative;left: -200px; 双飞翼布局：left设置margin-left:-100%;
• right都设置为margin-left: -200px;

其他的左右固定中间自适应的布局

结构是一体的，先渲染左边再中间最好右边

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

flex布局

.container{
    display:flex;
    justify-content:space-between; // 两边对齐，中间间隔一样
    height: 100%;
}
.left,
.right{
    flex: 0 0 200px; // 0-不放大 0-不缩小 200px-在一行占200px空间
    height: 200px;
}
.center {
    flex: 1; // 不放大不缩小占满剩下的空间
    height: 200px;
}

定位

.container{
   position: relative;
   height:100%;
}
.left,
.right{
    position: absolute;
    top: 0;
    width: 200px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.center {
    margin: 0 200px;
}