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