CSS盒模型
作者:糖伴西红柿 来源:前端观察 发布时间:2009-06-09 14:23:00
CSS 盒模型
网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图:
如果是 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 就会向外延展。
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 的宽度。固定宽度环境下,通常可以设置为合适的像素值宽度,但是变宽情况就没那么幸运了。
猜你喜欢
- 在Dreamweaver4中,你可以存储你自己设定的图片、链接、flash影片、颜色表、模板等等,组成这个站点的资产,这就是Assets面板
- “正则表达式”对象,我们就可以非常方便的对各种数据进行合法性的校验了。首先,让我们来了解一下究竟什么
- Microsoft SQL Server 2005 Mobile Edition 3.0 (SQL Server Mobile) 支持两种与
- 因为这两天在弄自己的一个问答程序www.sosoask.com ,结果发现开发人员把我的存储过程加密了,郁闷,还好找到解决方法了,现在共享下
- 无论使用int还是varchar,对于Status的多选查询都是不易应对的。举例,常规思维下对CustomerStatus的Enum设置如下
- 有使用过VS2005开发工具的朋友或者其他语句如js中都有Try catch 语句块,那么在mysql中是否能有SQLserver的@@er
- 刚刚换用windows7 64位旗舰版,使用其自带的iis7作为调试工具,今天调试一个ASP+ACCESS的网站的时候遇到了“ADODB.C
- 在上一篇文章中,简单介绍了下闭包(closure)和原型链,现在继续来研究闭包的内部机制。对了,所有的东西都参考自这篇文章:Javascri
- [Q]怎么样查询特殊字符,如通配符%与_ [Q]如何插入单引号到数据库表中 [Q]怎样设置事务一致性 [Q]怎么样利用光标更新数据 [Q]怎
- 4. 选择最有效率的表名顺序(只在基于规则的优化器中有效)ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,因此FROM子句中
- ASP中从数据库读取二进制文件数据代码:<%driver_name1="DRIVER={Microsoft&n
- 但是Class这个东西,如果用得比较少,充其量只是一个大模块的包装方式. 只有大规模地用它来开发,才能显出它对项目管理的优越性来. 所谓的意
- 1)按笔画排序select * from Table order by nlssort(columnName,'NLS_SORT=S
- 代码如下: <% dim fso,objFolder,objFiles dim filelist Set fso=Server.Cre
- 在Https页面中,如果iframe所引入页面是非https协议的页面,或者src属性不存在都可能导致浏览器弹出安全警告。本人在网上查找相关
- 感谢 Dawn CSS Reset 的尝试和建议。针对字体的写法,觉得需要说明一下:body,button, input, select,
- 本文主要介绍了一个获得当前数据库对象依赖关系的实用算法,具体示例请大家参考下文:create function&nb
- 到目前为止,我们连接的都是两张不同的表,那么能不能对一张表进行自我连接呢?答案是肯定的。有没有必要对一张表进行自我连接呢?答案也是肯定的。
- 绘制一个线框图是你在制作一个网站前必须要经历的过程。线框图能够帮助你合理的组织并简化你内容和元素,是网站内容布局的基本视觉表现方式,是网站开
- 之前在《首都机场的点烟器》中分析了一个软件系统所处的状态并且列举了不同的状态所需要的展示给用户的各类信息,我们先简单回顾一下:要设计一个软件