这是原文
Ten CSS tricks you may not know大意如下:
1. CSS font shorthand ruleCSS 缩写
比如
font-style:bold;ling-height:130%;font-size:12px;
可以缩写为
font:bold 12px/130%
2. Two classes together同时使用多个 class
多个class中间空格分开,如 <div class="oMenu oEm">
3. CSS border default value边框使用默认样式
边框默认的为 soild，宽度为medium，大约3-4像素，颜色与包含的文字内容一样。
4. !important ignored by IE用!important来区分IE
比如：
margin-top: 3.5em !important; margin-top: 2em
非IE浏览器会优先使用 3.5em，而IE根据先后顺序关系，使用 2em
5. Image replacement technique图片替换技术
比如：
<img alt="[color]图片说明[/color]">
搜索引擎对这样 alt 不如真正的文字敏感。可以这样来优化搜索引擎（SEO）
CSS部分：
h1
{
background: url(widget-image.gif) no-repeat;
}
h1 span
{
position: absolute;
left:-2000px;
}
HTML 代码：
<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
6. CSS box model hack alternativeCSS盒式模型
简单地说，就是把padding和border这种IE不消化的东西，通过 div 嵌套逃避过去。（在里面那个div设置 padding 和 border）
代码如下：
<style>
#box
{
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}
</style>
<div id="box"><div>...</div></div>
7. Centre aligning a block element页面中间对齐
IE 不认识 margin:auto，所以这样
<style>
body
{
text-align: center;
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
</style>
<body>
<div id="content">
...
8. Vertically aligning with CSS垂直对齐
vertical-align 不好使，可以试试 line-height
9. CSS positioning within a containerCSS定位
实际上就是古老的“层嵌套”，外面 relative 里面 absolute，这样的 absolute 就是相对外面的容器而不再是body（整个页面）了
10. Background colour running to the screen bottom背景颜色走到底
有时页面需要某一列背景色走到底，但这列内容没那么多，这时可以用背景来做。
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
