两栏布局的方法、两个经典bug的解决方法、触发bfc效果的方法。
两栏布局:
两栏布局是指让两个div结构并列到一排,但是div结构是块级元素,一般情况下不能实现。所以思路就是让它们一个固定,一个自适应,因为通过绝对定位可以实现自适应。
具体方法如下:
html
<div class="demo1"></div>
<div class="demo2"></div>
css
*{
margin:0;
padding:0;
}
.demo1{
position:absolute;
right:0;
width:100px;
height:100px;
background-color:red;
}
.demo2{
height:100px;
background-color:blue;
margin-right:100px;
}
效果如图
margin塌陷、margin合并:
margin塌陷是指当具有父子级关系的两个盒子放在一起时如图
这时你想要让绿色方块挪到黑色盒子右下角,加上margin-top:50px;是办不到的,因为存在margin塌陷,但是你要加上margin-top:150px;就可以,就好似黑色盒子的屋顶塌了一样,解决办法是啥呢?
这时需要触发bfc效果,触发了bfc效果之后,margin塌陷就可以解决了。那么触发bfc效果的方法有哪些?在父级元素下加上以下属性:[
- position : absolute;
- display : inline-block;
- float:right/left;
- overflow : hidden;
在父级标签下加上以上属性,就可以实现以上功能了。
margin合并是指,当两个方块处于上下分层时,上面的方块margin-bottom:100px;,使下面的方块margin-top:100px;这时下面方块的margin-top的值失效了,因为它和上面的margin-bottom的值合并了,所以就要解决合并问题,让它们中间可以隔开200px,又要用到触发bfc效果了。
注意:
使用触发bfc效果的方法时需要注意:要根据特定要求进行使用,比如需要消除溢出部分时,就可以使用overflow:hidden;一举多得。