css中经常犯的错误

1.垂直居中：

vertical-align是指当前元素在父元素中的垂直居中方式，text-align是指当前元素内的元素的居中方式。

vertical-align的使用

1.用于内联元素

下面以图像的垂直对齐为例子说明一下vertical-align属性的用法。

img{ vertical-align:middle;}

<div><imgsrc="http://pic2.58.com/ui7/job/hire/pic4.png"/>看看我的位置</div>

2.用于表格

vertical-align属性可以直接用于表格单元格，效果相当于HTML中的valign属性。

td{ height:40px; vertical-align:middle;}

<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</td></tr></table>

3.用于块元素

vertical-align属性是不适用于块元素的，这就是为什么有些人使用vertical-align属性无效的原因。但是我们可以使用display属性，设置其值为table-cell，将块元素转化为单元格，然后再使用vertical-align属性。或者添加line-height属性，设置其行间距。

div{width:500px; height:200px; border:1px blue solid; display:table-cell; vertical-align: middle;}

<div><imgsrc="http://pic2.58.com/ui7/job/hire/pic4.png"/></div>

需要注意的是，上面这种方法是存在兼容性问题的。IE6/IE7以及以IE为核心的浏览器如世界之窗、360、遨游等浏览器不支持这种用法，而Chrome、火狐却能支持。

为了兼容ie6/7可以为div添加以下属性

div{

*display:block;

*font-size:175px;/*高度为200px， 则200*0.873约为175px*撑开/ 

}

line-height：行高指的是文本行的基线间的距离。而基线（Base line），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下 端沿，同时还有文字的顶线（Top line）、中线（Middle line）和底线（Bottom line），用以确定文字行的位置。

小结：如果要让某个元素在上层容器中垂直居中，在在该元素总添加vertical-align属性，如果一个元素想让其中的文字居中（比如行内级元素 span），可以定义其line-height属性，也可以在文字上添加一个修饰容器如span 然后在span中添加vertical-align属性。line-height在单行的情况下可以使用，但是如果文字换行的 两行之间的间隔会很大，该方式的垂直居中只是增大了行间距，在视觉上感到居中，所以如果要让其中的文字垂直居中，建议在文字上添加一个修饰容器，然后让这个容器垂直居中。

4. 关于position定位问题

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

以上是W3CSchool上的copy这里对上面容易混淆的地方做一些解释，在新手开发的时候常会遇到的：

1.static：是默认的正常流布局模式，这里不多讲；

2.relative：是相对于该元素当前位置做出位置调整，它还存在于当前的文档流中。

3.absolute：上面W3C已经作出了解释，通俗的理解就是当一个元素是绝对定位时，它不属于普通流布局的空间中，而是以一个已经定位（非static的元素）或初始包含块(body)为容器，根据定位值定位。它不按照正常文档流的顺序排列。

4.fixed：和absolute相似或者说是absolute的一个特例，与absolute不同的是fixed是以浏览器可视窗体为包含容器，也就是浏览器在屏幕中可见的内容区域的范围，fixed是不会随滚动条的滑动而移动的，它会定位在内容区域屏幕的一个固定位置，当然它不会超出浏览器的内容区域跑到菜单栏上去。而absolute是以文档为包含块，会随着滚动条的滑动移动的。

5. float：浮动的元素也不在正常文档流中。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

有时候新手开发会发现带有border值得包含块如法包含float元素，就是因为float不在文档的普通流中，因此不占空间，所以包含块里面就好比没有内容。但如果想在视觉上让包含块包含住了float的元素，可以通过添加一个元素并添加clear属性，来使得float在视觉上包含在包含块中。

6.clear：clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。