全面解析：HTML页面的加载全过程(五）--浏览器渲染之布局Layout

理解一些概念：

盒子模型

页面中的所有元素都被看作一个矩形盒子

内边距（padding)是内容区周围的空间。

边框(border)会在内边距外侧增加一条框线，这条框线可以是实线、虚线或点划线。

外边距(margin)，外边距是围绕在盒子可见部分之外的透明区域，用于在页面中控制元素之间的距离。
轮廓线(outline)，可以在边框盒子外围画出一条线，但这条线不影响盒子的布局，也就是不会影响盒子的宽度和高度。

在这里插入图片描述

盒子大小

默认情况下，元素盒子的width和height属性指的是内容盒子，也就是元素可渲染内容区的宽度和高度。

box-sizing的默认值为content-box（内容盒子），width和height属性的值将会给到内容区。–标准盒子模型
box-sizing的值修改为border-box（边框盒子），那么width和height属性的值将会包含内边距、边框和内容区。–怪异盒子模型

块盒（块级元素）与行盒（行级元素）

1、块级元素：p、h1和article这些元素都是。它们作为元素，显示为内容块或块级盒子(block box)的形式。

特点：
块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由它们的上、下外边距决定。

2、行级元素：strong、span，因为它们的内容会以行内盒子(inline box)的形式显示在行内。
特点： 
行内盒子是沿文本流水平排列的，也会随文本换行而换行。
它们之间的水平间距可以通过水平方向的内边距、边框和外边距来调节。
行内盒子的高度不受其垂直方向上的内边距、边框和外边距的影响，所以行内盒子明确设置高度和宽度也不会起作用。

3、display属性：改变生成的盒子类型。
（1）display属性设置为block，让span变得跟块级元素一样。
（2）display属性设置为none，让浏览器不为相应的元素生成盒子。不生成盒子，元素及其包含的内容就不会显示出来，也不会占用文档中的空间。
（3）display属性设置为inline-block。元素就会像一个行内盒子一样水平排列，同时像块级元素一样，能够设置宽度、高度、垂直外边距和内边距。

匿名块盒与匿名行内盒

1、匿名块盒

匿名块盒（Anonymous block box）是一类特殊的盒子，它们没有名字，不能用CSS选择符选中，因此无法直接通过CSS进行样式设置。匿名块盒的所有可继承的CSS属性值都为inherit，而所有不可继承的CSS属性值都为initial。

产生情况

（1）当块容器盒子同时包含块级元素和行内级元素时，CSS引擎会在相邻的行内级元素外创建匿名块盒来包裹这些行内级元素。
（2）当行内级盒子中包含块级盒子时，CSS引擎会拆分这个行内级盒子，并在拆分后的部分之间创建匿名块盒来包裹剩余的行内级内容。

举例：

<div>Some inline text<p>followed by a paragraph</p>followed by more inline text.
</div>

<div>是一个块容器盒子，它同时包含了行内文本和块级元素<p>。

CSS引擎会在“Some inline text”和<p>元素之间，以及<p>元素和“followed by more inline text.”之间创建匿名块盒来包裹这些行内文本。后面布局会进一步说明。

2、匿名行内盒

匿名行内盒（Anonymous inline box）：是指在HTML文档中，当文本或其他行内内容没有被任何行内元素（如<span>、<a>、<strong>等）包裹时，CSS引擎会自动为这些内容生成一个或多个匿名行内盒子，以便进行布局和渲染。

举例：

<p>Some <em>emphasized</em> text and more text.
</p>

<p>是一个块级元素，它包含了一些行内内容。其中，“Some ”和“ text and more text.”是文本内容，它们没有被任何行内元素包裹。因此，CSS引擎会自动为这些内容生成匿名行内盒子：

  • “Some ”会生成一个匿名行内盒子。
  • <em>emphasized</em>是一个行内元素，它不会生成匿名行内盒子。
  • “ text and more text.”会生成另一个匿名行内盒子。

在行内格式化上下文中，这些匿名行内盒子会与<em>元素一起进行布局和渲染，确保文本内容能够按照预期的方式显示。

BFC详解

BFC（Block Formatting Contexts），即块级格式化上下文，是W3C CSS2.1规范中的一个“概念”。注意是概念。

指的是浏览器中创建的一个独立的渲染区域，并且拥有一套渲染规则，这套规则决定了其子元素如何定位，以及与其他元素的相互关系和作用

BFC特性
  • 独立性：BFC内部的元素布局与外部元素无关，外部的布局也不会影响到BFC内部。
  • 浮动元素包裹：浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。
  • 垂直边距不重叠：在BFC中，两个相邻的块级元素的垂直边距不会发生重叠。
  • 包含浮动元素：BFC在计算高度时会包含内部的浮动元素，从而避免父元素高度塌陷的问题。
BFC的形成条件

一个元素满足以下条件之一，就会生成BFC：

  • 根元素（<html>）。
  • 浮动元素（float属性值不是none）。
  • 绝对定位元素（position属性值为absolute或fixed）。
  • display属性值为inline-block、table-cell、table-caption、flex、inline-flex的元素。
  • overflow属性值为auto、hidden、scroll的元素。
BFC应用场景：
例子一：清除浮动

当一个容器内部包含浮动元素时，该容器的高度可能会塌陷，因为它不包含浮动元素的高度。通过给容器添加一个overflow: hidden;样式，可以触发容器的BFC，使其包含浮动元素的高度，从而清除浮动导致的高度塌陷问题。

<div class="container"><div class="float-left">浮动元素</div>
</div>

.container {overflow: hidden; /* 触发BFC */border: 1px solid #000;
}.float-left {float: left;width: 100px;height: 100px;background-color: lightblue;
}
例子二：解决外边距重叠问题

在CSS中，垂直方向上的相邻块级元素的外边距可能会发生重叠。通过给其中一个元素创建BFC，可以阻止外边距的重叠。

<div class="box1"></div>
<div class="box2"></div>

.box1 {margin-bottom: 20px;height: 100px;background-color: lightgreen;
}.box2 {overflow: hidden; /* 触发BFC */margin-top: 30px;height: 100px;background-color: lightcoral;
}

在这个例子中，.box1和.box2的垂直外边距原本会重叠，但由于.box2触发了BFC，因此它们的外边距不会重叠，.box2会出现在.box1下方30px的位置。

例子三：自适应两栏布局

通过给两栏布局中的其中一栏创建BFC，可以实现自适应两栏布局。其中一栏的宽度固定，另一栏的宽度自适应。

<div class="left">左栏</div>
<div class="right">右栏</div>

.left {float: left;width: 200px;height: 200px;background-color: lightblue;
}.right {overflow: hidden; /* 触发BFC */height: 200px;background-color: lightgreen;
}

布局

有了 DOM 树和 DOM 树中元素的计算样式后，浏览器会根据这些信息合并成一个 layout 树，

收集所有可见的 DOM 节点，以及每个节点的所有样式信息。

根据 DOM 树里每个节点的样式，计算出每个节点的尺寸和位置。

在这里插入图片描述

布局生成原理

Layout 树和 DOM 树不一定是一一对应的，为了构建 Layout 树，浏览器主要完成了下列工作：

1、遍历 DOM 树：从 DOM 树的根节点开始遍历每个可见节点。

  • 某些不可见节点（例如 script、head、meta 等），它们不会体现在渲染输出中，会被忽略。

  • 某些通过设置 display 为 none 隐藏的节点，在渲染树中也会被忽略。

    布局树是记录节点的几何信息(尺寸和位置)的，如果设置了display: none;，则节点失去几何信息，不会被添加到布局树中

    在这里插入图片描述

  • 伪元素节点不存在于DOM树中，但是有几何信息，因此会被生成到布局树中。

在这里插入图片描述

  • w3c规定：

    • 内容必须在行盒中
    • 行盒和块盒不能相邻

    如果在块盒中直接写入内容，则会在中间生成一个匿名行盒；

    如果块盒和行盒相邻，则为行盒外部生成一个匿名块盒。

在这里插入图片描述

  • 2、创建布局树节点：浏览器为每个可见元素创建一个布局树节点，这个节点包含了元素的基本信息，如元素的 ID、类名、样式等。
  • 3、建立父子关系：浏览器建立布局树节点之间的父子关系，确保每个元素的布局信息与其父元素和子元素的布局信息保持一致。

布局计算—重排 Reflow

重要理解：

  • 布局 是首次确定渲染树中所有节点的尺寸和位置，以及确定页面上每个对象的大小和位置的过程。
  • 重排 是后续过程中对页面的任意部分或整个文档的大小和位置的重新计算

当DOM（文档对象模型）的变化影响了元素的几何信息（如元素的位置和尺寸大小）时，浏览器需要重新计算元素的几何属性，并将其安放在界面中的正确位置。‌

1、什么情况会触发重排？

  • 页面初始渲染。
  • 添加或删除可见的DOM元素。
  • 元素位置的改变，或者使用动画。
  • 改变元素尺寸，比如边距、填充、边框、宽度和高度等。
  • 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变。
  • 浏览器窗口尺寸的变化（resize事件发生时）。
  • 设置style属性的值，因为通过设置style属性改变节点样式的话，每一次设置都会触发reflow。

2、减少重排的策略策略有哪些？

  • 减少直接操作DOM元素：尽量使用className来控制样式，而不是直接修改style属性。
  • 避免使用table：因为table属性的变化可能会导致布局重排或重绘。
  • 使用CSS3动画代替JavaScript动画：因为CSS3动画不会触发重排。
  • 避免在循环中操作DOM：把DOM节点的属性值放在一个循环里当成循环里的变量可能会引发重排。
  • 使用DocumentFragment：如果需要创建多个DOM节点，可以先使用DocumentFragment创建完，然后一次性地加入document，这样可以减少重排的次数。
  • 使用display: none隐藏元素：当对父盒子进行操作前，先使用display: none隐藏它，等所有的操作完成后，再将这个父盒子显示出来。这样，中间的操作都不会造成重排。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/60723.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AI 驱动的个性化推荐系统设计

AI 驱动的个性化推荐系统设计

文章目录 摘要引言推荐系统的核心原理推荐系统的类型个性化推荐中的挑战 基于协同过滤的推荐系统设计设计流程系统架构设计 示例代码模块1&#xff1a;数据准备模块2&#xff1a;相似度计算模块3&#xff1a;推荐生成模块4&#xff1a;整体调用与展示 QA 环节总结参考资料 摘要…
阅读更多...
基于springboot + vue-element-plus-admin开发的MES系统源码，制造执法系统MES源码；支持app，小程序，H5，后台

基于springboot + vue-element-plus-admin开发的MES系统源码，制造执法系统MES源码；支持app，小程序，H5，后台

MES系统&#xff08;Manufacturing Execution System&#xff0c;制造执行系统&#xff09;的生产计划管理功能是其核心功能之一&#xff0c;旨在将企业的生产计划转化为实际的生产操作&#xff0c;并通过实时监控和调整来确保生产活动的顺利进行。 MES系统技术栈&#xff1a;…
阅读更多...
Java后端如何进行文件上传和下载 —— 本地版

Java后端如何进行文件上传和下载 —— 本地版

简介&#xff1a; 本文详细介绍了在Java后端进行文件上传和下载的实现方法&#xff0c;包括文件上传保存到本地的完整流程、文件下载的代码实现&#xff0c;以及如何处理文件预览、下载大小限制和运行失败的问题&#xff0c;并提供了完整的代码示例。 大体思路 1、文件上传 …
阅读更多...
深入理解结构化学习：从结构化感知器到条件随机场

深入理解结构化学习：从结构化感知器到条件随机场

摘要 结构化学习是一类能够处理复杂输出空间问题的机器学习方法&#xff0c;被广泛应用于自然语言处理、图像分析等领域。本文将从三个经典模型——结构化感知器、隐马尔可夫模型 (HMM) 和条件随机场 (CRF) 入手&#xff0c;详细解析其理论基础、算法实现及应用案例&#xff0c…
阅读更多...
C#基础题总结

C#基础题总结

16.一张单据上有一个5位数的号码为6**42&#xff0c;其中百位数和千位数已模糊不清&#xff0c;但知道该数能被 57 和 67 除尽。设计一个算法&#xff0c;找出该单据所有可能的号码。 17.编程序求2&#xff5e;10000以内的完全数。一个数的因子&#xff08;除了这个数本身&…
阅读更多...
Docker3：docker基础1

Docker3：docker基础1

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…
阅读更多...
详细探索xinput1_3.dll：功能、问题与xinput1_3.dll丢失的解决方案

详细探索xinput1_3.dll：功能、问题与xinput1_3.dll丢失的解决方案

本文旨在深入探讨xinput1_3.dll这一动态链接库文件。首先介绍其在计算机系统中的功能和作用&#xff0c;特别是在游戏和输入设备交互方面的重要性。然后分析在使用过程中可能出现的诸如文件丢失、版本不兼容等问题&#xff0c;并提出相应的解决方案&#xff0c;包括重新安装相关…
阅读更多...
Golang项目：实现一个内存缓存系统

Golang项目：实现一个内存缓存系统

要求 支持设定过期时间&#xff0c;精确到秒支持设定最大内存&#xff0c;当内存超过时做出合适的处理支持并发安全按照以下接口安全 type Cache interface{//size : 1KB 100KB 1MB 2MB 1GBSetMaxMemory(size string )bool//将value写入缓存Set(key string, val interface{},e…
阅读更多...
计算机网络复习笔记（湖科大教书匠）

计算机网络复习笔记（湖科大教书匠）

课程链接&#xff1a;【计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;】 https://www.bilibili.com/video/BV1c4411d7jb/?p61&share_sourcecopy_web&vd_sourcecd12864239c2976e9f2bce4b307393f0 一、基础概念 信息交换方式 电路交换 电话交换机接通…
阅读更多...
C语言菜鸟入门·关键字·int的用法

C语言菜鸟入门·关键字·int的用法

目录 1. int关键字 1.1 取值范围 1.2 符号类型 1.3 运算 1.3.1 加法运算() 1.3.2 减法运算(-) 1.3.3 乘法运算(*) 1.3.4 除法运算(/) 1.3.5 取余运算(%) 1.3.6 自增()与自减(--) 1.3.7 位运算 2. 更多关键字 1. int关键字 int 是一个关键字&#xff0…
阅读更多...
神经网络（系统性学习三）：多层感知机（MLP）

神经网络（系统性学习三）：多层感知机（MLP）

相关文章&#xff1a; 神经网络中常用的激活函数 神经网络&#xff08;系统性学习一&#xff09;&#xff1a;入门篇 神经网络&#xff08;系统性学习二&#xff09;&#xff1a;单层神经网络&#xff08;感知机&#xff09; 多层感知机&#xff08;MLP&#xff09; 多层感…
阅读更多...
Vue——响应式数据，v-on，v-bind，v-if，v-for(内含项目实战)

Vue——响应式数据，v-on，v-bind，v-if，v-for(内含项目实战)

目录 响应式数据 ref reactive 事件绑定指令 v-on v-on 鼠标监听事件 v-on 键盘监听事件 v-on 简写形式 属性动态化指令 v-bind iuput标签动态属性绑定 img标签动态属性绑定 b标签动态属性绑定 v-bind 简写形式 条件渲染指令 v-if 遍历指令 v-for 遍历对象的值 遍历…
阅读更多...
蓝桥杯c++算法秒杀【6】之动态规划【上】（数字三角形、砝码称重(背包问题)、括号序列、组合数问题：：：非常典型的必刷例题！！！）

蓝桥杯c++算法秒杀【6】之动态规划【上】（数字三角形、砝码称重(背包问题)、括号序列、组合数问题：：：非常典型的必刷例题！！！）

下将以括号序列、组合数问题超级吧难的题为例子讲解动态规划 别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01;! ! ! ! &#xff01; 关注博主&#xff0c;更多蓝桥杯nice题目静待更新:) 动态规划 一、数字三角形 【问题描述】 上图给出了一…
阅读更多...
YOLO-FaceV2: A Scale and Occlusion Aware Face Detector

YOLO-FaceV2: A Scale and Occlusion Aware Face Detector

《YOLO-FaceV2:一种尺度与遮挡感知的人脸检测器》 1.引言2.相关工作3.YOLO-FaceV23.1网络结构3.2尺度感知RFE模型3.3遮挡感知排斥损失3.4遮挡感知注意力网络3.5样本加权函数3.6Anchor设计策略3.7 归一化高斯Wasserstein距离 4.实验4.1 数据集4.2 训练4.3 消融实验4.3.1 SEAM块4…
阅读更多...
【SQL Server】华中农业大学空间数据库实验报告 实验三 数据操作

【SQL Server】华中农业大学空间数据库实验报告 实验三 数据操作

1.实验目的 熟悉了解掌握SQL Server软件的基本操作与使用方法&#xff0c;以及通过理论课学习与实验参考书的帮助&#xff0c;熟练掌握使用T-SQL语句和交互式方法对数据表进行插入数据、修改数据、删除数据等等的操作&#xff1b;作为后续实验的基础&#xff0c;根据实验要求重…
阅读更多...
【Elasticsearch入门到落地】2、正向索引和倒排索引

【Elasticsearch入门到落地】2、正向索引和倒排索引

接上篇《1、初识Elasticsearch》 上一篇我们学习了什么是Elasticsearch&#xff0c;以及Elastic stack(ELK)技术栈介绍。本篇我们来什么是正向索引和倒排索引&#xff0c;这是了解Elasticsearch底层架构的核心。 上一篇我们学习到&#xff0c;Elasticsearch的底层是由Lucene实…
阅读更多...
【Spring Boot】# 使用@Scheduled注解无法执行定时任务

【Spring Boot】# 使用@Scheduled注解无法执行定时任务

1. 前言 在 Spring Boot中&#xff0c;使用Scheduled注解来定义定时任务时&#xff0c;定时任务不执行&#xff1b;或未在规定时间执行。 import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component;Component public c…
阅读更多...
STM32总体架构简单介绍

STM32总体架构简单介绍

目录 一、引言 二、STM32的总体架构 1、三个被动单元 &#xff08;1&#xff09;内部SRAM &#xff08;2&#xff09;内部闪存存储器 &#xff08;3&#xff09;AHB到APB的桥&#xff08;AHB to APBx&#xff09; 2、四个主动&#xff08;驱动&#xff09;单元 &#x…
阅读更多...
C# Postman或者PostApi调试前端webapi接口发送带有request/body/head信息

C# Postman或者PostApi调试前端webapi接口发送带有request/body/head信息

知识&#xff1a; 前端接口&#xff0c;表单形式提交。 req.ContentType "application/x-www-form-urlencoded"; x-www-form-urlencoded 是一种常见的 MIME 类型&#xff0c;用于将键值对编码为 HTTP 请求体中的 URL 编码格式。在 Web API 中&#xff0c;x-www-for…
阅读更多...
李宏毅机器学习课程知识点摘要（1-5集）

李宏毅机器学习课程知识点摘要（1-5集）

前5集 过拟合&#xff1a; 参数太多&#xff0c;导致把数据集刻画的太完整。而一旦测试集和数据集的关联不大&#xff0c;那么预测效果还不如模糊一点的模型 所以找的数据集的量以及准确性也会影响 由于线性函数的拟合一般般&#xff0c;所以用一组函数去分段来拟合 sigmoi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023