1.如何实现一个盒子在页面中上下左右居中
方法一:(盒子宽高固定时)
.box{
width:400px;
height:200px;
background:#000;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}
偏移量也可使用transform属性的translate来实现。
方法二:
.box{
margin:auto;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
}
2.左侧固定,如何使右侧自适应
方法一:
.block_left{float:left;width:300px;height:400px;background:#f00;}
.block_right{margin-left:300px;height:400px;background:#000;}
方法二:
.block_left{float:left;width:300px;height:400px;background:#f00;}
.block_right{overflow:hidden;height:400px;background:#000;}
方法三:
.block_left{position:absolute;width:300px;height:400px;background:#f00;}
.block_right{margin-left:300px;height:400px;background:#000;}
方法四:
左右两部分同时固定定位,但是测试发现这样会出现横向滚动条,后续会继续补充。
3.左右宽度固定,中间自适应
方法一:
.left{float:left;width:200px;height:100px;background:#f00;}
.middle{margin-right:200px;margin-left:200px;height:100px;background:#ccc;}
.right{width:200px;float:right;height:100px;background:#00f;}
div布局为左右中
方法二:
.wrap{width:100%;margin:0 auto;display:flex;}
.left{flex:0 0 200px;background:#ccc;}
.middle{flex:1 1 auto;background:#333;}
.right{flex:0 0 200px;background:#ccc;}