笔记2

Posted 2020-09-18

   

margin在垂直取值的时候是重叠的，如果上下盒模型分别都有margin，那么取较大值。这一点是值得大家注意的了，平时如果在上下两个容器都设置了margin时，注意垂直取值时并不是两个值相加，而是取较大值。

这是IE6的双边距BUG。当满足下面这三个条件时，就会出现这个BUG：

1、要为块状元素；

2、要左侧浮动；

3、要有左外边距（margin-left）。

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说，并不是只有块状元素左浮动，且具有左外边距时才有这个BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。

解决这个bug有两个方法： 

1.给float的元素添加一个display：inline 

2.给ie6写一个hack，其值是正常值的一半，即_margin-right:10px;这个方法不推荐，因为要加hack写法，而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。