w3c标准（w3c标准盒模型）-微PE WEIPE.NET

一、w3c标准的概念

1.W3C（World Wide Web Consortium），是全球性的网络标准化技术组织，成立于1994年，由网景公司（Netscape）创始人Tim Berners-Lee 先生建立。主要任务是消除不必要的技术壁垒，按照标准规范为互联网的发展提供支持。

2.w3c标准的主要努力集中于制订适应技术发展的网络标准，以及针对不同浏览器实现的标准。W3C标准的核心均建立在HTML、XML、CSS及JavaScript等技术，旨在实现一种语言在网络上可被众多软件系统所识别，实现跨浏览器跨平台的内容交互。

3.W3C标准及相关知识点，可分为以下几大方面：

（1）HTML—超文本标记语言；

（2）CSS—层叠样式表；

（3）JavaScript—客户端脚本语言；

（4）XML—可扩展标记语言；

（5）DOM—文档对象模型；

（6）SVG—可缩放矢量图；

（7）XSLT—可扩展样式表转换语言；

（8）WEB API—用于客户端编程的API；

（9）WAI—Web 访问性建议；

（10）HTTP—超文本传输协议；

（11）Web Font—可跨网站使用的字体。

二、w3c标准的重要性

1.w3c标准对网页标准化是至关重要的，旨在让网页设计和内容让所有用户都能以一致的方式使用它们，给网站开发带来很大便利。

2.通过w3c标准，可以让网页在不同的浏览器环境中保持一致的表现，使用w3c标准以后，用户浏览同一网页会出现完全相同的内容，令人喜悦，这种技术标准化能够让网页设计更加简单便捷。

3.另外，w3c标准也能够有效提升网站的访问速度，使网页更加流畅，令用户体验更佳。通过实行标准，使网页在不同的浏览器环境中具有更好的统一性，从而大大提高网站代码的效率性，减少可能的网络开销。

4.此外，w3c标准还标志着一种创新，推动了互联网世界的发展，有助于突破技术壁垒，提高网页的技术水平，让网络更加普及，让更多的用户可以更好的使用网络。

5.最后，w3c标准是一项持续性的进步，它的必要性更具可见性，在保障网页技术发展和应用的同时，也让Web标准不断得到升级，成为一种持续更新的状态。

一、w3c标准盒模型

1、什么是w3c标准盒模型：w3c标准盒模型（即CSS Box Model）是W3C组织发布的CSS（Cascading Style Sheets）的标准规范。该规范把HTML元素的上下左右四个方向，划分为五个重要属性：content（内容）、padding（内边距）、border（边框）、margin（外边距）和outline（轮廓）。

2、内容宽度：具体而言，在标准盒模型中，HTML元素的width属性定义的是元素的内容宽度（content width），而非元素的总宽度（element width）。将元素的内容宽度与border（边框）的宽度、padding（内边距）的宽度、margin（外边距）的宽度加起来，才等于元素的总宽度。

3、内边距：在CSS标准盒模型中，padding（内边距）属性可以让元素的内容与元素的边框隔离，换句话说，padding属性允许我们规定元素中内容和边框之间的距离。而且在CSS标准盒模型中，padding（内边距）的宽度值是另外加到元素总宽度中的。

4、边框：CSS标准盒模型把HTML元素的上下左右四个方向，划分为五个重要属性中的第四个属性：border（边框）。当把内边距的宽度与元素的总宽度加起来，元素的统一子总宽度的最外侧，就是边框（border）的所在位置，也是border的几何形心所在位置。

5、外边距：CSS标准盒模型把HTML元素的上下左右四个方向，划分为五个重要属性中的第五个属性：margin（外边距）。Margin（外边距）属性定义元素与元素之间的空白距离，是指两个具有margin（外边距）属性的元素之间的距离，而非元素内容与边界框之间的距离。

6、轮廓：CSS标准盒模型把HTML元素的上下左右四个方向，划分为五个重要属性中的第五个属性：Outline（轮廓）。Outline（轮廓）属性有着和border（边框）非常相似的作用，即为元素定义了一条线并给元素各个部分加上线条，但Outline和Border最大的区别在于，它不占用任何空间，不会对元素的尺寸产生任何影响，因此，在css标准盒模型中没有outline（轮廓）的宽度。

二、总结

w3c标准盒模型（CSS Box Model）是W3C组织发布的CSS（Cascading Style Sheets）的标准规范。该规范把HTML元素的上下左右四个方向，划分为五个重要属性：content（内容）、padding（内边距）、border（边框）、margin（外边距）和outline（轮廓）。width属性定义的是元素的内容宽度（content width），而非元素的总宽度（element width）。padding（内边距）属性可以让元素的内容与元素的边框隔离；border（边框）的宽度另外加到元素总宽度中；而margin（外边距）属性定义元素与元素之间的空白距离；outline（轮廓）属性有着和border（边框）非常相似的作用，但是在css标准盒模型中没有outline（轮廓）的宽度。