最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
什么是BFC和hasLayout?
时间:2022-06-25 09:32:54 编辑:袖梨 来源:一聚教程网
关于BFC的介绍,可直接查看站内文章 :
http://www.111com.net/cssdiv/css/60534.htm
而hasLayout是ie私有的概念,ie7及更低版本的ie浏览器不支持BFC,但我们可以针对ie7、6浏览器加入对应的hasLayout规则来实现BFC的效果!具体怎么触发haslayout不是本文重点,请自行查阅相关资料
2、BFC和hasLayout布局的优势在哪里
相比于圣杯布局(查看示例),BFC和hasLayout布局显示灵活,控制也更方便,与媒体查询media querry结合使用,能很好地实现多设备兼容的需求!
3、使用BFC和hasLayout应该注意的问题
1、overflow:hidden触发BFC的同时,也能触发ie7的hasLayout,但overflow:hidden是ie7新添加的触发hasLayout的新属性,ie6并不支持,因此要兼容ie6必须加_zoom:1;
2、浮动和不浮动元素间,ie6会有3px的间隙,这是ie6的bug,解决方法是:若浮动元素是左浮动,则给左浮动元素加margin-right:-3px;若浮动元素是右浮动,则给右浮动元素加margin-left:-3px;
3、不浮动元素的左间距margin-left值若小于左浮动的元素宽度则不会生效,同理,不浮动元素的右间距margin-right值若小于右浮动的元素宽度也不会生效!这个跟没触发bfc或ie的haslayout时,不浮动元素的左右间距取值生效情况是保持一致的;
4、在实际运用中,浮动元素跟不浮动元素间都会加入左右间距控制,考虑到浮动元素可能会加入当前流行的多设备兼容的media query ,浮动元素的宽度会随着媒体查询的设置的css变化而变化,而不浮动元素的margin-left/right值能否生效又是跟浮动元素的宽度关联的,这时在不浮动元素上加入margin-left/right值来控制元素的间距,显示麻烦,不好掌控,推荐给浮动和不浮动元素间加间距的做法是:直接给浮动元素加margin值,而不是给不浮动元素加margin值,唯一要注意的是给浮动元素加margin值时,应该考虑到ie6浮动和不浮动元素间的3px bug,即ie下浮动元素margin-left/right正确值应该比其它浏览器的对应值小3px才能保持与其它浏览器显示效果一致,请看下面具体实例:
代码如下 | 复制代码 |
|
相关文章
- 《燕云十六声》红尘无眼完成图文攻略 12-25
- 《燕云十六声》阴阳如影完成图文攻略 12-25
- 《燕云十六声》悬檐之下四架椽屋图文攻略 12-25
- 《燕云十六声》2024最新公测时间介绍 12-25
- 《燕云十六声》有没有藏宝阁 12-25
- 《燕云十六声》制作公司介绍 12-25