例:
#content {
float: left
width: 500px
padding: 10px 15px
margin-left: 20px
display:inline
}
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同值
最常见的失败原因有以下几类：
网络原因：IIS空间不足、浏览者网速慢、空间速度慢等网络因素是造成CSS加载失败的原因之一，其具体表现为：当我们打开网页时，网页布局完整，但却没有任何布局样式显示。
路径错误或者代码不兼容：果网页打开时，没有显示CSS设定的样式，只以原始状态显示。那么就可能是我们CSS文件路径出错或者CSS代码不兼容了。
if造成失败：第三个原因是，我们编在写CSS时，可能使用了if判断语句对什么浏览器调用什么CSS文件时疏忽造成if调用的混乱，导致在某些浏览器上能正常显示，在某些浏览器上不能正常显示。对于这个原因，解决方法就是好好检查造成CSS加载失败的if判断设置。
另类CSS加载失败 ：何为另类CSS加载失败？这是由于我们本身的CSS代码写法有问题，没有设置好造成在各浏览器显示不同布局差距效果。在CSS里面，我们称为css hack。
浏览器导致：在Chrome浏览器的错误控制台下看看css文件有没有加载进来，确定已加载的话，检查元素的类名与CSS中定义的类名是否相同。可能局限于ie浏览器，你用谷歌浏览器就会出现错误。所以尝试换个浏览器，然后等会在用，也可能修复故障。
编码不对：如果不是上述问题则看一看你的CSS文件的字符集是否和你的调用CSS文件的网页的字符集是否一致，就是charset属性那里。在你使用浏览器进行浏览效果的时候，ie浏览器中菜单栏上有一个“查看--编码”，在查看编码上面UTF-8或者GBK看看是不是同一个编码。可能是编码不一致所造成。
