margin和padding的意义相信大家都很清楚，可是在具体应用中， 到底应该使用哪一个，就比较难于判断了。 这篇文章 说得挺清楚的，在这里翻译一下，供参考。
何时应当使用margin
- 需要在border外侧添加空白时。
- 空白处不需要背景（色）时。
- 上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
何时应当时用padding
- 需要在border内测添加空白时。
- 空白处需要背景（色）时。
- 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
浏览器兼容性问题
在IE 5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。 通过改用padding或指定盒子为display:inline可以解决。
许多网站都使用了下拉菜单效果，但大部分都是用Javascript实现的。 自己写过下拉菜单的人应该知道，处理onmouseover和onmouseout事件极其繁琐。 而实际上，仅使用CSS的:hover伪类就能简洁地实现下拉菜单效果。
不过遗憾的是只有完全支持:hover伪类的浏览器如Firefox才能实现这种效果。 像IE这种仅能部分支持:hover的浏览器就只能老老实实地用Javascript来做了。
请看下面的代码。
<html>
<head>
<style>
</style>
</head>
<body>
<div id="menu">
<h3>Select from menu</h3>
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
<li>menu item 5</li>
</ul>
</div>
</body></html>
我们尚未定义样式表，这个页面显示结果就是一个简单的列表。
为了实现下拉菜单，我们先将<ul>元素隐藏起来：
#menu ul { display: none; }
然后应当让菜单在鼠标经过时显示，所以应当为<div>的:hover伪类添加如下定义：
#menu:hover ul { display: block; }
阅读全文 »/div></ul
今天来讲一下CSS中的绝对定位和相对定位，即position属性的使用方法。
position属性常见的值有三种：
- static: 不使用定位（默认值）。
- absolute: 使用绝对定位。
- relative: 使用相对定位。
在解释定位方式之前，首先要阐明文档流(document flow)的概念。 浏览器在解释HTML文档时，它会将各个元素按照在HTML文档中出现的次序， 从上到下依次排列。例如下面的代码将产生如下的效果：
又懒了一下，好几天没更新了。其实上周买的书到了，这几天在忙着看书， 没顾得上研究技术。昨天一口气看完了《CSS禅意花园》， 觉得这本书不愧CSS设计的王者称号，无论从欣赏还是学习的角度，这本书都值得一读。
当然，原书网站CSS Zen Garden也一定要去看看。
今天先来介绍一个从这本书上学到的小技巧：如何用图片替换文字。
所谓图片替换文字就是用图片代替HTML中的某个文字元素，如标题。网站设计中很常用， 比如我想用图片而不是文字来显示blog标题，我可以在本应当显示<h1>的地方显示一个<img />， 但这样页面中失去</h1><h1>会影响搜索引擎评分。当然我也可以通过css给</h1><h1>设置一个背景图片， 但</h1><h1>内的文字必须显示，否则也会影响搜索引擎评分。 可以使用下面的方法之一来通过CSS完美解决。
阅读全文 »/h1
刚刚为blog加了个面向打印的css，大家可以从浏览器的打印预览中看到效果。 之所以要加这个css，是因为blog显示的内容中有很多是不需要并且不便于打印的， 比如侧边栏、评论输入框等，打印时把这些无用的东西都隐藏掉， 对用户比较友好。
总结一下css的要点。参考的原文在这里。
阅读全文 »通常在制作网站首页时需要使页面内容在水平和垂直方向上都居中。 表格布局时代常用的方法是内容之前添加换行。实际上通过CSS有更方便的办法。
这个方法出自creamu.com。 先来看看代码和效果吧。
<style>
#warp {
position: absolute;
width:500px;
height:200px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-100px;
border: solid 3px red;
}
</style>
<body>
<div id=warp>Test</div>
</body>
原理很简单：将left和top设置为50%来定位div到浏览器中央，再将margin-left和margin-top值设置为宽和高的一半， 使div居中显示。
原文在这里， 对于初学CSS布局的人也许会有很大的帮助。有经验的开发者在调试CSS布局时也能得到些启发。
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常， 即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界， 错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。 这是MacIE的著名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何， 一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。 因此不要对float元素指定margin和padding属性 （可以在float元素内部嵌套一个div来设置margin和padding）。 也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。 因此请保证宽度之和小于99%。
9. 是否重设了默认的样式？
某些属性如margin、padding等，不同浏览器会有不同的解释。 因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD？
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
box模型即由<div>等块元素的 margin、padding、border、width、height 等属性构成的显示模型， 它是CSS布局的基础。通过设置<div>的各种属性，可以得到任何想要的页面效果。
各个元素的含义如下：
- margin: box外边界到外层元素的距离，即余白。
- border: box的边界宽度。
- padding: box内的内容到box内边界的距离，即边距。
- width: box的宽度。
- height: box的高度。
其中有问题的就是 width 和 height 的定义。一般的浏览器将 width 和 height 定义为 除掉 margin、padding、border 之后的box内容的大小，实际上 box 所占有的面积 为定义的 width/height 再加上 margin、padding、border的大小。
阅读全文 »/div></div
