Css实战第二天小结

1. 清除浮动的四种方式：

1.1    给父盒子设置一个高度；

1.2    Clear:both;

1.3    Overflow:hidden;

1.4    使用伪元素

.clearfix:before, .clearfix:after{

content:” ”;

display:table;

}

Clearfix:after{

Clear:both;

}

Clearfix{         /*兼容ie6*/

Zoom:1;

}

2.对定位元素的层级理解：如果我们只给一个元素定位，而不设置它的trbl(上，右，下，左)的值，那么该元素仍然在原来的位置显示。

绝对定位（absolute）与相对定位（relative）都有一个层级的属性与概念。如果我们定位了，相邻的多个元素，而且它们在同一个位置的话，后面的元                 素会覆盖前面的元素。

同样定位的元素，默认它们的层级都是0，如果想要改变它们的层级关系的话，可以使用z-index（范围0-9999999）来实现。

3.border-radius的使用：

border-radius:左上值 右上值 右下值 左下值；

四个值为元素的宽度的时候或为高度一半的时候，元素将变成圆形或是椭圆形；

注：峰值只能达到元素的宽度或者高度的一半。

4.font连写

Font的连写必须要有字体大小（font-size）和字体样式（font-family），且两者的顺序不能够颠倒。

5.   padding和margin的使用：

5.1 在布局的时候，优先考虑使用padding，但是使用padding的时候，要考虑这个padding会不会影响其他地方的布局

5.2 其次考虑margin，但是使用margin的时候，要考虑到合并现象

合并现象：

两个合并现象

垂直合并：

两个垂直分布的盒子，设置了相对的margin值的时候，他们之间的距离总是取决于最大的margin值  --  垂直合并   无法解决，只能避免

包含合并：

发生嵌套的时候，如果给子盒子设置margin-top，有可能会把父盒子带跑

解决办法：

（1） 给父盒子加边框

（2）父盒子设置属性：overflow：hiddent