《CSS教程之盒模型.doc》由会员分享，可在线阅读，更多相关《CSS教程之盒模型.doc（5页珍藏版）》请在金锄头文库上搜索。
1、CSS之盒模型1. 与盒模型相关的元素Width 内容的宽度Height 内容的高度Margin 外边距；margin: 上下 左右 ; margin: 上 右 下 左 ；Padding 内边距；padding 上下 左右;padding: 上 右 下 左 ；例子： #one width: 300px; height: 300px; border: 1px solid red; #two width: 100px; height: 100px; border:solid 1px #ccc; padding: 10px 20px; margin:10px #two div的盒模型如下图：需要注意
2、的是：a) 设置padding内边距会增大盒子 (不知道你以前注意没有)：【IE6及以下版本不会，下面会详细介绍】观察：此时的盒子的大小是141*121的。比如我们设计盒子大小200*200，然后设置了一个padding:5px;此时的盒子大小就变成205*205。如果预留空间就是200*200可能就出问题了。所以对于200*200的空间，盒子有可能这么设计：195*195，padding5px。b) Margin很正常就是外边距，相信你也能理解。2. 盒模型很简单，但是也有需要注意的地方，下面介绍IE6以及更低版本的IE的盒模型以下问题可能在混杂模式（没听过，不要紧，你只要知道IE6的盒子模
3、型有可能这样，以后遇到这种情况，知道怎么回事就行。）下出现：Width = 内容width + 内边距+ 边框3. 外边距的叠加问题，你可能会遇到盒子出现的效果与预期不一样的情况，有可能就是这个问题，仔细看看。a) 当一个元素出现在另一个元素上面时，上面元素的下外边距（margin-bottom）与下面元素的上外边距（margin-top）会发生边距叠加b) 当一个元素a（a元素没有设置边框和内边距padding）包含在另一个元素b中，他们的上外边距和下外边距会叠加。上面这个问题经常遇到，我毕设的登录界面就遇到了。所以要知道解决方案：1) 给a元素设置边框，就可以按预期显示了，但有可能实在是不需要边框（白色边框不行，以前我也过这么试试），可以选择方案2。2) 给a元素设置padding:1px；只要设置padding就行。c) 空元素a，有外边距但是没有内边距和边框。总结1) 通过这篇Word，你应该了解盒子模型 。2) 了解padding对我们预期希望和模型的影响。3) 了解IE6在混杂模式下的盒子模型与正常的盒子模型的区别。4) 了解盒模型存在的外边距叠加问题。特别是叠加问题中的第二点，经常遇到。注：由于网速太慢，本电脑没有下载安装IE6，截图可能来自于各种书本。有什么不了解，请及时联系，例子会在时间充裕的时候补充。20130726
