首页 > 其他分享 >CSS2.1规范笔记——9.1 视觉格式化模型(视口和包含块)

CSS2.1规范笔记——9.1 视觉格式化模型(视口和包含块)

时间:2023-07-22 19:34:27浏览次数:49  
标签:格式化 包含 模型 用户 视口 文档 CSS2.1 9.1

视觉格式化模型

视觉格式化模型:对于可视化媒体,用户代理怎样处理文档树。在视觉格式化模型中,文档树中的每个元素根据其盒模型生成0或多个盒。这些盒的布局由以下因素控制:

  • 盒尺寸与类型
  • 定位方案(常规流、浮动与绝对定位)
  • 文档树中元素间的关系
  • 外部信息(例如视口大小、图片的固有尺寸等)

本章及下一章中定义的属性适用于连续媒体和分页媒体。但margin属性应用于分页媒体时有不同的含义(详细信息查看页模型)。

视觉格式化模型并没有指定格式化的所有方面(例如,它没有指定字母间距算法)。(与CSS规范)一致的用户代理在这些本规范未提及的格式化问题上的表现可能存在差异。

视口viewport

规范中的定义:

连续媒体的用户代理一般会给用户提供一个视口(屏幕上的一个窗口或者视图区域),用户通过它来查阅文档。视口尺寸变化时,用户代理可能会改变文档的布局。

当视口比渲染文档的画布区域小时,用户代理应该提供一种滚动机制。一个画布最多对应一个视口,但用户代理可能会渲染到多个画布上,即提供同一文档的不同视图。

 

浏览器的渲染区域就是一个视口。

包含块containing block

规范中的定义:

元素(生成的)盒的位置和大小有时候是根据一个特定矩形计算的,一般把生成的盒作为后代盒的包含块,我们说一个盒为其后代“建立”了包含块。“一个盒的包含块”表示“盒所在的包含块”,而不是它生成的包含块。

 

MDN中的定义:

一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下,包含块就是这个元素最近的祖先块元素的内容区,但也不是总是这样。

 

包含块很重要,因为它影响着CSS中两个关键问题:定位和尺寸。

包含块一般是最近祖先元素的content box,但也不总是这样。

具体包含块的定义见10.1

标签:格式化,包含,模型,用户,视口,文档,CSS2.1,9.1
From: https://www.cnblogs.com/hdxg/p/17574063.html

相关文章

  • CSS2.1规范笔记——8.2 外边距与margin合并
    外边距margin取值<length>:一个固定值<percentage>:百分比根据当前生成盒的包含块的width来计算。注意,margin-top和margin-bottom也是根据其包含块的width来计算的。如果包含块的width取决于该元素,那么产生的布局在CSS2.1是未定义的。auto:具体见“计算width与margin”章节。m......
  • CSS2.1规范笔记 - 8.1 盒尺寸
    中文链接:http://www.ayqy.net/doc/css2-1/cover.html英文链接:https://www.w3.org/TR/2011/REC-CSS2-20110607/本笔记是2020年自学前端时所写,当时写在word文档上,今天重温,就搬到博客园上来。盒尺寸盒模型的组成css盒模型描述了一个为文档树中的元素生成的,根据视觉格式化模型进......
  • VTK9.1.0在Windows10+VS2019+Qt 5.15.2环境下编译安装以及VTK应用于QT
    下载VTK安装包在VTK官网Download|VTK中下载VTK9.1.0待编译源码,解压后在路径Documentation/dev/bulid.md中可以看到官方提供的Prerequisites以及简易教程编译环境安装按照官方提供的Prerequisites,安装以下环境:CMakeVersion3.12ornewer,however,thelatestversionisal......
  • 数据库连接池之c3p0-0.9.1.2,线上偶发APPARENT DEADLOCK,如何解?
    前言本篇其实是承接前面两篇的,都是讲定位线上的c3p0数据库连接池,发生连接泄露的问题。第二篇讲到,可以配置两个参数,来找出是哪里的代码借了连接后没有归还。但是,在我这边的情况是,对于没有归还的连接,借用者的堆栈确实是打印到日志了,但是我在本地模拟的时候,发现其实这些场景是有归......
  • day09 9.1 安卓开发项目实战二
    开发自己的第二款APP基于网络登陆注册能与后端进行交互的app【一】引入前面我们已经自己开发出了一款简答的App。但是那个App知识利用的本地的数据,没有和后端进行交互所以只能算是前端接下来我们要开发一款能与后端进行交互通信的App【二】必备知识想跟后端交互......
  • 数据库连接池之c3p0-0.9.1.2,16年的古董,发生连接泄露怎么查(二)
    背景本篇是c3p0连接泄露问题的第二篇,在前面一篇里面,大体介绍了问题,问题就是,我们发现线上服务不响应的原因是拿不到连接。而为啥拿不到连接呢,因为空闲链表为空,那么为什么空闲链表为空呢?这个我一开始的猜测就是,估计是某处代码从连接池里获取了连接,用完了没有归还,那么,怎么才能找到......
  • # 9.1 检测点
    9.1检测点assumecs:codedatasegment?dataendscodesegmentstart:movax,datamovds,axmovbx,0jmpwordptr[bx+1]codeendsendstart若要使程序中的jmp指令执行后,CS:IP指向程序的第一条指令,在data段中应该定义哪些数据?答:CS:IP指向程序的第一条指......
  • 数据库连接池之c3p0-0.9.1.2,16年的古董,发生连接泄露怎么查(一)
    背景这篇文章是写给有缘人的,为什么这么说呢,因为本篇主要讲讲数据库连接池之c3p0-0.9.1.2版本。年轻的朋友,可能没怎么听过c3p0了,或者也仅限于听说,这都很正常,因为c3p0算是200几年时比较流行的技术,后来,作者消失了好几年,12年重新开始维护,这时候已经出现了很多第二代线程池了,c3p0已经......
  • 19C-19.16 ORA-17503 ORA-27300 ORA-27301 ORA-27302
    ***alter日志告警2023-07-01T02:05:13.474592+08:00Errorsinfile/u01/app/oracle/diag/rdbms/dg/dg1/trace/dg1_ora_17925.trc:ORA-17503:ksfdopn:2Failedtoopenfile+DATA/dg/PASSWORD/pwddgORA-27300:OSsystemdependentoperation:openfailedwithstatus:13ORA-......
  • TensorFlow09.1 神经网络-其他训练Tricks(Early Stopping和Dropout)
    Tricks▪EarlyStopping▪Dropout▪StochasticGradientDescent1Earlystopping我们走到最大指的时候我们可以提交stop掉,防止它overfitting。1.1How-To▪Validationsettoselectparameters(选择一个参数)▪Monitorvalidationperformance(检测变量的表现)▪......