首先 不要觉得写前端用css很low,其实css很强大~选项卡轮播图动画这类大家觉得用js才能完成的东西其实用css也能实现。而且布局css真的很实用,
css布局中 最经典的应该就是两边固定中间自适应的三栏布局,然而在这种经典布局中,又有几个方法,圣杯和双飞翼,下面来介绍
首先说说圣杯方法
首先它的html是
<body>
<div class="box">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
首先先把三个子盒子设置宽高跟背景颜色(方便观察效果)
.box{
height:120px;
background:red;
}
.center{
width:100%;
height:100px;
background:green;
}
.left{
width: 180px;
eight: 100px;
background: yellow;
}
.right{
width: 180px;
height: 100px;
background: blue;
}
此时页面的效果是
而我们要的效果是绿色在中间自适应,黄色跟蓝色在两边。所以我们给这三个子盒子一个定位让它们脱离文档流,并设置定位的位置,左边的盒子跟右边盒子设置绝对定位,这样大盒子box必须设置一个相对定位,左边盒子的位置定位在left:0,top:0的位置,右边盒子定位在right:0,top:0的位置
此时的css页面是:
.box{
height: 120px;
position: relative;
background: red;
}
.center{
width: 100%;
background:green;
height: 100px;
}
.left{
width: 180px;
height: 100px;
background:yellow;
position: absolute;
left: 0px;
top: 0px;
}
.right{
width: 180px;
height: 100px;
background: blue;
position: absolute;
top: 0px;
right: 0px;
}
圣杯就完成了。
接下来说说双飞翼方法
同样先写它的html
<body>
<div class="center">
<div class="box">12345</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
可以看出,双飞翼html的格式跟圣杯有所不同,圣杯是一个大盒子包含三个小盒子,而双飞翼是三个盒子,中间需要自适应的盒子包含了一个小盒子。
同样,先跟三个同级的盒子设置宽高跟背景颜色以作区分
此时的css是这样的
.center{
width: 100%;
height: 400px;
background: salmon;
}
.left{
width: 200px;
height: 300px;
background: khaki;
}
.right{
width: 200px;
height: 300px;
background: khaki;
}
.box{
background: pink;
height: 200px;
}
此时页面的状态是
此时,左右两个盒子在中间盒子的下方,中间盒子中的小盒子宽度跟中间center的宽度一致,接下来我们要让左右两个盒子占到两边去 ,先浮动三个同等级盒子。
但是中间的盒子宽是100%,所以我们要用调试margin的方法把黄色跟蓝色的盒子放到两边
最左边的盒子左边距设置-100%,右边盒子左边距设置-(自身宽度),然后中间的盒子中的小盒子要设置左右边距(两边盒子的宽度)
.center{
float: left;
width: 100%;
height: 220px;
background: salmon;
}
.left{
float: left;
width: 200px;
height: 100px;
background: khaki;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 100px;
background: khaki;
margin-left: -200px;
}
.box{
/* float: none; */
background: pink;
height: 200px;
margin: 0 200px;
}
此时,双飞翼的效果就做好了
这样 双飞翼就完成了
下面说一下它们的区别
1.双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
2.圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局的问题。
3.双飞翼布局不用设置相对布局,以及对应的left和right值。