【分享】你知道吗？——表格的盒子模型问题

WebAdvocate 2010-07-13 01:06:58

加精

真理和谬论，只有一步之遥。
认识一个问题，不够深入，就可能是错的。

在【分享】重新认识IE盒模型bug 中，曾经说到了 ‘width’ 和 ‘height’ 特性的作用位置问题，在其中，TABLE 元素比较特殊。
幸亏我上次的用词是 TABLE 元素，而不是 TABLE，用词还够准确，否则，真的就成谬论了。
这几天，做个东西，把一个 DIV 搞成一个 TABLE，好让 DIV拥有TABLE的布局优点。哪知道，偷鸡不成反蚀一把米……

我把出问题的部分，精简了一下，代码如下：

<div style="display:table; width:150px; padding:25px; border:25px solid green; background:gold;">

   <span style="background:silver">XXXXX</span>

</div>

本想，DIV 加上 “display:table”，就能让 DIV 获取表格布局的优势。但是，我忘了一件事了，那就是 TABLE 元素中 ‘width’ 和 ‘height’ 的作用位置。这下问题来了，在各浏览器里，这段代码存在较大的差异。
在Firefox、Opera和IE的标准模式下，是这个样子滴：

而在Chrome和Safari，以及IE的兼容模式下，却是这个样子滴：

把 “display:table” 改成 “display:inline-table”，效果相同。

可见，对于 "display:table" 或 "display:inline-table;" 的元素，宽度高度作用位置在各浏览器中不同。
在 Safari、Chrome 和 IE 兼容模式下，作用于 border box，这与 table 标签相同。
在 Firefox、Opera 和 IE 标准模式下，作用于 content box。
注意，IE 在兼容模式下，并不支持 “display:table” 和 “display:inline-table;”，IE在兼容模式下，存在盒模型 bug（见【分享】重新认识IE盒模型bug ），所以，宽度和高度特性一直作用于 border box。所以，与 Safari 和 Chrome 浏览器中现象虽然相同，但是，根本原因是不同的。

最后，我不得不放弃这种想法，还是老老实实的用了 DIV。

相关的帖子是：
【分享】说说标准 ---- 你真的了解盒子模型(box model)吗？
【分享】重新认识IE盒模型bug

更多兼容性问题在这里：【分享】浏览器兼容性问题目录

...全文

2581 70 打赏收藏转发到动态举报

写回复

70 条回复

切换为时间正序

请发表友善的回复…

发表回复

liangshangjunzi 2010-08-17

打赏
举报

回复

好东西

lxjtsoftware 2010-08-12

打赏
举报

回复

恩，坚持从第一个看到现在，争取今天继续把lz的帖子都看完

wealful 2010-07-19

打赏
举报

回复

学习支持顶 UP 标记收藏接分 jf

bmwdoc 2010-07-18

打赏
举报

回复

学习，加油。

Greentea107 2010-07-18

打赏
举报

回复

谢谢楼主的专业

w360826 2010-07-18

打赏
举报

回复

貌似这东西不错

程序园苑 2010-07-18

打赏
举报

回复

路过，学习了，支持

wjanva 2010-07-18

打赏
举报

回复

学习学习

xiangxuehai00 2010-07-18

打赏
举报

回复

楼主挺厉害的，研究问题深入，确实值得推荐……

成千上万的老鼠 2010-07-17

打赏
举报

回复

势孤取和 2010-07-17

打赏
举报

回复

支持下~

hushanthf 2010-07-16

打赏
举报

回复

学习了！！！！！

jiujiuyaokan 2010-07-16

打赏
举报

回复

JS~~~~~~~~

qq875619405 2010-07-15

打赏
举报

回复

哇...这个好的不得了

WOLFOX1 2010-07-15

打赏
举报

回复

谢谢。支持。

Janephp 2010-07-15

打赏
举报

回复

顶一个。。。

cattle_tao 2010-07-15

打赏
举报

回复

JF.......

lwwit 2010-07-15

打赏
举报

回复

学习学习

x5580330 2010-07-15

打赏
举报

回复

认真学习一下增加经验

x5580330 2010-07-15

打赏
举报

回复

学习xuexi

加载更多回复（44）

第1章　（X）HTML与CSS核心基础　　1.1　HTML与XHTML　　　1.1.1　追根溯源　　　1.1.2　 DOCTYPE（文档类型）的含义与选择　　　1.1.3　XHTML与HTML的重要区别　　1.2　（X）HTML与CSS　　　1.2.1　CSS标准简介　　　1.2.2　在HTML中引入CSS的方法　　1.3　基本CSS选择器　　　1.3.1　标记选择器　　　1.3.2　类别选择器　　　1.3.3　ID选择器　　1.4　复合选择器　　　1.4.1　“交集”选择器　　　1.4.2　“并集”选择器　　　1.4.3　后代选择器　　1.5　CSS的继承特性　　　 1.5.1　继承关系　　　1.5.2　CSS继承的运用　　1.6　CSS的层叠特性　 1.7　本章小结　第2章　 “CSS禅意花园”作品鉴赏　　2.1　“CSS禅意花园”简介　　2.2　郊野——两列布局　　2.3　像素画——三列布局　　 2.4　百合池塘——三列布局变体　　2.5　郁金香——多列布局　　2.6　日与夜——包含圆角的设计　　2.7　Si6—— 包含倾斜的设计　　2.8　清茶时光——装饰性设计　　2.9　爱之空气——流体布局　　2.10　谷香——食品主题设计　　 2.11　城市——建筑主题设计　　2.12　“卡通版”禅意花园——特色效果　　2.13　收音机——特色效果　　2.14　杀手风格——特色效果　　2.15　海底世界——特色效果　　2.16　博物馆——特色设计　　2.17　剧院效果——特色效果　　2.18　本章小结　第3章　深入理解盒子模型 　3.1　盒子的内部结构　　3.2　边框（border）　　　3.2.1　实验1——border-style 　　　3.2.2　属性值的简写形式　　　3.2.3　实验2——属性的缩写形式　　　3.2.4　实验3——边框与背景　　3.3　内边距（padding）　　3.4　外边距（margin）　　3.5　盒子之间的关系　　　3.5.1　HTML与DOM　　　3.5.2　标准文档流　　　3.5.3　 div 标记与 span 标记　　3.6　盒子在标准流中的定位原则　　　3.6.1　实验1——行内元素之间的水平margin　　　3.6.2　实验 2——块级元素之间的竖直margin　　　3.6.3　实验3——嵌套盒子之间的margin　　　3.6.4　实验4——将 margin设置为负值　　3.7　CSS中的几何题　　3.8　本章小结　第4章　盒子的浮动与定位　4.1　盒子的浮动　　　4.1.1　准备代码　　　4.1.2　实验1——设置第1个浮动的div　　　4.1.3　实验2——设置第2个浮动的div　　　4.1.4　实验3——设置第3个浮动的div　　　4.1.5　实验4——改变浮动的方向　　　4.1.6　实验5——再次改变浮动的方向　　　4.1.7　实验6——全部向左浮动　　　4.1.8　实验7——使用clear属性清除浮动的影响　　　4.1.9　实验8——扩展盒子的高度　　4.2　盒子的定位　　　4.2.1　static（静态定位）　　　 4.2.2　relative（相对定位）　　　4.2.3　absolute（绝对定位）　　　4.2.4　fixed（固定定位）　　 4.3　z-index空间位置　　4.4　盒子的display属性　　4.5　本章小结　第5章　文字与图像　 …… 第 6章　链接与导航　第7章　竖直排列的导航菜单　第8章　水平导航菜单　第9章　下拉菜单　第10章　表格也精彩　第 11章　圆角设计　第12章　应用Spry制作高级网页组件　第13章　固定宽度布局剖析与制作　第14章　变宽度网页布局剖析与制作　第15章　“CSS禅意花园”作品研究　第16章　综合案例研究　第17章　从学习到创作　附录　CSS英文小字典

第1章　（X）HTML与CSS核心基础　　1.1　HTML与XHTML　　　1.1.1　追根溯源　　　1.1.2　DOCTYPE（文档类型）的含义与选择　　　1.1.3　XHTML与HTML的重要区别　　　1.2　（X）HTML与CSS　　　1.2.1　CSS标准简介　　　1.2.2　在HTML中引入CSS的方法　　　1.3　基本CSS选择器　　　1.3.1　标记选择器　　　1.3.2　类别选择器　　　1.3.3　ID选择器　　　1.4　复合选择器　　　1.4.1　“交集”选择器　　　1.4.2　“并集”选择器　　　1.4.3　后代选择器　　　1.5　CSS的继承特性　　　1.5.1　继承关系　　　1.5.2　CSS继承的运用　　　1.6　CSS的层叠特性　　　1.7　本章小结第2章　“CSS禅意花园”作品鉴赏　　2.1　“CSS禅意花园”简介　　　2.2　郊野——两列布局　　　2.3　像素画——三列布局　　　2.4　百合池塘——三列布局变体　　　2.5　郁金香——多列布局　　　2.6　日与夜——包含圆角的设计　　　2.7　Si6——包含倾斜的设计　　　2.8　清茶时光——装饰性设计　　　2.9　爱之空气——流体布局　　　2.10　谷香——食品主题设计　　　2.11　城市——建筑主题设计　　　2.12　“卡通版”禅意花园——特色效果　　　2.13　收音机——特色效果　　　2.14　杀手风格——特色效果　　　2.15　海底世界——特色效果　　　2.16　博物馆——特色设计　　　2.17　剧院效果——特色效果　　　2.18　本章小结第3章　深入理解盒子模型 　　3.1　盒子的内部结构　　　3.2　边框（border）　　　3.2.1　实验1——border-style 　　3.2.2　属性值的简写形式　　　3.2.3　实验2——属性的缩写形式　　　3.2.4　实验3——边框与背景　　　3.3　内边距（padding）　　　3.4　外边距（margin）　　　3.5　盒子之间的关系　　　3.5.1　HTML与DOM　　　3.5.2　标准文档流　　　3.5.3　div 标记与 span 标记　　　3.6　盒子在标准流中的定位原则　　　3.6.1　实验1——行内元素之间的水平margin　　　3.6.2　实验2——块级元素之间的竖直margin　　　3.6.3　实验3——嵌套盒子之间的margin　　　3.6.4　实验4——将margin设置为负值　　　3.7　CSS中的几何题　　　3.8　本章小结第4章　盒子的浮动与定位　　4.1　盒子的浮动　　　4.1.1　准备代码　　　4.1.2　实验1——设置第1个浮动的div　　　4.1.3　实验2——设置第2个浮动的div　　　4.1.4　实验3——设置第3个浮动的div　　　4.1.5　实验4——改变浮动的方向　　　4.1.6　实验5——再次改变浮动的方向　　　4.1.7　实验6——全部向左浮动　　　4.1.8　实验7——使用clear属性清除浮动的影响　　　4.1.9　实验8——扩展盒子的高度　　　4.2　盒子的定位　　　4.2.1　static（静态定位）　　　4.2.2　relative（相对定位）　　　4.2.3　absolute（绝对定位）　　　4.2.4　fixed（固定定位）　　　4.3　z-index空间位置　　　4.4　盒子的display属性　　　4.5　本章小结第5章　文字与图像　　…… 　　第6章　链接与导航　　　第7章　竖直排列的导航菜单　　　第8章　水平导航菜单　　　第9章　下拉菜单　　　第10章　表格也精彩　　　第11章　圆角设计　　　第12章　应用Spry制作高级网页组件　　　第13章　固定宽度布局剖析与制作　　　第14章　变宽度网页布局剖析与制作　　　第15章　“CSS禅意花园”作品研究　　　第16章　综合案例研究　　　第17章　从学习到创作　　　附录　CSS英文小字典

好多资源不全，所以再次上传《CSS设计彻底研究》是一本深入研究和揭示CSS设计技术的书籍。《CSS设计彻底研究》在透彻地讲解CSS核心技术的基础上，深入到各个实际应用领域中，充分向读者演示了如何使用CSS的各项技术，实现令人眩目的网页布局和效果。《CSS设计彻底研究》适合需要使用CSS的Web设计人员和开发人员阅读，最好具备一定的HTML和网页设计制作基础。 CSS：像艺术家一样浪漫，像工程师一样严谨；核心原理、技巧与设计实战；剖析CSS原理4大核心：盒子模型、标准流、浮动、定位创建主流流览器全兼容的网站：IE 6/UE 7/ Firefox讲解各类网页布局方法：固定宽度布局、变宽布局制作流行的网页元素：导航、菜单、圆角、面板为学习者提供：CSS常用单词英汉对照表内容丰富的配套网站。《CSS设计彻底研究》是一本深入研究和揭示CSS设计技术的书籍。《CSS设计彻底研究》透彻地讲解CSS核心技术的基础上，深入到各个实际应用领域中，充分向读者演示了如何使用CSS的各项技术，实现令人眩目的网页布局和效果。内容提要 -------------------------------------------------------------------------------- 《CSS设计彻底研究》详细介绍了CSS核心基础、盒子模型等知识，力求把道理和方法讲清楚，采用了“探索式”的讲解方法，对于一个问题，例如标准流、浮动、定位等规律，均通过一系列动手实验，使读者自己就能够非常自然地得出结论，使读者不但知其然，而且还知其所以然。在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳，并讲解了完整的解决方法，主要包括各种导航菜单（水平的、竖直的、固定宽度的、自适应宽度的、下拉的等），Tab面板、伸缩面板和折叠面板，以及各种形式的分列布局（固定宽度的、变化宽度的、固定宽度与变化宽度结合的），等等。这样读者在理解了方法的基础上，可以直接将案例用在自己的设计中的，只需要按照所需进行修改即可。目录 -------------------------------------------------------------------------------- 第1章　（X）HTML与CSS核心基础 1.1　HTML与XHTML 1.1.1　追根溯源 1.1.2　DOCTYPE（文档类型）的含义与选择 1.1.3　XHTML与HTML的重要区别 1.2　（X）HTML与CSS 1.2.1　CSS标准简介 1.2.2　在HTML中引入CSS的方法 1.3　基本CSS选择器 1.3.1　标记选择器 1.3.2　类别选择器 1.3.3　ID选择器 1.4　复合选择器 1.4.1　“交集”选择器 1.4.2　“并集”选择器 1.4.3　后代选择器 1.5　CSS的继承特性 1.5.1　继承关系 1.5.2　CSS继承的运用 1.6　CSS的层叠特性 1.7　本章小结第2章　“CSS禅意花园”作品鉴赏 2.1　“CSS禅意花园”简介 2.2　郊野——两列布局 2.3　像素画——三列布局 2.4　百合池塘——三列布局变体 2.5　郁金香——多列布局 2.6　日与夜——包含圆角的设计 2.7　Si6——包含倾斜的设计 2.8　清茶时光——装饰性设计 2.9　爱之空气——流体布局 2.10　谷香——食品主题设计 2.11　城市——建筑主题设计 2.12　“卡通版”禅意花园——特色效果 2.13　收音机——特色效果 2.14　杀手风格——特色效果 2.15　海底世界——特色效果 2.16　博物馆——特色设计 2.17　剧院效果——特色效果 2.18　本章小结第3章　深入理解盒子模型 3.1　盒子的内部结构 3.2　边框（border） 3.2.1　实验1——border-style 3.2.2　属性值的简写形式 3.2.3　实验2——属性的缩写形式 3.2.4　实验3——边框与背景 3.3　内边距（padding） 3.4　外边距（margin） 3.5　盒子之间的关系 3.5.1　HTML与DOM 3.5.2　标准文档流 3.5.3　 div 标记与 span 标记 3.6　盒子在标准流中的定位原则 3.6.1　实验1——行内元素之间的水平margin 3.6.2　实验2——块级元素之间的竖直margin 3.6.3　实验3——嵌套盒子之间的margin 3.6.4　实验4——将margin设置为负值 3.7　CSS中的几何题 3.8　本章小结

认识盒子模型 盒子模型包括四个要素：外边距（margin）、边框（border）、内边距（padding）、内容（content）。网页就是多个盒子嵌套排列的结果内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中外边距是该元素与相邻元素之间的距离如果给元素定义边框属性，边框将出现在内边距和外边距之间需要注意的是，虽然盒子模型拥有内边距...

CSS盒子模型1 盒子模型1.1 网页布局本质1.2 盒子模型（Box Model）组成1.3 边框（border）2 PS基本操作二级目录三级目录3 综合案例二级目录三级目录4 圆角边框二级目录三级目录5 盒子阴影二级目录三级目录6 文字阴影二级目录三级目录 1 盒子模型 1.1 网页布局本质 1、准备好网页相关元素，网页元素基本都是盒子box。 2、利用CSS设置好盒子样式，然后摆放到相应位置。 3、往盒子里面装内容。 1.2 盒子模型（Box Model）组成 CSS盒子包括边框、外边框、内边框和实际

跨浏览器开发

5,007

社区成员

2,693

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章