CSS2中的盒模型是关系到我们排版定位的关键，例如<div>就遵循盒模型规范。盒模型定义的margin，background-color，background-image，padding ，content，border，初学者经常会搞不清楚它们之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

原图出自：hicksdesign

需要说明的是：IE和Mozilla浏览器对盒模型的解释不一致，造成我们定位上的困难，主要差别是：

• IE计算2个div之间的距离时候，会把1px的border计算在内，而mozilla没有；
• 设定div的宽度后，如果给padding加一个值，IE会在宽度内减去这个值，而M ozilla会在宽度基础上加上这个值。
• 五、w3c技术架构介绍
  原文：http://www.w3.org/Consortium/technology
  原作者：w3c
  翻译：阿宏
  

  

  
  图例说明
  W3C技术架构图描绘了一个两层的模型：万维网体系结构（被标注为“One Web”）建立在互联网(Interner)体系结构之上。图中丰富的Web层显示了W3C关心的领域和发展的技术。

  Web体系结构被描绘成一系列的层，每一层都建立在另一层之上。从底至顶依次为：

   

  • URI/IRI, HTTP
  • Web Architectural Principles
  • XML Infosets; RDF(S) Graphs
  • XML, Namespaces, Schemas, XQuery/XPath, XSLT, DOM, XML Base, XPointer, RDF/XML, SPARQL

  
  在顶层包含着六个框，分别与W3C主要的活动组相对应：Web Applications, Mobile, Voice, Web Services, Semantic Web, and Privacy。

   

  • "Interaction"（“交互”）框中罗列着：XHTML, SVG, CDF, SMIL, XForms, CSS, 和 WCID.
  • "Mobile"（“移动”）框中罗列着 XHTML Basic, Mobile SVG, SMIL Mobile, XForms Basic, CSS Mobile, MWI BP.
  • "Voice"（“语音”）框中罗列着 VoiceXML, SRGS, SSML, CCXML, and EMMA
  • "Web Services"（“Web服务”）框中罗列着 SOAP, XOP, WSDL, WS-CDL, and WS-A.
  • "Semantic Web"（“语义的Web”）框中罗列着 OWL, SKOS, and RIF.
  • "Privacy"（“保密”）框中罗列着 P3P, APPEL, XML Encryption, XML Signature, and XKMS

  
  一个橙色的横条把这些领域联系在一起：Web Accessibility（Web可访问性）, Internationalization（国际化）, Mobile Access（移动访问）, Device Independence（设备独立）, and Quality Assurance（质量保证）。

  这个例图展示了万维网的基础框架及 W3C 的工作重点 。

  URI、HTTP、XML 和 RDF 的基础支持著五个方面的工作。无障碍网页、国际化、设备无关和质量管理等主题已融入了 W3C 的各项技术之中。

  W3C正致力把万维网从最初的设计 (基本的 HTML、URIs 和 HTTP) 转变为未来所需的模式。 W3C 的技术将帮助未来万维网成为信息世界中有高稳定性、可提升和强适应性的基础框架。