标点符 » W3C

IE 6与W3C盒子模型

标点符 — Thu, 17 Jun 2010 15:32:54 +0000

盒子模型（Box Model）是CSS 的核心，简单的说Web 布局设计就是一堆盒子的排列与嵌套，掌握了盒子模型与它们的摆放控制，会发现再复杂的页面也不过如此，然而，任何美好的事物都有缺憾，盒子模型有两种不同的诠释，一种来自IE6，一种来自W3C 标准浏览器。

在内容区外面，依次围绕着 padding 区，border 区，margin 区，这一模型结构在所有主流浏览器都是一致的。通过盒子模型，我们可以为我们的内容设置边界，留白以及边距，盒子模型最典型的应用是这样：我们有一段内容，可以为这段内容设置一个边框，为了让内容不至于紧挨着边框，可以设置 padding ，为了让这个盒子不至于和别的盒子靠得太紧，可以设置 margin。

到目前为止，一切都很完美，直到当我们想为这个盒子设置一个尺寸的时候。IE6 和 W3C 标准浏览器对盒子模型有不同的解释，下图是两种类型的浏览器对盒子尺寸的不同解释示意图：

在现实世界中，我们描述一个物理盒子的时候，如果谈到尺寸，是不会只计算其盛放的物体的尺寸的，我们还会算上空隙与盒体本身。拿集装箱装箱为例，我们有 100 只花瓶，每只花瓶用1个纸盒包装，为了防止花瓶破碎，我们在花瓶周围塞上泡沫，这相当于 padding，纸盒的外围纸板相当于 border，在装集装箱的时候，为了防止纸盒之间相互碰撞，纸盒之间塞上稻草，这相当于 margin，很显然，我们向货运公司报告我们货物尺寸的时候，是要将整个纸盒的尺寸，连同纸盒之间需要塞稻草的空隙都告诉他们的，倘若只报告花瓶的尺寸，货运公司是没有办法装箱的。再举一个例子，假若我们有一面墙，要在上面挂10幅油画，油画是用相框裱糊的，相框的边框相当于 border，油画和边框之间的距离相当于 padding，相框之间的间隔相当于 margin，这个例子和 Web 布局设计已经很接近了，对任何人来说，使用 IE6 的盒子模型，将整个相框，包括油画当做一个整体更容易布局，当你知道了整个相框的尺寸后，不必再去考虑 padding, border, margin 这个因素的影响，每个相框就是一个整体，至于 padding, border 与 margin，这是浏览器自己事，不需要设计者去关心。

在具体 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 的方式进行处理。

原文地址:http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K983.aspx

《超越CSS：Web设计艺术精髓》PDF电子书下载

标点符 — Thu, 23 Jul 2009 04:59:30 +0000

书名：《超越 CSS ：Web设计艺术精髓》

超越CSS简介

此书是CSS 禅意花园的姊妹篇，本书系统、深入地阐释了网站的设计与实现，使读者从设计的角度来使用CSS以达到最完美的效果。作者通过使用标记和CSS的形象的创造性示例，帮助读者掌握实现创意设计的方法。读者将学会如何使用新的设计流程，创建对包括设计师在内的所有团队成员都很好用的原型，有效地使用网格，设计标记的视觉效果，并了解优秀设计过程的每一个阶段——从使用最新的浏览器到在团队协作中高效地应用CSS3。

对于普遍缺乏编程经验的Web设计师来说，语义标记和CSS无疑是实现自由设计的障碍。国际著名Web设计师Andy Clarke将与您分享他的“超越CSS”方法，引导读者从设计的角度来使用CSS，来创建富有艺术性并且可用、易用的站点。作者通过可视化的范例来展示标记和CSS的创造性，带领您掌握实现创意的设计方法。通过此书您将学会：如何使用新的工作流程来创建对所有团队成员都非常好用的原型；有效地使用网格；设计标记的视觉效果；如何把握优秀设计过程的每一个阶段；使用最新的浏览器在团队协作中高效地运用CSS3，等等。

超越CSS目录

1. 发现　
　1.1　超越CSS简介　
　　1.1.1　需要什么样的工具来开始学习　
　　1.1.2　为什么需要超越CSS　
　　1.1.3　尽情地发挥创造力　
　　1.1.4　辅助功能本身就是设计，而不应仅把它当成一个特性　
　　1.1.5　向超越CSS进发　
　1.2　超越CSS原则　
　　1.2.1　不是所有的浏览器都显示相同的设计　
　　1.2.2　运用所有有效的CSS选择符　
　　1.2.3　CSS3：展望未来　
　　1.2.4　运用JavaScript和DOM来弥补CSS的不足　
　　1.2.5　避免运用Hacks和滤镜
　　1.2.6　使用富含语义的命名规范和微型格式　
　　1.2.7　分享你的想法，与他人协作　
　1.3　什么使超越CSS变得可能　
　　1.3.1　意想不到的CSS用途　
　　1.3.2　浏览器分级支持　
　　1.3.3　发现，过程，灵感，超越　
　1.4　突出内容的设计　
　　1.4.1　突出内容的途径　
　　1.4.2　一个典型的没经过优化的CSS布局　
　　1.4.3　优化内容顺序而不管有还是没有样式　
　1.5　语义就是含义　
　　1.5.1　“CSS 裸体日”　
　　1.5.2　将含义翻译成标记：这个标记是正确的　
　　1.5.3　内容告诉你了什么　
　　1.5.4　语义的前行　
　1.6　标记这个世界　
　　1.6.1　整个世界是一个列表；每一项都扮演着它自己的角色　
　　1.6.2　环视四座皆列表　
　　1.6.3　给我寄一张旧金山的hCard 　
　　1.6.4　学会拓宽视野　
　　1.6.5　从“内容”开始工作　
　1.7　是时候整理一下你所学的知识了　
2. 过程　
　2.1　寻找最佳工作流程　
　　2.1.1　寻找更好的方式　
　　2.1.2　遵循基于内容的过程　
　2.2　搜集内容　
　2.3　使用框架图来工作　
　　2.3.1　传统的框架图在哪里会失效　
　　2.3.2　框架图有商业价值吗　
　　2.3.3　传统框架图以及交互脚本　
　2.4　使用灰盒方法改进　
　2.5　创建静态设计　
　　2.5.1　更快地通过设计流程　
　　2.5.2　把标签指南加入静态设计　
　2.6　使用交互原型　
　　2.6.1　交互原型使梦想成真　
　　2.6.2　创建可重用的代码　
　　2.6.3　框架图和原型的模型　
　　2.6.4　所见即所得：你看到了什么　
　2.7　遵循交互原型最佳实践　
　　2.7.1　选择用于开发的浏览器　
　　2.7.2　使用浏览器插件　
　　2.7.3　尽可能少地使用 div 元素　
　　2.7.4　确保标签是有效的　
　　2.7.5　选择定位优先于浮动
　　2.7.6　组织CSS　
　2.8　过程的实践　
　　2.8.1　着眼于组成部分　
　　2.8.2　编写分离内容的标签　
　　2.8.3　用CSS实现静态设计　
　　2.8.4　构建布局　
　　2.8.5　从body开始　
　　2.8.6　继续向前还是移交　
　　2.8.7　基本颜色样式　
　　2.8.8　创建商标　
　　2.8.9　加上Logo　
　　2.8.10　导航条样式　
　　2.8.11　设计页脚样式　
　　2.8.12　理解元素的排版样式　
　2.9　汇总　
3. 灵感　
　3.1　引入基于网格的设计　
　　3.1.1　设计师与网格　
　　3.1.2　黄金比例和三分之一规则　
　　3.1.3　纯粹的弹性布局　
　　3.1.4　合理的网格设计　
　3.2　当今Web设计中的网格　
　　3.2.1　减法　
　　3.2.2　Airbag Industries 　
　　3.2.3　Jeff Croft　
　　3.2.4　Veerle的博客　
　3.3　寻找Web之外的网格　
　3.4　为Web设计带来新的网格　
　　3.4.1　打破新闻　
　　3.4.2　以网格作为指导　
　　3.4.3　揭穿小秘密　
　　3.4.4　着迷于新闻手法　
　　3.4.5　保持你的画面　
　3.5　在意想不到的地方发现灵感　
　　3.5.1　把主页改头换面　
　　3.5.2　引入基调板　
　　3.5.3　拥有一个设计剪贴簿　
　　3.5.4　要获得界面灵感去看杂志吧　
　　3.5.5　获得版式灵感　
　　3.5.6　重新审视Flash设计　
　　3.5.7　使用图片与相片　
　3.6　精美的艺术活动　
　　3.6.1　设计不仅仅是创建引人注目的视觉效果　
　　3.6.2　不要把焦点放在技术上　
　　3.6.3　提升基调　
　　3.6.4　寻找不同观点　
　　3.6.5　带着目标剪贴　
　3.7　Web设计的美术　
4. 卓越　
　4.1　卓越的CSS　
　　4.1.1　绝对定位　
　　4.1.2　相对定位　
　　4.1.3　浮动的创意　
　　4.1.4　创建侧边栏　
　　4.1.5　结合多种技术　
　4.2　CSS3（三倍好运）　
　　4.2.1　各部分的汇总　
　　4.2.2　开发新的标准　
　　4.2.3　回到未来　
　　4.2.4　使用CSS3选择符模块进行设计　
　　4.2.5　使用斑马纹提高可读性　
　　4.2.6　使用背景和边框模块进行设计　
　　4.2.7　使用多幅背景图片进行设计　
　　4.2.8　设计多栏布局　
　　4.2.9　使用多栏布局模块　
　4.3　高级布局　
　　4.3.1　回到网格（Grid）　
　　4.3.2　使用高级布局模块进行设计　
　4.4　结束语

下载地址（电驴）：超越CSS：Web设计艺术精髓（扫描版PDF），超越CSS英文原版（清晰版PDF），随书附带源代码。

《超越CSS》大米盘下载：http://www.damipan.com/file/3IqAwIt.html

《CSS禅意花园》中文版PDF电子书下载

标点符 — Wed, 22 Jul 2009 05:30:40 +0000

书名：CSS 禅意花园 the zen of css design

CSS禅意花园简介：CSS Zen Garden（CSS禅意花园），全书分为两个主要部分。第一章为第一部分，讨论网站“CSS禅意花园”及其最基本的主题，包含准确的标记结构和灵活性的规划等。第二部分分为六章，占据了本书的大部门篇幅。每章剖析“CSS禅意花园”收录的6件设计作品，每件作品围绕一个主要的设计概念展开，如文字的使用等。通过探索6件设计作品面对的挑战和解决的问题，读者将洞悉主要的Web设计原则以及它们运用的CSS布局技巧，理解CSS设计的精华，恰当地处理图形和字体来创建界面柔美、机能优良且具有强盛生命力的网站。本书原版书自出版以来持续畅销，受到众多网站设计师的推崇。本书适合网站设计职员和网站设计兴趣者阅读，更是专业网站设计师必读的经典著作。

CSS禅意花园目录：
第1章追本溯源
第2章设计
2.1 Atlantis
2.2 Zunflower
2.3 Springtime
2.4 Viridity
2.5 Ballade
2.6 Night Drive
第3章正文布局
3.1 Backyard
3.2 Entomology
3.3 White Lily
3.4 pret-a-proter
3.5 CS（S）Monk
3.6 Not So Minimal
第4章图像
4.1 Japanese Garden
4.2 Revolution！
4.3 Deco
4.4 No Frontiers！
4.5 Coastal Breeze
4.6 What Lies Beneath
第5章文字排印
5.1 Oceans Apart
5.2 si6
5.3 Release One
5.4 Dead or Alive
5.5 Blood Lust
5.6 Golden Mean
第6章特效
6.1 This is Cereal
6.2 Gemination
6.3 Bonsai Sky
6.4 Tulipe
6.5 door to my garden
6.6 Elastic Lawn
第7章重构
7.1 Hedges
7.2 Radio Zen
7.3 South of the Border
7.4 Corporate Zen Works
7.5 Open Window
7.6 mnemonic
结语