DIV+CSS中10句新手最有用的css代码

1.float:left

功能：使多个div平行并排

用法：

<div id="div1" style="float:left;width:20px;"></div>

<div id="div2" style="float:left;width:20px;"></div>

2.clear:both

功能：多个div平行并排的时，不得不加一个空div用clear:both进行描述。因为如果不加以限制，IE显示正常，而firefox则排版错误。

用法：

<div style="clear:both;height:0px;overflow:hidden;"></div>

3.margin:0 auto

功能：如果你要让页面居中对齐，而宽度并不等于屏幕宽度。这样margin:0 auto就会显示其巨大的价值

用法：

<div style="width:800px;margin:0 auto;"></div>

4.margin:0px

功能：你是否有页面中添加一个form然后怎么调也调不好其排版，它总是给你换行或者撑大外容器。只要用margin:0px即可

用法：

<form name="test" action="" method="post" style="margin:0px;"></form>

5.margin:-x px

功能：如果要将一个img和一个span文字内容并排，你会发现高低总会不一致。这样就可以用margin定义外边距，这个数值可以是负的

用法：

<img src="http://images.cnblogs.com/test.gif" style="margin-top:-2px;" />(表示图片向上移2px)

6.padding:x px

功能：怎么样才能让内容和容器有一定的间距呢？这就是内边距padding的作用，这儿之所以把它提出来是要注意它的用法

用法：

<div style="height:20px;padding-top:10px;">Here is data!</div>(这个div的显示高度是多少？30px)

7.line-height:x px

功能：许多时候一段文字太紧密，看起来心烦。那就将其行间距拉大，这儿用line-height定义其行高

用法：

<div style="line-height:18px;">Here is data!</div>

8.a

功能：定义链接属性。许多时候新手容易问：为什么我定义了css属性却显示不正确？那么你很有可能写乱了a的顺序，正确的顺序应该是lvha

用法：

a:link{

font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;

}

a:visited{

font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;

}

a:hover{

font-size:12px;font-family:宋体;font-weight:bolder;color:orange;text-decoration:underline; 

}

a:actived{

font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;

}

9:border:0px

功能：如果你给一个img加了链接，那么就会出现一个讨厌的边框，这时候将其定义为0去掉它。

用法：

<a href="url" target="_blank"><img src="http://images.cnblogs.com/img.gif" style="border:0px;"></a>

10:display:none

功能：有时候可能需要隐藏对象，这时候用display最合适。特别是在许多在线编辑器的编辑模式时最有用

用法：

<input type="hidden" name="content" id="content" />

<IFRAME ID="eWebEditor1" src="/eWebEditor/ewebeditor.htm?id=content&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME>(往数据库新加内容时)

<textarea name="content" id="content" style="display:none;"><%=data%></textarea>

<IFRAME ID="eWebEditor1" src="/eWebEditor/ewebeditor.htm?id=content&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME>(更新数据库内容时使用)

链接自：php讨客网