这里虽然是教切图psd还原入门，不过建议先把css基础弄懂，因为其中涉及的知识点有：

①【块级元素、内联（行内）元素、行内块级元素】；

②【（原理）BFC（其中一点）：两margin（上与下）相遇取最大值】；

③【（原理）高度塌陷：overflow: hidden;去浮动，以及万能清除浮动样式（clearfloat）】；

④【display: inline-block布局，之间存在4px默认间距，使用font-size: 0px;来清除】；

⑤【元素默认样式清除，（也就是重置样式"reset.css"）例如body默认有边距，则 body{ padding:0; margin:0; 去除}】；

⑥【ol/ul-li无序列（如去除序号点：list-style: none;）】

⑦【行内块inline-block之间的对齐垂直居中（原理）：verticle-align:middle】

等等等等，还没接触过就看或跟着敲的话，是很难理解的。

还有，跟着敲时，最好检测自己的拼写。一般bug最多的地方就是单词拼错了，用浏览器查看，未出效果或者样式的，然后找到该段代码，检测是否拼写错误，或着标点符号，注意英文符和中文符的区分。

另，如果出现高度丢失（未达到期望值），或许不是自己的错误，先看看是否是高度塌陷的原因。虽然同样是高度塌陷（BFC），但是这个是缺点的同时，也是非常好的优点。

比如：（BFC块级格式化上下文）同级子元素A的margin-bottom: 100px; 和同级子元素B的margin-top: 100px;在同一列（放在上下方向）相遇，它们之间的距离，并不是100+100=200px；而是正数跟正数相遇，取最大值（相同值只取一个），所以实际的间隔还是只有100px；但是，如果加了overflow: hidden; （消除边距高度塌陷现象），那么它们之间的间距，就是200px了。

还有，老师说的：最好行内元素和块级元素不要同级出现（被同一个父级包裹）理论上是要遵守这个规则的，但在这里，老师说了为了避免浪费标签（造成多余无意义标签），所以也就一两处出现这样的情况，而且<a>是已经块级化（display: block; ）了的所以不影响。

不能让内联元素和块级元素处于同一级，要么都是内联元素，要么都是块级元素