深入理解CSS

 做web开发也快两年了，今天总结一下对CSS的理解，主要对以下几点进行解析：

1.display属性

首先应说几个概念，块级元素：block element；行内元素：inline element。

1.1 块级元素：block element

每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素。最常见就是div了。

1.2 行内元素：inline element

也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 。高，行高及外边距和内边距不可改变。

而display的属性有：block，none，inline，block-inline,理解了前面的概念，就可以理解display的前三个属性，最后一个比较少用，要深入理解可以看这个博文：

2. float。

一般如果 float的属性为none的话，元素会按着标准流的形式排列，并且会向两侧自由伸展到容纳其元素的边界。如果设置了元素向左或向右浮动，元素会向左或者向右飘到其父元素的左或右边界，并且不会再自由伸展，一般会按着元素内容规定范围。
仅仅使用 float会使其余元素也会受影响。要想在改变元素的同时不影响其他元素，要使用clear 属性（了解可以点击点击打开链接）。

3. position

3.1.static 默认值。即没有任何变化。
3.2.relative 相对定位。除了指定器属性外还需要指定偏移量。通过top， bottom，right，left来指定。规律：使用相对定位的元素其会按偏移量进行偏移，但其仍在标准流中，对其父块和兄弟子块没有任何影响。理解偏差：top:30px;right:30px;其中top:30px指偏移前的元素在偏移后元素的下方30;上述说的都是针对标准流下的元素，其实对于非标准流下的元素也同样适用。相对定位不管怎么变都不会影响其他元素的变化。
3.3.absolute  绝对定位。规则：使用绝对定位的盒子以他“最近”的一个“已经定位”的“祖先元素”为“基准”进行“偏移”。如果一个盒子使用了绝对定位，那么其兄弟盒子会当其不存在时的样子来排列。一旦某个元素使用了绝对定位，那么这个元素在其他元素眼里已经不存在了。这个还可以了解一下z-index属性。
3.4.fixed  固定定位  因为目前还没被IE6所支持。
这个时候我们需要对IE6进行hack处理。解决的方案是使用postion:absolute属性，它的作用大家都很熟悉，相对于父元素进行绝对定位，然后我们可以通过expression来改变#ads的top值。

4. 盒模型

这个用一幅图来看一目了然。

5. 选择器

5.1.标签选择器，如p{ }
5.2 Id选择器 以#开头 该选择器不支持<p id=”p1 p2″>title 元素的内容会显示在浏览器的标题栏中。</p>这种用法
5.3 交集选择器。该选择器是两种选择器的配合使用，选中的是两种选择器的交集部分。其中第一个必须是标记选择器，第二个必须是ID选择器或者 class选择器。中间不能有空格，
5.4 并集选择器。可以是标签选择器，ID选择器， class选择器的任意组合。中间用逗号隔开。
5.5 全局选择器 ，全部使用这种样式。*{ }
5.6 后代选择器。标记见用空格。标记选择器，ID选择器， class选择器也可以参与嵌套。p1 tr#p2 td{ }这个选择器表示含有类p1的table标记下的含有IDp2tr标记下的标记td
直接后代选择器。因为后代选择器会影响其儿子，孙子等以下。所以要只选中其儿子需要直接后代选择器。P>span{ }。IE6不支持子选择器即直接后代选择器。

参考链接：

http://www.daydaytc.com/jscss/659.html