关于width与padding-袁来如此的工作笔记

首先谈谈!important问题的引起（盒模型问题）:

在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border）和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如，

Firefox（FF）是准确按照CSS标准：width为内容的宽度，

也就是说：层的宽度 = width + padding(left and right) + border-width；

而IE则把width作为整个层的宽度：内容的宽度 = width - padding - border-width；

IE的这种解析，被认为是一个BUG。但事实上，这种解释也不无道理，人们在设计页面的时候关注得更多的是盒子的大小，而不是内容的大小。正是因为浏览器的不同解析，给CSS的设计带来一些困难。

盒模型问题的解决：

仔细想想，其实问题就出在“width与padding/border-width的同时定义”上。而明白了这一点，解决的方法就不难想到了，

只要添加一个无width定义的wrapper层，把原来的一个content层拆分成2个层，在wrapper中定义padding和border- width，然后在content中定义width：

程序代码:

#wrapper { padding: 5px; border-width: 2px; }

#content { margin: 0px; width: 400px; }

程序代码:

...

这样问题就可以得到解决，FF，IE6.0都会获得相同的显示效果。更重要的是，没有使用任何CSS hack。

这种解决方法可以说是最终的方案，使用CSS hack的方法只是目前过渡阶段的临时方法。

对于网站构造，特别是对于样式比较复杂的网站，个人建议在重要的层快外加上wrapper层。但是对于目前现成的模板，可以有选择修改部分样式，或者使用其他方法。

是否适合所有的浏览器？理论上，这种方法应该适用于各种浏览器。

关于width与padding