2021-01-20

最新推荐文章于 2024-06-01 21:43:54 发布

pan_King

最新推荐文章于 2024-06-01 21:43:54 发布

阅读量49

点赞数

本文链接：https://blog.csdn.net/weixin_44686941/article/details/112912170

版权

本文详细介绍了盒模型的两种类型：W3C盒模型和IE盒模型，以及它们在元素尺寸计算上的区别。同时，阐述了浏览器的渲染过程，包括DOM树构建、渲染树构造、布局和绘制四个步骤。此外，还对比了HTML和HTML5在文档声明和语义化标签上的差异，强调了HTML5的语义化优势。

摘要由CSDN通过智能技术生成

盒模型

box-sizing:content-box（W3C盒模型，又名标准盒模型）：元素的宽高大小表现为内容的大小
box-sizing:border-box（IE盒模型，又名怪异盒模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿

浏览器渲染机制

构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node
构建渲染树（construct）：解析对应的CSS样式文件信息
布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标
绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点