经典的CSS2.0盒模型
2007-06-08 15:33 分类：xhtml&css
css的盒子模型已经说了很长的时间了，但是，还是有很多的人不明白，其实，盒子也没有什么难的地方啊，你就把他想象成一间房子，border就是房子的砖墙，有什么三七墙了二四墙什么的，这个你随便设置去吧，当然豆腐渣工程你就把他设置成0；而margin就是墙皮外的水泥了、贴的瓷砖了，也就是外墙皮；房子里面总要装修吧，弄点白灰了，什么立邦漆了涂里面，也就是padding了。这些都是灵活的，都可以设置成0的。而里面的width，也就是房子内部的实际的宽度。
width，也就是你房子的实际的使用宽度，但是，在网页中，盒子的实际占用的宽度，也就是建筑的占地面积，和width还是不一样的，你的砖墙要占空间吧，外墙皮的瓷砖要占空间吧，里面好歹装修了什么的多多少少也要占空间的，你实际的使用面积还有多少？就剩下你设置的width和height的乘积了……
所以，占地宽度=两个外墙皮+两个砖墙的厚度+2个内部装修占的宽度+实际内部空间的宽度。
所以盒子在网页中的实际占用宽度=2*margin+2*border+2*padding+width
我的语言能力有限，不知道能不能听懂看懂的，反正是这个意思吧。
具体的模型可以参考下面的图片：
下面还有一个flash的示意图，的示意图，很是形象的。
以上资料来自蓝色理想。
相关日志
Trackback : http://www.gengbing.com/aboutme/show-644-1.html/trackback【点击这里复制】
关于 “经典的CSS2.0盒模型”的评论（4条）
哈哈，这个比喻很形像
胡说八道，见笑见笑……
看老有人不明白就忽悠了两句。
模型做的很形象，哈哈
图了什么的都不是我做的，都是我直接搬人家现成的。配上更容易理解。