CSS是如何工作的(来自MDN)

10 篇文章 0 订阅
5 篇文章 0 订阅

基本步骤

  1. 浏览器载入HTML文件(比如从网络上获取)。
  2. 将HTML文件转化成一个DOM(Document Object Model),DOM是文件在计算机内存中的表现形式。
  3. 接下来,浏览器会拉取该HTML相关的大部分资源,比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理。
  4. 浏览器拉取到CSS之后会进行解析,根据选择器的不同类型(比如element、class、id等等)把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器,将不同的规则(基于选择器的规则,如元素选择器、类选择器、id选择器等)应用在对应的DOM的节点中,并添加节点依赖的样式(这个中间步骤称为渲染树)。
  5. 上述的规则应用于渲染树之后,渲染树会依照应该出现的结构进行布局。
  6. 网页展示在屏幕上(这一步被称为着色)。
    在这里插入图片描述

当浏览器遇到无法解析的CSS代码会发生什么

如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值,它会忽略这些并继续解析下面的CSS声明。在你书写了错误的CSS代码(或者误拼写),又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生(直接忽略)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值