IE盒模型和标准w3c盒模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像
W3C 盒子模型的范围包括： margin、border、padding、content，并且 content 部分不包含其他部分
IE 盒子模型的范围也包括 ：margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。
那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
。
最新文章
- winform错误提示 ：窗口类名无效(Window class name is not valid)
- 5.ScrollView无法填充满屏幕
- header页头内容整理
- Delphi EVariantTypeCastError错误的解决方法
- HDU 5112 A Curious Matt 水题
- PHP文件目录copy
- Ubuntu安装tftp服务器
- [河南省ACM省赛-第四届] 表达式求值(nyoj 305)
- Inno Setup入门（三）——指定压缩方式
- java实现——005从尾到头打印链表
- 基于 Haproxy 构建负载均衡集群
- LeetCode 342. Power of Four （4的次方）
- C#通过序列化实现深表复制
- 将String类型的json字符串转换成java对象
- 配置AD RMS及SharePoint 2013 IRM问题解决及相关资源
- Windows服务器时间不同步问题
- LaTeX技巧：如何高效地将LaTeX代码转为Word公式
- wireshark捕获表达式之Berkeley Packet Filter (BPF) syntax
- 转 MySQL中的共享锁与排他锁
- 【Python入门学习】闭包&装饰器&开放封闭原则