IE6 很邪恶,但我爱它的盒子模型
盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子模型有两种不同的诠释,一种来自 IE6,一种来自 W3C 标准浏览器。
盒子模型
下图就是一个典型的盒子模型示意图
在内容区外面,依次围绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的。通过盒子模型,我们可以为我们的内容设置边界,留白以及边距,盒子模型最典型的应用是这样:我们有一段内容,可以为这段内容设置一个边框,为了让内容不至于紧挨着边框,可以设置 padding ,为了让这个盒子不至于和别的盒子靠得太紧,可以设置 margin。
到目前为止,一切都很完美,直到当我们想为这个盒子设置一个尺寸的时候。
IE6 和 W3C 标准浏览器对盒子模型的不同诠释
当我们试图为一个盒子设置尺寸的时候,问题出现了。IE6 和 W3C 标准浏览器对盒子模型有不同的解释,这个不同解释表现在盒子的尺寸上,下图是两种类型的浏览器对盒子尺寸的不同解释示意图:
可以看出,IE6 盒子模型中,盒子的尺寸包含了 内容区,padding, border 和 margin 这四个部分,而 W3C 的盒子模型中,盒子的尺寸只包含内容区,padding,border 和 margin 被排除在盒子尺寸之外。
为什么 IE6 的盒子模型更合理
在现实世界中,我们描述一个物理盒子的时候,如果谈到尺寸,是不会只计算其盛放的物体的尺寸的,我们还会算上空隙与盒体本身。拿集装箱装箱为例,我们有 100 只花瓶,每只花瓶用1个纸盒包装,为了防止花瓶破碎,我们在花瓶周围塞上泡沫,这相当于 padding,纸盒的外围纸板相当于 border,在装集装箱的时候,为了防止纸盒之间相互碰撞,纸盒之间塞上稻草,这相当于 margin,很显然,我们向货运公司报告我们货物尺寸的时候,是要将整个纸盒的尺寸,连同纸盒之间需要塞稻草的空隙都告诉他们的,倘若只报告花瓶的尺寸,货运公司是没有办法装箱的。
再举一个例子,假若我们有一面墙,要在上面挂10幅油画,油画是用相框裱糊的,相框的边框相当于 border,油画和边框之间的距离相当于 padding,相框之间的间隔相当于 margin,这个例子和 Web 布局设计已经很接近了,对任何人来说,使用 IE6 的盒子模型,将整个相框,包括油画当做一个整体更容易布局,当你知道了整个相框的尺寸后,不必再去考虑 padding, border, margin 这个因素的影响,每个相框就是一个整体,至于 padding, border 与 margin,这是浏览器自己事,不需要设计者去关心。
在具体的 Web 设计中
在具体 Web 设计中,尤其牵扯到复杂网格布局的时候,IE6 的盒子模型更容易控制,我们不妨看看以下几个设计场景。
1. 面板式界面设计
页面上包含几个面板,比如一个登录面板,一个最新新闻面板,一个投票面板,这类设计典型的做法是,用背景图的方式,首先逐个设计出这些面板的外观图,将需要用具体内容替换的地方空着,这些面板,无非就是一些使用面板外观图片做背景图的盒子,然后,在这些盒子里面,放上具体的内容,使用 padding 控制内容的摆放位置,使用 margin 调整面板本身的摆放位置,由于面板的尺寸是固定的,我们依此确立了盒子的尺寸之后,就无需再关心尺寸问题,然后,不论你怎样调整 padding 和 margin,都不会影响面板本身的结构。这是 IE6 盒子模型。
而在 W3C 的盒子模型中,调整 padding 和 margin ,都会影响盒子的尺寸,你在调整内容摆放位置的同时,极有可能打乱面板本身的结构。
2. 百分比级尺寸 像素级边界问题
W3C 盒子模型在设计中最让人头疼的是,假如你有一个不确定宽度的容器,想在里面放置两个同样大小的盒子,最合理的的做法当时是设置每个盒子的宽度为 50%,这样,不管你的容器宽度为多大,这两个盒子总能自动适应这个宽度,然而,前提是你不要设置任何 padding 或 border,而,现实中,为了防止两个盒子中的内容互相挨得太近,你肯定要设置 padding,一旦设置了 padding,就会发现你的容器被撑破了。
当然你会说,每个盒子的宽度不要设为 50%,可以设为 45%,然后为每个盒子再加一个 5% 的 padding,这是一个解决办法,但我们在设计中经常有这样的习惯,虽然一段内容的宽度可能不确定,但我们总喜欢它拥有固定 padding,我们并不希望 padding 自动适应,况且,在很多时候,我们希望为一个自适应宽度的盒子,设置一个 1 像素的 border,在这种情形,W3C 盒子模型将陷入困境。
而遇到这种情形,IE6 盒子模型不需要任何周折,你只管将每个盒子的宽度设置为 50%,它们会自动适应容器的宽度,然后,不管你你怎样设置 padding 和 border,都不会撑破你的容器。
W3C 在盒子模型上迷途知返
虽然 W3C 永远都不会承认,但他们显然意识到了这个问题,重新定义盒子模型是不可能了,所以,在 CSS3 中,我们看到了下面这个属性:
box-sizing
box-sizing 有两个可选值,一个是默认的 content-box 一个是 border-box,选用后者,盒子模型将按 IE6 的方式进行处理。
本文来源:锐商企业CMS 网站内容管理系统 官方网站 (作者:35公里)
更多专业前端知识,请上 【猿2048】www.mk2048.com
IE6 很邪恶,但我爱它的盒子模型相关推荐
- 效果很好的asp.net的数据库访问模型(优化,封装一体化)
效果很好的asp.net的数据库访问模型(优化,封装一体化) 非常有效的数据库/配置文件访问模型.成功使用在几万流量的网站上.任何建议欢迎大家交流. 在使用SqlCommand对象过程中,我们需要分配 ...
- GitHub 上开源了一个很邪恶的项目!女生勿近,18香警告...
这是一个奇葩项目,涂鸦画画,不管你画的什么,系统都会自动为你补全成为一个 丁丁!是的你没有看错,就是你们脑海中想到的那个丁丁! 试玩了一下,随便画了一个圈圈,然后就出来了(你可以理解为是一个蛋)-- ...
- 10倍加速!爱奇艺超分辨模型加速实践
关注公众号,发现CV技术之美 随着终端播放设备的升级,观众对于视频的品质需求也逐步提升.需求从最开始的高清过渡到4K,最近8K也有开始流行的趋势.除了对于分辨率提升的需求之外,视频在采集的过程中,也难 ...
- 很幽默的讲解六种Socket I/O模型C++程序设计
本文简单介绍了当前Windows支持的各种Socket I/O模型,如果你发现其中存在什么错误请务必赐教. 一:select模型 二:WSAAsyncSelect模型 三:WSAEventSelect ...
- 制作爱奇艺视频播放列表(第六章盒子模型)
<div><h2>热播</h2><ul><li><img src="../chapter04/练习4:制作爱奇异视频播放列表 ...
- Linux 是一个适应性很强的平台,支持多种使用模型
M. Tim Jones, 独立作家, 顾问 简介: Linux 无处不在.从最小的智能手机,到 Internet 的虚拟骨干网,再到体积最大.功能最强的超级计算机,Linux 的影子几乎无所不在.能 ...
- 盒子模型之爱奇艺播放列表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 盒子模型阴影设置,爱奇艺阴影配置
box-shadow的配置阴影 ul li:hover{ border-color: #dfdfdf; border-radius: 10px; -moz-box-shadow: 0 5px 5px ...
- html5主要是针对哪方面行优化,前端知识点总结(HTML篇)
ie的某些兼容性问题 IE的兼容性问题 doctype的作用 答案:doctype告诉浏览器它使用了什么文档类型.它指出阅读程序应该用什么 规则集来解释文档中的标记.XHTML中有三种,包括过度型.严 ...
最新文章
- 无需代码即可看视频造游戏!英伟达再现神操作!
- cytocape绘图(三)
- Django项目的创建Django项目的修改配置文件
- GDCM:gdcm::EncapsulatedDocument的测试程序
- 拼多多回应“轩尼诗假酒”案:实际售出3单 9月已关闭店铺
- Netty工作笔记0062---WebSocket长连接开发
- Spring MVC起步(一)
- ios启动私有链查询区块信息
- string 常用函数
- Navicat操作SQL server 2008R2文件.bak文件还原
- java string对象,java中String对象
- 强大的Java辅助类工具箱Hutool
- 迷宫问题(MAZE)
- Ubuntu/Debian安装护眼软件f.lux indicator applet
- 搜狗云输入法,实现原理.
- 如何在Excel 2013中使用公式编辑器
- mysql经典sql语句大全_经典SQL语句大全(sql查询语句大全集锦)
- 计算机机械硬盘寿命,机械硬盘的寿命
- 无所遁形——快把你的口罩戴上(口罩识别)
- 美素将进入中国空间站,以太空科技打造“国货之光”