普通实现
<style>
.box{
display:flex
}
.left,.right{
width:200px
height:600px
background:red
}
.center{
width:100%
height:600px
background:greed
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
绝对定位
将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,即可以使中间元素自适应屏幕宽度
该布局的好处,三个div顺序可以任意改变,不足是:因为绝对定位,如果页面上还有其他内容,top的值要小心处理,最好能够对css样式进行一个初始化,如果不对样式进行初始化,则两边和中间的值会对不齐。另外,随着窗口 缩小,小于200px的时候,会发生压缩
<style>
html,body{
margin:0px;
width:100%;
}
h3{
height:100px;
margin:20px 0 0;
}
#left,#right{
width:200px;
height:200px;
background-color:red;
position:absolute;
top:120px;
}
#left{
left:0px;
}
#right{
right:0px;
}
#center{
margin:2px 210px;
background-color:#eee;
height:200px;
}
</style>
<body>
<h3>实现三列宽度自适应布局</h3>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
<div id="center">我是中间</div>
</body>
自身浮动法
对左右分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在文档流中,使用margin指定左右外边距对其进行一个定位
该布局的好处是受外界影响小,但是不足是:三个元素的顺序,center必须放在最后,这是和绝对定位不一样的地方,center占据文档流位置,所以一定放在最后,左右两个元素位置没有关系,当浏览器窗口很小的时候,右边元素会被挤到下一行
<style>
#left,#right{
width:200px;
height:200px;
background-color:#ffe6b8;
}
#left{
float:left;
}
#right{
float:right;
}
#center{
margin:0 210px;
height:200px;
background-color:red;
}
</style>
<h3>使用 自身浮动法定位</h3>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
<div id="center">我是中间</div>
双飞翼布局
- 该方法在网站布局中非常常见,也是面试考点,优点是三栏互相关联,有一定的抗性,需要注意的是,布局中间部分一定要放在前面,左右顺序不限制,对于left块的margin负值一定要等于wrap的宽度
-
<style> #wrap{ width:100%; height:100px; background-color:#fff; float:left; } #wrap #center{ margin:0 210px; height:100px; background-color:#ffe6b8; } #left,#right{ float:left; width:200px; height:100px; background-color:darkorange; } #left{ margin-left:-100%; background-color:lightpink; } #right{ margin-left:-200px; } </style> <h3>使用 自身浮动法定位</h3> <div id="wrap"> <div id="center">我是中间</div> </div> <div id="left">我是左边</div> <div id="right">我是右边</div>
圣杯布局
- 运用相对定位的方式,不需要将center单独包在一个div中,而是给三个元素共同包裹一个div
-
<div class="container"> <div class="center">#center</div> <div class="left">#left</div> <div class="right">#right</div> </div>
第一步
设置好三个元素的宽度,并且浮动,为左右两边留出空间
.container{ padding-left:200px; /*预留左边空间为left的宽度 */ padding-right:300px; /*预留右边空间为right的宽度 */ } .center{ float:left; width:100%; height:300px; background:red; } .left{ float:left; width:200px; height:300px; background:green; } .right{ float:left; width:300px; height:300px; background:blue; }
第二步
- 通过-margin position把左边移动到左侧预留位置
-
.right { float: left; margin-right: -300px; /* 移动到右侧,自身宽度*/ width: 300px; height: 300px; background: #f56c6c; }
接下来就是弹性盒子的布局
-
<style> #box{ width:100%; display: flex; height: 100px; margin: 10px; } #left_box,#right_box{ width: 200px; height: 100px; margin: 10px; background-color: lightpink } #center_box{ flex:1; height: 100px; margin: 10px; background-color: lightgreen } </style> <div id="box"> <div id="left_box"></div> <div id="center_box"></div> <div id="right_box"></div> </div>
都是自己总结 如果有不对的地方 请多多指教