四、CSS2盒模型的3D示意图
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 的技术将帮助未来万维网成为信息世界中有高稳定性、可提升和强适应性的基础框架。