您现在的位置是:首页 > IT分类 > html+js网站首页html+jsCSS工作原理

CSS工作原理

  • 蓝天
  • html+js
  • 2020-08-21 11:23:20
简介HTML 代码和 CSS 代码共同构成了风格迥异的网页,HTML 代码定义了网页的框架与内容,CSS 则可以赋予网页独一无二的样式,那么,浏览器是如何处理 CSS 代码,将网页渲染成我们想要的结
HTML 代码和 CSS 代码共同构成了风格迥异的网页,HTML 代码定义了网页的框架与内容,CSS 则可以赋予网页独一无二的样式,那么,浏览器是如何处理 CSS 代码,将网页渲染成我们想要的结果的?DmI蓝天个人博客-一个自学的好博客
DmI蓝天个人博客-一个自学的好博客
简而言之,浏览器处理文件的标准流程是这样的:DmI蓝天个人博客-一个自学的好博客
DmI蓝天个人博客-一个自学的好博客
1、浏览器载入 HTML 文件(比如从网络上获取)。DmI蓝天个人博客-一个自学的好博客
2、将 HTML 文件转化成一个DOM(Document Object Model),DOM是文件在计算机内存中的表现形式。DmI蓝天个人博客-一个自学的好博客
3、接下来,浏览器会拉取该 HTML 相关的大部分资源,比如嵌入到页面的图片、视频和 CSS 样式。DmI蓝天个人博客-一个自学的好博客
4、浏览器拉取到 CSS 之后会进行解析,根据选择器的不同类型(比如element、class、id等等)把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器,将不同的规则(基于选择器的规则,如元素选择器、类选择器、id选择器等)应用在对应的DOM的节点中,并添加节点依赖的样式(这个中间步骤称为渲染树)。DmI蓝天个人博客-一个自学的好博客
5、上述的规则应用于渲染树之后,渲染树会依照应该出现的结构进行布局。DmI蓝天个人博客-一个自学的好博客
6、网页展示在屏幕上(这一步被称为着色)。

转载: 感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.along168.cn”。

文章评论

联系方式