Rest, sort out the CSS beginner stuff.

CSS based on the things in the "Lei box" This is a dull thing, flexible use of the box's internal and external margins, floating, positioning and some of the underlying properties, a static page becomes a lei out, this is the basis of the CSS practice.

There are a few small points to note in the CSS Basics exercise:

1.margin collapse problem, this problem is two points, one is the upper and lower level of the box of the upper and lower margins of the collapse problem, this situation is good to avoid, insignificant; the second problem requires a good sense to notice whether the outer margin of the child box causes a collapse of the outside margin of the parent box. This problem is solved by the need not to use the border 1px plus transparent to make the border transparent.

2.padding problem, padding action in a "box", need to be careful whether because of the addition of padding and make the box itself is big, Because a box we generally say size includes the width and height of the box itself, the size of the border border, and the size of the padding. If the box is padding and not what we want, then we need to go to the width and height of the box to set the padding value, if the padding value is set on both sides, Then you need to subtract twice times the padding value. So, in the case of not and proficiency, unless it is really troublesome, it is best to ligatures, otherwise it is easy to miss out some values and statements, so that we forget to lose.

3. Floating problem, floating is divided into left and right floating, and floating is out of standard flow, will make the original line elements into the inner block elements, no longer occupy the original position, will affect the "box" behind, so we need to clear floating. Clear floating generally there are four ways: overflow:hidden|auto|scro; Insert a separate label closed floating, single pseudo-class closed floating, double pseudo-class closed floating;

The single pseudo class is clearly floating:

  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }    .clearfix {*zoom: 1;} (这个事为了适应ie6、7这些奇葩）
双伪类：

.clearfix:before,.clearfix:after{  content:"."; display:table;}
.clearfix:after{ clear:both;}
.clearfix{*zoom:1;}
浮动配合margin可以实现盒子的位置的调试，不过对于位置特别刁钻的，定位就好了
4.定位 定位时一种和随性的放盒子的方式，只需要知道移动多少距离，就可以完美的将一个盒子放在上面
定位一般用的有 相对定位：relative； 绝对定位：absolute； 固定定位：fixed; 系统默认的就不说了

定位要配合边偏移来使用，包括四个属性：top bottom left right；

一般来说，说道定位补得不说精灵图，或者说叫雪碧图，这个东西一般都用定位来，个别的用浮动。

Rest, sort out the CSS beginner stuff.