可视化格式模型(visual formatting model)
原文
简书原文:https://www.jianshu.com/p/7632f16ff555
大纲
1、认识可视化模型
2、可视化模型的内容
3、可视化模型的影响因素
1、认识可视化模型
盒子模型是CSS中所有元素产生的box的自身构成,而可视化格式模型则是把这些box,按照规则摆放到页面上,也就是通常所说的布局。换句话说,可视化格式模型是整个页面的模型,这个模型规定了怎么在页面里摆放box,box相互作用等等。属于CSS的最为核心的概念之一。
可视化格式模型,官方的说法是,它规定了用户端在媒介中如何处理文档树(document tree)。
● 用户端,对我们来说一般指浏览器。
● 媒介,相当于我们展现页面的介质。如,纸媒介,听觉浏览器和显示器等。
● 文档树(document tree)是指源文档中元素树的编码。树中,每一个元素恰好由一个父元素。根元素是例外,它没有父元素。就是document和页面上的元素所构成的类似树形的结构。
2、可视化模型的内容
网页布局根据可视化格式模型来进行布局,而影响可视化格式模型的大致有几个方面,外部环境,box模型,定位机制,文档树。
1、外部环境指的是设备,窗口等外设信息
2、文档树指的是各个元素在文档树中的位置从而影响网页排版
3、box模型讲述的是网页上的各个元素以盒子的形式在网页上布局,但是是以怎样的盒子在网页上布局是根据各种不同的情况而定的
4、定位机制讲述的是如何将各个不同的盒子按照需求排列到网页上
网页布局本质上就是讲各个HTML元素盒子在网页上按照不同的定位机制进行排版定位。
块框( block boxes )和行内框( inline boxes )只是三种定位体系之一的常规流( Normal flow ),而块级格式上下文(Block Formatting Context)和行内格式上下文( inline formatting )只是他们的元素创建的格式上下文,他们本身其实并不是上下文,是对内框的排列的一种约束。
3、可视化模型的影响因素
在可视化格式模型中,每一个元素都会根据盒子模型产生0个或多个box,而这些box的布局受以下因素的影响:
3.1、box尺寸和类型
类型是指 display 特性所决定的元素类型,如:DIV 是块级元素,SPAN 是行内元素等。
3.2、定位体系
元素在布局时,根据3种定位体系定位。分别是,常规流、浮动和绝对定位。这3种定位体系的详细内容会在后面讲到。
3.3、 在文档树中,元素之间的关系
比如,一个块元素包含两个互为兄弟节点的浮动元素,后面那个浮动元素的布局,会受前面元素以及它包含块的影响。
3.4、 外部信息
比如,可视窗口的大小,我们有时候会做页面自适应窗口大小的功能,就是因为,窗口大小对布局有影响。再如,图片的固有尺寸,会影响行内替换元素的尺寸,进而影响这个布局。
可视化格式模型(visual formatting model)的更多相关文章
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- visual formatting model (可视化格式模型)【持续修正】
概念: visual formatting model,可视化格式模型 The CSS visual formatting model is an algorithm that processes a ...
- Visual formatting model 可视化格式模型
在可视化格式模型里,每个元素都是由一个或者多个盒子组成,这些盒子的布局由下面规则控制: box dimensions and type.(块元素和行内元素) positioning scheme (n ...
- CSS——可视化格式模型
CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示): 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局: 换句话说,盒子模型规定了 ...
- Introduction to the visual formatting model
原文:https://www.w3.org/TR/CSS2/visuren.html#block-formatting --------------------------------------- ...
- CSS概念 - 可视化格式模型(二) 定位概述(普通流、绝对定位)
2.定位概念 上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本 ...
- CSS概念 - 可视化格式模型(一) 盒模型与外边距叠加
可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...
- CSS - 视觉格式化模型(Visual formatting model)
几个概念 块:block,一个抽象的概念,块与块之间在垂直方向上按照顺序依次堆叠. 行内:inline,一个抽象的概念,行内与行内之间在水平方向上按照顺序依次堆叠(会有换行). 元素:element, ...
- 精通css 高级web标准解决方案——可视化格式模型-盒模型
1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...
随机推荐
- 使用Java开发微信公众平台(四)——消息的接收与响应
上一篇文章(http://www.jerehedu.com/fenxiang/171807_for_detail.htm )中,我们学习了使用Java语言开发微信公众平台的第一部分——环境搭建与开发接 ...
- 单调栈+贪心维护LIS
普通:O(\(N^2\)) 状态:dp[j]表示,以j结尾的最长的上升子序列 转移:dp[j]=dp[i]+1(if a[j]>a[i] ) 初始化:dp[i]=1 优化(nlogn) solu ...
- wscript shell
http://blog.csdn.net/songques/article/details/8309569 http://baike.baidu.com/link?url=_P6z73_Ih9R79T ...
- iOS 创建静态库文件时去掉当中的Symbols
在project中创建静态库文件时.默认会将一些Symbols加到静态库文件里.这样做有两个缺点: 1.假设引用静态库文件的project中发生了bug.就会直接跳转到静态库的源代码. 也许有人问:静 ...
- RK3066 实现LED闪烁的代码分析
实现LED灯的闪烁,须要在驱动里加入一个定时器函数,详细实现涉及到了LED GPIO驱动.用户空间程序调用驱动程序. 1.首先来看LED设备驱动注冊过程,代码位于../kernel/drivers/l ...
- 基于jQuery的一组图片的滚动
css: .displayB{display:block;}.fl{float:left;}.fr{float: right;}.posAb{position: absolute;}.posRe{po ...
- Vue简介以及基本使用
Vue 是一套构建用户界面的渐进式 框架 框架和库? 框架(基于自身的特点向用户提供一套完整的解决方案,控制权在框架本身,需要使用者按照框架所规定的某种规范进行开发) Vue Angular Reac ...
- Spider_lxml
xpath工具(解析) xpath 在XML文档中查找信息的语言,同样适用于HTML文档的检索 xpath辅助工具 Chrome插件 :XPath Helper 打开 :Ctrl + Shift + ...
- CISP/CISA 每日一题 17
CISSP 每日一题(答) What are often added to passwords to maketheir resultant hash secure and resistant to ...
- php中 重载(二)
接着上一次说的重载,我们了解下php中的重载,方法的重载,假设有管重载定义,參考:php中 重载(一)这个文章,谢谢.作为刚開始学习的人,大牛勿喷: 基本是两个方法 __call,当调用对一个不可訪问 ...