2.克服盒子模型的hack

原写法:

#main-div{width: 150px;border: 5px;padding: 20px;}

修正后

#main-div1{width: 150px;}#main-div1 div{border: 5px;padding: 20px;}

例如:

<div id="main-div">1</div>
<div id="main-div1"><div>2</div></div>

见图:

两者区别:1是把padding加到父层里,DIV的宽度是150+20+20

2是把PADDING加到子层里,div的宽度是150.

我习惯是用1的方法去自己计算宽高.

3,4.最小高度(最小宽度)IE不识别的解决方法

.container {width:20em;padding:0.5em;border:1px solid #000;min-height:8em;height:auto;}* html .container {height: 8em;}

5.整块元素居中对齐的方法

body{text-align: center;}#container{text-align: left;width: 960px;margin: 0 auto;}

先定义BODY中的文字整个居中text-align:center,再定义其中需要左对齐的子元素text-align:left;

6.垂直居中的CSS

#wrapper {        width:530px;        height:25px;        background:url(container.gif) no-repeat left top;        padding:0px 10px;}#wrapper p {        line-height:25px;}

适用单行文字,将height设成line-height同值

7.固定宽度下几个LI元素float横排时,超出宽度限定的解决方法

css:

ul.listing{   margin:0;   width:400px; border:1px solid #000;} ul.listing li{   list-style-type:none;   float:left;   margin:0 20px 0 0;   width:83px; border:1px solid red;}  

ul.listing1{   margin:0 0 0 -20px;   width:420px; border:1px solid #000;} 

ul.listing1 li{   list-style-type:none;   float:left;   margin:0 0 0 20px;   width:83px; border:1px solid red;} 

例子:

<ul class="listing">
<li>第一句</li>
<li>第二句</li>
<li>第三句</li>
<li>第四句</li>
</ul>
</div>
<div>
<ul class="listing1">
<li>第一句</li>
<li>第二句</li>
<li>第三句</li>
<li>第四句</li>
</ul>

图示:

原理:

用负margin的方法

9.定位z-index

z-index起作用的前提是,必须有position:absolute, position:fixed or position:relative这三种中的任一种属性.

css:

.relativeblock1 {        position:relative;        width:200px;        height:80px;        z-index:51;}.absoluteblock1 {        position:absolute;        left:10px;        top:90px;        width:40px;        height:40px;        z-index:1;}.relativeblock2 {        position:relative;        width:200px;        height:80px;        z-index:50;}例:

<div class="relativeblock1">        <div class="absoluteblock1"></div></div><div class="relativeblock2"></div>见图:

按CSS来说,relativeblock2应该会盖上absoluteblock1,但实际正相反,是因为

absoluteblock1的优先级别高于relativeblock2,他继承了absoluteblock1的z-index,虽然他自身的z-index值为1,但实际为51.1,当然高于relativeblock2的z-index:50.

10.相对定位relative和绝对定位absolute的区别

 CSS:

#redSquare{position: relative;bottom: 40px;right: 40px;}图例:

11.绝对定位的应用

css:

#hang_tab {position: absolute;top: 7px;left: 0px;width: 157px;height: 93px;}

图例:

13.正确消除浮动(float)的方法

css:

#container:after{        content: ".";        display: block;        height: 0;        clear: both;        visibility: hidden;}#container{display: inline-block;}* html #container{height: 1%;}#container{display: block;}

例图:

经实现,用:after属性是为了消除float浮动(针对FIREFOX使用)时父层无法正确识别高度，复杂且不易记不，优点是不需要再写<div style="clear:both"></div>这样一个空层来撑起高度。

15.如何处理圆角

最简单的方法是用一张足够大的图，然后我该圆角标注

html:

<div class="roundBox">  <p>beautifully-encapsulated paragraph</p>  <div class="boxBottom"></div></div>

css:

.roundBox {  background:transparent url(roundBox.gif) no-repeat top left;  width:340px;  padding:20px;}.roundBox .boxBottom {  background:white url(roundBox.gif) no-repeat bottom left;  font-size:1px;  line-height:1px;  height:14px;  margin:0 -20px -20px -20px;}

实例：http://www.askthecssguy.com/examples/notchedcorners/index.html

17.用label标签做表单（非table）

精华html：

<form method="post" action="contactengine.php">
    <label for="Name">Name:</label>
    <input type="text" name="Name" id="Name" />

.....

</form>

css:

label {        float: left;        text-align: right;        margin-right: 15px;        width: 100px;}

实例：http://css-tricks.com/nice-and-simple-contact-form/

另一个：http://www.box.net/shared/1zbtouuwws

20.用有背景图的hr做分隔线,适用所有浏览器的方法.因为hr自身的样式是一根黑线,所以让他自身的样式 隐藏,然后新写一个class="hr"，让hr听他父层的话
经验证这样写无意义,对于目前中国的网站来说,极少用到HR.

=========================================================
The CSS Class
====