css样式部分（1）

1、border-sizng你用过吗？它的属性值分别有哪些？他们的作用是什么？标准w3c下的盒模型和ie下的盒模型有什么区别？

（1）box-sizing: content-box|border-box|inherit;

border-sizing有三个属性值，它们分别是content-box，border-box以及inherit。

（2）其中content-box的作用是使得页面上拥有此属性值的dom元素按照ie下的盒模型绘制此区域的页面，它的内边距、边框和外边距将融为一体，即整个元素的宽度只包括两部分：即content和margin，不再存在padding和border；border-box的作用时使得页面上拥有此属性值的dom元素按照标准w3c下的盒模型绘制次区域的页面，即整个元素的宽度由内到外包括四部分：content，padding，border，margin；inherit属性值的作用是拥有此属性值的dom元素按照父级元素的 绘制方式绘制页面，如果父级元素的属性值为content-box，那么它继承这个属性。

（3）区别：标准w3c的盒模型是目前最为流行的盒模型，组成=content+margin+border+padding，而ie下的盒模型又称怪异盒模型，组成=content+margin。

 

2、网页是如何在客户端渲染？

网页文档在下载完毕所有的资源后，按照从上到下的顺序解析执行，但是在head标签里面嵌入的js文件和css文件不会立即执行，反而去解析body标签里面的内容，如果body里面含有js代码，该代码会被立即解析执行。当文档被完全加载完毕之后会触发DomContentLoaded事件，无需等待css样式、图片等资源完成,，即这一过程为构建页面dom结构的过程。然后浏览器回去下载在body标签内嵌入的js文件和css文件以等资源，假如script标签里面的defer值为defer，那么按照从上到下的顺序进行下载，如果defer值为async，则下载顺序不分先后。这一过程是外部资源加载解析的过程，完成后会触发onLoad事件。值得注意的是，在css文件被解析的时候，因为不同的浏览器对css样式的支持不一样，所以css的渲染是渐进式增强或者优雅式降级，即先采用最基础的浏览器性能的配置，然后升级到浏览器所能支持的最高性能模式。或者采用最高标准的模式去加载页面，慢慢降级到适合文档的最佳标准。