CSS布局部分知识总结

一 切图

通过一个周的切图练习，我发现只有亲自动手后才能通过问题不断加深技术，要熟练掌握HTML页面编写时候时PHOTOSHOP操作。

以下一些知识点在网络布局时也是很重要的。

1、ul标签在谷歌、火狐等浏览器中默认是有padding值的，而在IE中只有margin值。 　　2、同一个的class类选择符可以在一个文档中可以重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的优先级要比CLASS大。

3、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding 　　4、li标签前面的图标推荐使用background-image，而不是list-style-image。

5、在给标签加选择符的时候，一定要在CSS里给选择器加上注释。方便以后修改CSS、而不是盲目的对照着HTML找对应的选择器。 　　6、定义链接的四种状态要注意先后顺序: Link Visited Hover Active。但是a标签可以只有一个状态。 　　7、与页面内容无关的图片使用background属性。 　　8、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1> 　　9、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。 　　10、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

11、浏览器一般都有自己的默认样式，通过word-wrap：break-word；word-break：break-all；清除浏览器的样式。

二 清除浮动

1、 空标签清浮动

在HTML页面中加入空标签，用空标签来清浮动。

空标签〈div class=”clear”> </div>

.clear{

Clear:both;

Height:0;

Overflow:hidden;}

2、 伪类清除浮动

A：after{

Visibility：hidden；

Display：block；

Font-size：0；

Content:””;

Clear:both;

Height:0;

}

但是对于IE6不支持。

三 浅析a标签的4个伪类

CSS伪类可以用于向某些选择器添加特殊的效果，伪类必须知道某些选择器才能使用，而伪类中最经典的就是a标签的伪类。

关于伪类，大家最熟悉的还是a标签的4个伪类：

:link      有链接属性时。

:visited    链接地址已被访问过。

:active     被用户激活(在鼠标点击未释放时发生的事件)

:hover     鼠标悬停时的样式表属性

这四个伪类的排列次序

首先从技术层面上，a的这四个伪类，分别表示了a的四种状态，但a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上的时候，a标签就同时具备了 :link :visited :hover三种状态。

其次从用户体验的角度，在用户使用超链接的时候，为了最佳的用户体验，要做到下面几点：

第一：不管是否是被访问过的超链接，只要我鼠标移上的时候(:hover)都要有写变化，比如变色、加下划线等等，告诉用户选中的是可以点击的超链接。

第二:不管是否访问过，在a标签被激活时（:active），都应该有相同的样式变化。也就是说，同一个a标签，未访问过时在被用户激活和被访问时再被用户激活时要有相同的样式。这个也很好理解，用户点下同一个超链接时的效果不应该有差别。

第三:访问过的a标签可能要跟没有访问过的a相区分。

从CSS优先级角度，前面的文章讲过具体的css优先级，这里我要说的是对于同一优先级的相冲突样式，浏览器的选择问题。比如：

.test {color:red; color:green;}

或者：

.test {color:red;}

.test {color:green;}

上面两个例子中，大家都知道，对于这个.test指向的内容，浏览器会显示后一个属性设置。也就是color:green.说到这里，很多人可能已经有头绪了。结合上面的三点，不难分析我们为什么要这么排。第一：不管什么情况下鼠标悬停都应该有一个样式变化（:hover）,我们就把hover放在最后，防止具备其他状态时，被其他状态的设置覆盖掉。第二：当a被激活时(:active)，我们要求不管是否访问过，都应该有相同的样式，也就是这个状态的效果应该能够覆盖未被访问时(:link)与 已访问过(:visited)两种状态。应该放在 :link :hover的后面。第三：被访问过的a（:visited）可能会有不一样的样式属性，用来区别a是否被访问过。也就是说:visited 状态的属性可以覆盖掉:link状态的属性， 即 :visited 要放在 :link 的后面。

我是从书上看的 love and hate。看到这个问题，我们不妨来看下H 和A 的关系。hover 和 active 分别表示鼠标悬浮在 a标签上和鼠标点下没有弹起的时候。不难发现，这两种状态是不会并存的，也不会存在谁要覆盖谁的问题。所以，不管是LVHA还是LVAH ，他们的效果都是一样的。不过用LOVE AND HATE 的方式来记住这个排序是一种不错的方法，推荐新手使用。