归类一下CSS初级的东西

 

   css基础的东西集中体如今了“磊盒子”这一个枯燥无味的东西上面，灵活的运用盒子的内外边距，浮动，定位以及一些基础的属性，将一个静态的页面变得磊出来，这是CSS基础的练习。

在css基础练习里面有几点须要注意的小点：

1.margin的塌陷问题，这个问题分文两点，一种是上下同级的盒子的上外边距和下外边距的塌陷问题，这个状况劲量避免就好，不值一提；第二个问题就须要有良好的意识去注意子盒子的外边距是否会引发父盒子的外边距的塌陷，须要不须要运用边框1px 外加transparent使边框透明化的方法，使得这个问题获得解决。

2.padding的问题，padding做用于一个“盒子”的时候，须要注意会不会由于加了padding而使得盒子自己被撑大了，由于一个盒子咱们通常说大小包括盒子自己的width和height还有边框border的大小以及padding的大小。若是在设置padding以后，盒子被撑大了，而且不是咱们所想要的效果，那么咱们就须要在盒子的width和height上面前去所设置的padding值，若是padding值设置的是两边都有，那么就须要减去两倍的padding值。因此说，在不是和熟练的状况下，除非真的很麻烦，最好仍是连写，否则容易漏掉一些值以及语句，使得咱们忘记去减掉。

3.浮动的问题，浮动分为左浮动和右浮动，而且浮动是脱离标准流的，会使本来的行内元素变成行内块元素，再也不占据原来的位置，会对后面的“盒子”形成影响，因此咱们须要去清楚浮动。清楚浮动通常有四种方法： overflow： hidden|auto|scro； 插一个单独的标签闭合浮动； 单伪类闭合浮动； 双伪类闭合浮动；

单伪类清楚浮动：

  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

 

 .clearfix {*zoom: 1;} (这个事为了适应ie六、7这些奇葩）
双伪类：

.clearfix:before,.clearfix:after{  content:"."; display:table;}

.clearfix:after{ clear:both;}
.clearfix{*zoom:1;}
浮动配合margin能够实现盒子的位置的调试，不过对于位置特别刁钻的，定位就行了
4.定位 定位时一种和随性的放盒子的方式，只须要知道移动多少距离，就能够完美的将一个盒子放在上面
定位通常用的有 相对定位：relative； 绝对定位：absolute； 固定定位：fixed; 系统默认的就不说了
相对定位没有脱离标准流 绝对定位脱离了标准流 
定位要配合边偏移来使用，包括四个属性：top bottom left right；

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

想要学习前端开发的同窗，能够加群：434623999 学习哦！