web前端关于浮动的问题

标签：

浮动的问题如下一一列举如有考虑不周的欢迎欢迎大家补充：

1.浮动，兼容性问题3px的问题，双边距的问题  

在平时工作的过程中，解决3px的问题，一般都是初始化*{margin:0;padding:0px;}但是面试的时候可能面试官的考虑点不是再次，而是为了问你了不了解css hack的问题

在ie7下单独处理的兼容的时候用独有的"*+"  此处只兼容ie7;例如{margin-left:20px;_margin-left:17px;}

在ie6下单独处理的兼容的时候用独有的“_”;例如 .a{ margin-left:20px;_margin-left:17px;}

ie6、ie7都兼容的时候用“+” 例如 .a{ margin-left:20px;+margin-left:17px;}

2、在浮动的同时，有了同一方向上的margin值的时候会产生双边距的问题

例如 .a{ margin-left:20px;float:left;}此时在ie浏览器会产生双边距，解决的方法就是直接添加一个   display：inline    就可以解决 .a{ margin-left:20px;float:left;display：inline}此时就不会有问题了

3、再就是三列布局的情况（左右俩侧都有宽度为100px的一列div，中间的宽度为100%；随着浏览器宽度的变化，自动拉伸）

编写布局的方法有很多种   我写个简单的例子

.div1{ width:100px; height:100%; background:#000000;position: fixed; left:0px; top:0px; z-index:22}
.div2{ width:100%; height:100%;margin:0px 100px 0px 100px; background:red;position: fixed; left:0px; top:0px; right:0px; z-index:1}
.div3{ width:100px; height:100%; background:#000000;position: fixed; right:0px; top:0px; z-index:22}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

web前端关于浮动的问题

标签：

原文地址：http://www.cnblogs.com/zhaodemo/p/5485858.html