来自 Web前端 2020-04-15 19:53 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

Web布局:display属性

时间: 2019-09-25阅读: 402标签: 布局

大家好,我是IT修真院上海分院第01期学员,一枚正直善良的web程序员。

经过 CSS盒模型 和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子) 。而其中CSS的 display 属性又可以显式的修改每个盒子的视觉格式化模型,比如说从 行内级盒子 变成 块级盒子 。那在这一章节中,我们就来一起探讨CSS的 display属性,该属性也是学习CSS不可或缺的属性之一。

今天给大家分享一下,修真院官网 CSS任务中可能会使用到的知识点:

display的基本介绍

浏览器如何渲染页面

CSS的display属性在W3C规范中是一个独立的模块,即 CSS Display Module Level 3。该模块描述如何从文档树(DOM树)生成CSS树(CSSOM树),并定义了如何使用display属性来控制CSSOM。比如我们一个类似下面这样的一个HTML文档:

一、背景介绍

!DOCTYPE htmlhtml head meta name="viewport" content="width=device-width,initial-scale=1" link href="style.css" rel="stylesheet" titleCritical Path/title /head body pHello spanweb performance/span students!/p divimg src="awesome-photo.jpg"/div /body/html

浏览器渲染页面的大致过程:

该文档结构很简单,只包含了一些文本和一幅图片。如果你了解如何的渲染原理的话,能了解得到,浏览器大概是像下面这样处理该HTML页面:

从浏览器地址栏的请求链接开始,浏览器通过DNS解析查到域名映射的IP地址,成功之后浏览器端向此IP地址取得连接,成功连接之后,浏览器端将请求头信息 通过HTTP协议向此IP地址所在服务器发起请求,服务器接受到请求之后等待处理,最后向浏览器端发回响应,此时在HTTP协议下,浏览器从服务器接收到 text/html类型的代码,浏览器开始显示此html,并获取其中内嵌资源地址,然后浏览器再发起请求来获取这些资源,并在浏览器的html中显示

忽略其他部分,此处只关注DOM构建这部分。

二、知识刨析

由于HTML标记定义了不同标记(标记指的是HTML的元素标签)之间的关系(一些标记包含在其他标记内),创建的对象链接在一个树数据结构内,此结构也会捕获原始标记中定义的父子关系,比如html对象是body对象的父元素,body是p对象的父元素,依此类推:

浏览器解析的大概的工作流程可以归纳为以下几个步骤

整个流程的最终输出是我们这个简单页面的文档对象模型 (DOM),浏览器对页面进行的所有进一步处理都会用到它。

1.处理 HTML 标记并构建 DOM 树。

在该示例中,我们使用link标签引入了一个style.css样式文件,该文件中的样式代码假设如下:

2.处理 CSS 标记并构建 CSSOM 树。

body { font-size: 16px }p { font-weight: bold }span { color: red }p span { display: none }img { float: right }

3.将 DOM 与 CSSOM 合并成一个渲染树。

与处理 HTML 时一样,我们需要将收到的 CSS 规则转换成某种浏览器能够理解和处理的东西。因此,我们会重复 HTML 过程,不过是为 CSS 而不是 HTML:

  1. 根据渲染树来布局,以计算每个节点的几何信息。

  2. 将各个节点绘制到屏幕上。

CSS 字节转换成字符,接着转换成令牌和节点,最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构内:

一个包含一些文本和一幅图片的普通 HTML 页面,浏览器如何处理此页面?

浏览器会将DOM树和CSSOM树合并成一个渲染树(Render Tree):

图片 1

有了渲染树,我们就可以进入“布局”阶段。

文档对象模型DOM

在CSS中,对于每个元素,CSS会根据元素的display属性生成零个或多个框(盒子)。通常,元素生成一个单独的框(盒子),即主体框,表示的是元素自己,并会在框树中包含其内容。然而,一些display的值(比如display: list-item)会生成多个框(一个主体框和一个Marker标记框);有些值(比如display: none或display:contents)会导到元素或其后代元素不会生成任何框。简单地说,元素的框类型是由display的属性值来决定。比如大家最常为熟悉的display:block会让元素生成一个块级框,display:inline会让元素生成一个行内级框。

文档对象模型

有关于框(或者盒子)的介绍,可以阅读视觉格式化模型一章。

转换: 浏览器从磁盘或网络读取 HTML 的原始字节,并根据文件的指定编码(如 UTF-8)将它们转换成各个字符。

如果用一句话来描述的话,那就是CSS的display属性可以用来改变元素的视觉格式化模型,即改变框的类型。

Tokenizing: 浏览器将字符串转换成 W3C HTML5 标准规定的各种tokens,例如,“html”、“body”,以及其他尖括号内的字符串。每个token都具有特殊含义和一组规则。

display的基本属性

词法分析: 发出的标记转换成定义其属性和规则的“对象”。

display属性定义了一直元素的显示类型(视觉格式化模型)。默认情况之下,浏览器都会对元素设置一个display的值,比如上面示例中的p元素:

DOM 构建: 最后,由于 HTML 标记定义不同标记之间的关系(一些标记包含在其他标记内),创建的对象链接在一个树数据结构内,此结构也会捕获原始标记中定义的父项-子项关系:HTML 对象是 body 对象的父项,body是paragraph对象的父项,依此类推。

图片 2

整个流程最终输出是页面的文档对象模型 (DOM),浏览器对页面进行的所有进一步处理都会用到它。

浏览器每次处理 HTML 标记时,都会完成以上所有步骤:将字节转换成字符,确定tokens,将tokens转换成节点,然后构建 DOM 树。

CSS 对象模型 (CSSOM)

在浏览器构建这个简单页面的 DOM 过程中,在文档的 head 中遇到了一个 link 标记,该标记引用一个外部 CSS 样式表:style.css。由于预见到需要利用该资源来渲染页面,它会立即发出对该资源的请求,然后获得一个css样式表

与处理 HTML 时一样,我们需要将收到的 CSS 规则转换成某种浏览器能够理解和处理的东西。因此,我们会重复 HTML 过程,不过是为 CSS 而不是 HTML:

图片 3

CSS 字节转换成字符,接着转换成tokens和节点,最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构:

图片 4

CSSOM 为何具有树结构?为页面上的任何节点对象计算最后一组样式时,浏览器都会先从适用于该节点的最通用规则开始(例如,如果该节点是 body 元素的子元素,则应用所有 body 样式),然后通过应用更具体的规则以递归方式优化计算的样式。

以上面的 CSSOM 树为例进行更具体的阐述。任何置于 body 元素内span 标记中的文本都将具有 16 像素字号,并且颜色为红色 。font-size 指令从 body 向下级层叠至 span。不过,如果某个 span 标记是某个段落 (p) 标记的子项,则其内容将不会显示。

渲染树构建、布局及绘制

CSSOM 树和 DOM 树合并成渲染树,它只包含渲染网页所需的节点。遍历每个DOM树中的node节点,在CSSOM规则树中寻找当前节点的样式,生成渲染树。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:Web布局:display属性

关键词: