css笔记-4 CSS、DOM原理

CSS究竟是怎么工作的

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

关于DOM

  1. 一个DOM有一个树形结构,标记语言中的每一个元素、属性以及每一段文字都对应着结构树的一个节点
  2. DOM案例:
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

在这个DOM中,

元素对应了父节点,它的子节点是一个text节点和三个对应了元素的节点,SPAN节点同时也是他们中的Text节点的父节点。

P
├─ “Let’s use:”
├─ SPAN
| └─ “Cascading”
├─ SPAN
| └─ “Style”
└─ SPAN
└─ “Sheets”
上图就是浏览器怎么解析之前那个HTML片段——它生成上图的DOM树形结构并将它按照如下输出到浏览器:

Let's use: Cascading Style Sheets
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

年中初界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值