css常见问题解决
1、图片在IE6及以下有边框
解决：给img{border：0 none}
2、div插入图片有间隙
解决：（1）div{font-size：0}（2）img{display：block}
3、双倍浮动。在IE6及以下，浮动的元素，有设置margin，出现双倍外边距
解决：给浮动的元素设置display：inline
4、在IE6及以下版本，部分块级元素拥有默认高度
解决：设置font-size：0
5、表单元素行高不一样
解决：input{float：left}
6、按钮大小不一样
解决：在input外边套一层标签，添加按钮的样式，把按钮的默认样式清除
7、百分比的bug，在IE6及以下版本中，解析的时候四舍五入计算，
50%+50% > 100%,
解决：把右边的浮动元素，clear：right
8、margin塌陷（当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上）
解决： （1）给父元素添加overflow：hidden（推荐使用）
（2）给父元素设置border
(3)给父元素或子元素设置float
9、margin合并bug（当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值）
解决：给两个元素或其中一个加上display：inline-block
10、什么是BFC
BFC块级格式化上下文，什么情况下创建？浮动时：float：left/right，绝对定位或固定定位时 position:absolut/fixed，默认情况下，将具有这些属性的元素修改为display：inline-block什么时候不能创建？float:none，display :inline-block、table-cell、table-caption、
11、如何清楚浮动
解决：（1）给浮动的父元素添加overflow：hidden，触发BFC清楚浮动；缺点：当内容增多时，容易造成不自动换行，导致内容被隐藏，无法显示溢出的元素；
（2）额外添加标签，在最后一个浮动标签后新添一个标签，给其设置clear：both；缺点：maigin失效，导致两个div之间没有任何间隙；
（3）使用after伪元素清除浮动
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
(4)使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
