今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处, 但这个你不一定注意过;

先说一个场景,例如:
一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧? 因为300+100正好是400呀! 好了,先试一试!
我开始写了(头部省略):

<style>  
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}  
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;}  
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;}  
</style>  

400px  
<div id="yellow">  
 <div id="blue">300px</div>  
 <div id="red">100px</div>  
</div> 

看一下效果:
www.zishu.cn 400px 300px 100px
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后的效果是这样的:




没有放下,原因就是因为我写了一个border:1px; 那我们把他去掉看一下.
www.zishu.cn 400px 300px 100px
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

css布局网页水平居中常用方法
页面水平居中一般会令人很头疼，尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。以下内容参见《精通CSS

使用CSS框架布局的缺点和优点小结
现在好多网站都用了div+css来布局网页结构，优点是速度快了，可负面影响呢，来看下面的分析前端时间写了一篇《利用CSS框架进行高效率的站点开发》

Web2.0下XHTML+CSS 设计需要注意的地方小结
注意事项：1、除选择DOCTYPE之外的语句必须使用小写英文字母书写。其中包括MacromediaDreamweaver生成的鼠标动作，如OnMouseOver也必须修改成onmouseover。2、XHTM