CSS教程之盒模型.doc

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