原文:https://www.w3.org/TR/CSS2/visuren.html#block-formatting --------------------------------------- This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media. In the visual formatting m…

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻译自W3C官方文档,其中加上了自己的一些理解.相关链接:https://www.w3.org/TR/CSS2/visuren.html#block-boxes. 1.可替换元素(Replaced element) 下面的一段话引自MDN: 典型的可替换元素有 <img>. <object&g…

概念: visual formatting model,可视化格式模型 The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. 它是一种规则,用于规定用户代理如何将DOM树展示在可视化媒体中. 通俗的说,我们在HTML中写一个p标签,在浏览器中打开之后,他会是以什么样子展现出来(他的宽度.高度是多少,他在哪里,他与相邻的元素是什么关系.)这…

原文 简书原文:https://www.jianshu.com/p/7632f16ff555 大纲 1.认识可视化模型 2.可视化模型的内容 3.可视化模型的影响因素 1.认识可视化模型 盒子模型是CSS中所有元素产生的box的自身构成,而可视化格式模型则是把这些box,按照规则摆放到页面上,也就是通常所说的布局.换句话说,可视化格式模型是整个页面的模型,这个模型规定了怎么在页面里摆放box,box相互作用等等.属于CSS的最为核心的概念之一. 可视化格式模型,官方的说法是,它规定了用户端在媒介…

在可视化格式模型里,每个元素都是由一个或者多个盒子组成,这些盒子的布局由下面规则控制: box dimensions and type.(块元素和行内元素) positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree. external information (e.g., viewport size, intrinsi…

几个概念 块:block,一个抽象的概念,块与块之间在垂直方向上按照顺序依次堆叠. 行内:inline,一个抽象的概念,行内与行内之间在水平方向上按照顺序依次堆叠(会有换行). 元素:element,指 HTML 元素. 盒子:box,一个抽象的概念,由 CSS 引擎根据文档中的内容所创建,主要用于文档元素的定位.布局和格式化等用途.盒子与元素并不是一一对应的,有时多个元素会合并生成一个盒子,有时一个元素会生成多个盒子(如匿名盒子). 块级元素.块级盒子.块容器盒子.块盒字 一个块级元素至少生成…

在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性. 但在进一步说明 BFC 特性之前,Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要地位的概念——定位方案.定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Norma…

转自:http://kayosite.com/block-formatting-contexts-in-detail.html 在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性. 但在进一步说明 BFC 特性之前,Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model)…

Abstract "HTML5 Differences from HTML4" describes the differences of the HTML5 specification from those of HTML4. Status of This Document This section describes the status of this document at the time of its publication. Other documents may supe…

以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其他元素也共享这个平面.2D变换函数虽然能改变元素的表现,但是这个被改变的元素仍然是在其包含块所处的平面内被渲染. 3D变换会产生一个变换矩阵,该变换矩阵在Z轴上的分量不为0.结果是把元素渲染到一个不同于其包含块所处的平面内.这将影响到通常情况下的"后来居上"的渲染规则:变换元素可能会和其相…