之前在自学的时候，只看过CSS的一些属性，布局完全不了解。本周做的需求，是我第一次写一个完整的CSS页面。
第一次嘛，难免有些费劲。但是做完之后，对CSS有了一点点基础的了解。CSS最重要的是下面几个概念。
1、CSS盒子
2、文档流、position、浮动
CSS的调试就是在浏览器的开发者工具中，下面这张图是谷歌浏览器中截取出来的CSS盒子，关于元素的尺寸、定位这张图片上全都有。我之前自学的时候，都不知道这张图怎么用，糗。
image.png
在调试的时候还有一个小技巧可以用——属性值可以通过上下键调，这样能很快调到自己想要的效果（包括知道哪些属性生效，哪些属性不生效），真的能节省不少时间。
关于第二个概念，首先要对HTML的块级元素，行级元素有一定的了解。
块级元素总是从上而下的排列。
image.png
就像上面这张图一样，块级元素总是独立地占有一行，他们从上而下地排列，就是传说中的普通文档流。要想让他们在同一行，其中的一个解决方法就是用浮动，让他们脱离普通文档流。浮动有4个取值，left 、right 、none 、inherit，前面两个是最常用的。
image.png
我给第二个div元素，加了一个左浮动，它就脱离了普通文档流，第三个div元素就会移动到第二个div原来的位置，所以我们可以看到粉红色的宽度变窄了，因为被黑色的框挡掉了一部分。
如果我把第三个div也设置成左浮动，结果会怎样呢？
image.png
第三个div元素会和第二个div元素同一行，那为什么第二个元素不和第三个元素在同一行呢？因为第一个元素还在普通文档流中，如果把第一个元素也设置成左浮动，那么这三个元素就会在同一行出现。
今天就先说到这里，继续去补充知识了……
网友评论