切图--学习笔记（一）

正式的规律的学习生活已经开始了一周了，这一周的学习内容是html和css写静态页面，也就是所谓的切图。切图是每个前端的基本活，对于小白来讲，看着通过自己的代码变成网页时，心中是满满成就感。切了一周的图，收获不小，之前写的感觉和原图差不多就行了，但随着技术的加深（呸呸呸 其实就是多写了些页面有了一些总结），强迫症对一像素的执着，因此对我在写页面时出现的问题做了一些总结，希望可以帮助到一些同样困惑的小伙伴（大神请自动跳过）。话不多说，直接上货。

---

1.关于伪类选择器

<ul>
    <li><a href="#">lorem ipsum dolor sit amet</a></li>
    <li><a href="#">consetetur sadipscing eiitr sed diam</a></li>
    <li><a href="#">nonumy eirmod tempor invidunt ut</a></li>
</ul>

比如我要给第二个li写样式，则可以ul li:nth-child(2){}表示ul里的第二个li ，
但是我要给第二个a写，用 ul li a:nth-child(2){},这种就是错误的，因为一个li只有一个a，不存在第几个child。所以就需这样写ul li:nth-child(2) a.
所以这里需要明确的就是：之前的元素，它是否有相邻兄弟元素，以及它是父级中的第几个子级。
2.关于overflow:hidden
现在我的top大盒子里有ul li，即使我给定了top的高， li的高若是超过了大盒高， 它不会让top的高变大，但是它会使top的相邻兄弟元素有了一个上边距，因此给top一个overflow.
还有常见的一种情况就是浮动元素造成父级的高没有了，塌陷。这种情况可以给父级元素一个overflow：hidden；父级的高就有了。相当于清浮动的效果。
3.关于清浮动
元素浮动带来的影响可谓是千变万化，根本无法预测造成什么样的影响，但是你要发现有些元素不按照你预定的样式呈现，而它前面有浮动的元素，就要考虑是浮动带来的影响。
清浮动一般我用两种。一种是在样式里写一个总的.clear{clear:both},这样的话就可以在浮动元素的后面加一个

，这样便可以清掉刚才浮动元素带来的所有的影响。
还有一种比如我看到了前面浮动元素使我的banner有了影响，我就在banner里写一个.banner{clear:both;}，这样可以避免加一个空的div标签，但是这两种情况相比起来还是第一种好用，因为浮动元素可能不止影响了banner，说不定同时影响了别的地方，用法一就可以全部清除了。
4.关于布局
一开始大家都是从固定布局开始做起，熟练了之后就可以开始考虑别的因素，比如浏览器放大缩小带给它的影响，为后面做响应式布局、移动端时奠定一个好的基础。

a)看到网页时，我们可以发现整个文本是居中的，这样可以给带有文本的大盒一个固定的宽（也就是图中标尺间的宽度），让它margin：0 auto；至于左上角logo图片和banner里的图片可以给它们定个位。然后再分别给带背景的最大盒width:100%;并且铺上背景色。这样就可以避免在别的大屏的电脑中出现空白条。而且习惯了固定布局给宽给padding，在不同分辨率的电脑里是有很大的影响，所以现在先养成这种好的习惯。
b)尽量不要给盒子高度，通过边距、行高这些让大盒子撑起来。

---

今天就先总结到这里了，欢迎大家评论哈~