休息，归类一下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;} (这个事为了适应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；

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

转载于:https://www.cnblogs.com/qishuaishuai/p/6534397.html