几个常见CSS错误和解决办法

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

====