快速业务通道

网页设计学习教程:CSS盒模型

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-02

网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图:

thebox

如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 - 糖伴西红柿),就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。

firebug

注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影响盒子本身的大小,但是它会影响和盒子有关的其他内容,因此 margin 是盒模型的一个重要的组成部分。

盒子本身的大小是这样计算的:

Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom

值未声明的情况

如果未声明 padding 或者 border,那他们或者值为零(使用 css reset 时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)

块级盒的默认宽度

如果未声明宽度,并且盒子是静态或者相对定位的,宽度会保持 100%的 宽度,padding 和 border 会向内推动,而不是向外扩展。

但是,如果明确设置盒子的宽度为 100%,那么 padding 就会向外延展。

weird

The lesson here being that the default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.

要注意的是,盒子的默认宽度并不真的是 100%,而是剩下的可能值(应该是说,剩余真实存在的宽度 - 糖伴西红柿)。应该了解这个特殊值,因为很多情况下,它对于设置/不设置宽度都是非常有用的。

我遇到的最大的麻烦就是 textarea(文本框) 元素了,它们需要设为宽度为所需的"cols"属性,并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%,但有 padding 时,就会延展 textarea 的宽度。固定宽度环境下,通常可以设置为合适的像素值宽度,但是变宽情况就没那么幸运了。

无宽度的绝对定位盒子

未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此,如果盒中只有一个单词,盒子就会像那个词的表现一样宽。如果变成两个词,盒子的宽度也会相应增加。

abs-width

这种情况会持续到盒子的宽度达到父元素宽度的 100%(

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号