Press "Enter" to skip to content

CSS进阶——对布局理论的渐进归纳

交互页面(网页)不是一张图片、图表或绘画,但是【现代交互页】漂亮的就像一副绘画,层次分明,色彩绚丽,还能响应用户。很难想象一张二维平面作品,背后的(起点)居然是一份结构化的HTML文档。动画不说,光页面格式化和二维空间布局都很复杂,将一条“树”转为一张平面图,CSS和浏览器需要做什么。

“布局”是一种任务(描述),布就是安排,局就是位置空间;按照最新的作业观,布局任务的产出(存在)是一张二维的交互界面,包括局部交互功能组件和全局的交互页。12/19/19 12:34 PM

呈现过程技术化

EM:就是为存在物(交互界面)的生成(任务)制作工具/技术

Web技术发展至今,一张“漂亮的”交互页面由HTML和CSS协作「呈现」,交互操作部分由JS实现,先不说。HTML主要为页面内容搭脚手架——对内容时行“标记”(markup),标记种类有内容角色(p h1)、布局关系(div span)、网络语义(nav section)等;CSS则主要负责对脚手架以及架上内容进行装饰,包括布局调优。

从纯粹的用超链接(hyperlink)分享技术文档(HTML2前),到现代交互丰富的Web页(HTML5),页面「构造和呈现技术」起了重大的革新,这是肯定的。但页面构造和呈现的抽象原理是相似的——对内容进行标记,在显示介质上进行平面呈现。只是现代需求,页面层次更细致,功能更多。

为了更精准的进行平面呈现,必须对呈现过程进行「技术化」,例如CSS2到3的发展,各种块、行内概念,浮动和绝对定位等“脱流”技术,为设计师提供更多更细致的呈现控制力。

文档树与视觉树

EM:分析存在物(交互界面)的质料和形式特性

常见的交互页不是绘画,交互页一般具有离散、逻辑分层平面二维结构,绘画为了表达意象,二维结构较为连贯连续。交互页内容的离散分层特性非常适合用树状数据结构表达,所以HTML的文档树天然适用于表达交互页的离散分层的视觉结构。CSS引入了,第一,块(block)和行内(inline),和第二,块内嵌套,基本实现一种【视觉树】。当然不能忘记视觉的起点,是CSS对所有HTML内容(text node)和树节点绘制视觉块或者叫方框(box)。

平面视觉格式化

EM:二维布局 等于 视觉格式化,下文中“视觉格式化”都可以替代为“布局”

在【文档树的二维平面呈现】的概念和技术实现上,有几个重要但让新手困惑的概念,如visual formatting model (下称VFM)、formatting structure,中文常译为可视格式化模型和格式化结构。我以为,visual 译为【可视化】词意不达,又,formatting 明显超越了文本格式化的【格式化】概念,而model 译为模型也不够妥。

### visual

visual 译为原义【视觉】更好,什么叫视觉?和听觉、触觉等对比就很形象了。视觉就是指一种空间实物的平面呈现,具有一种二维结构,如此理解,【二维平面的格式化】概念就很明了。

### formatting

“格式化”的抽象意思是将某物转化为另一种可能的更优的形态,文本格式化就是对文字的形态的转换,因为丰富的交互页是种复合平面图,具有丰富层次需要格式化,故【视觉格式化】则分两步——局部二维「空间样式」,和全局布局「排列样式」。

### VFM

文本格式的对象是「文字」,视觉格式的对象是「二维空间」,CSS的box就是视觉格式基础实现(box译为盒子是蹩脚的,应该译为平面方框、方框或者框更好)。视觉的布局样式就是VFM,一种【视觉框】排列定位的算法或规则。model译为模型让人错觉为模具,其实就是一种算法。

EM:VFM ,【视觉框】排列定位规则,就是像一只定型的锤子,以一种固定的作业模式完成任务(布局交互界面);可以想像,flexbox grid是相对NF完全不同(作业模式)的“锤子”。

### NF VFM

块框(block box)独占一行,块框可以作为容器(containing block)内部嵌套其它框等都是视觉格式规则/方法。

早期网页布局很多人用table,就是因为表格是最简单直观的视觉格式化方法,虽然很蹩脚。有了视觉格式化原理的理解,下一步具体的认识各种视觉格式技术,例如normal flow(各种块框类型),浮动,position,flexbox和grid。

视觉格式化与画布分割定位

将视觉框(box)分为块框(block)和行内框(inline),并规定块框独占“一行”,行框在父块框的格式流中。以上是最初步「视觉格式规则」,细致全面格式化整个画布(canvas)需要更多规则细节。块框为啥要独占一行,独占一行是什么意思?我们必须明白,视觉格式化的对象是具有二维空间的画布,有一定宽度(width)和高度(height)。要细致格式化,必须对画布分割,分配定位单元,其实块框也可以设定为独占一列,显然设计者更直观的选择了水平分割画布。所以块框独占一行的意思和意义就很明显了,只是块框的高度需要更多解释。另外,有了块内嵌套的格式规则,“独占一行”也有了抽象意义,指占据父块的一行——水平区域。整个画布只是最大的一个父块。

EM: 填满整张画布,即为生成「交互界面」的任务;而画布是逻辑的,也可以是更大的画布的一个内容框。所以布局任务可以是嵌套的。

EM: 填满画布反向的解释,是对画布内的「所有的内容框」进行位置顺序的安排;某一个内容框「安排的规则」可由画布特性决定(例如flexbox和NF画布就不同) ,也可由内容框本身的布局特性决定,例如块框影响了下一个内容的位置布局——从下一行开始呈现。

EM:布局任务的完整描述,是对画布内的所有内容框进行位置安排

视觉格式化CSS属性(三个属性同时存在):

display : none block inline inline-block flex grid

position : static relative absolute fixed

    left right top bottom

float : none left right

常规流视觉格式化技术

视觉格式化规则必须完整解释格式化完整张画布,所以较完整的格式规则:

>块框(block)独占画布(或父块)水平一行,多个块框自上而下顺序“垒砌”,直接填满整张画布(或父块)的高度;行内框(inline)占据画布(或父块)垂直一列,多个行框从左至右“垒砌”,直到填满画布(或父块)的宽度,再换行“垒砌”。

以上规则是基本的normal flow的block inline formatting model了。

EM:完整的画布内容「布局规则」应该是固定的,这就是布局理论。例如,具体的布局技术都会决定(提供API)画布内第一个内容框的位置——NF是靠在画布的左上边缘,position则由手动top left决定。

常规流的思想是,两种不同粒度的视框,自上而上、自左至右的“垒砌”,具体布局由视框的内容决定。格式化规则中“垒砌”有具体技术上的涵义,块框“垒砌”是指块框底部位置是新块框的顶部;行内框“垒砌”是指行内框的右边位置是新行内框的左边开始位置。

EM:“垒砌”算是一个贪心算法,贪心的特点是满足当下,对未来盲目,对空间缺乏全局规划

后来为了更细致格式化视觉画布,CSS对常规流进行局部调整技术,如position 和 float,甚至全新的格式流技术flex和grid。

P.S. CSS2S规范已经基本讲述了「常规流」完整格式化完整张画布的两条规则——BFC和IFC。有趣是,其实块框独一行,是真正的行框;行内框垂直占块框的列空间,可称为列框。概念是主要的,名字当初取得很直观,就约定俗成了。总之,常规的格式流分水平和垂直两个方向填整张画布。

重定位视觉格式化技术

视觉格式流技术多样化,是在常规流(完成视觉格式过程)的基础上进行调整得到的,提供更多细致灵活的格式操作。例如块框一个个按次序静态“垒砌”的(就像水从上而下的流),块框内(块框作为containing block)第一子块也是默认左上角;块框嵌套上,子视框默认最近的包含块框为它的父块框等。

其实相对于通过相邻获得一种静态位置,最细致的视觉格式化技术是提供一个别的「具体位置数据」,这就是 position 技术缘由。CSS提供基于原位置(relative)、父块( absolute )和视口(fixed)三种相对位置基点的定位技术。特别注意的是,relative定位是不“脱流”的,只是简单的在原位偏移位置,后面的视觉框知道它的存在;而另外两种是“脱流”的,在常规流中消失,新视觉框不知道它的存在。最有趣的是float 技术,它宣称把视觉框脱离出流,但是其它框还是知道它的存在。

EM:脱流意思是,在不同的画布上进行呈现和布局内容框,“流”是呈现的操作过程。

EM:重定位技术的核心是,第一,手动定义内容框在画布上的位置;第二,调整画布( relative是原画布,absolute是某一个父画布,fixed是整个视口)

浮动定位视觉格式化技术

float官方解释说,被float的框被移动到所在行框(line box)的行头(left)或行尾(right),然后其它内容(content)会“环绕”着浮动框。【什么样的框】在什么的情况下可以被浮动,又什么样的【内容】会环绕着浮动框?常见浮动框有图片或一小段附加短文,内容多是一大段落文本。在常规流的算法里,应该只有【行内框】具有浮动的可能性了,因为块框占满了一行,不存在浮动空间;

又,像要对块框安放,要先对分割画布一样,为了安放行内框,包含块框也要进行水平分割,这是就【行框(line box)】的概念——行内框“垒砌”的起点和终点,只是【行框】是在行内框在实际布局中构建的,技术上好像没有【行框】对象,不能进行CSS或JS操作。浮动框的出现就是改变了【行框】的起点或终点来实现内容环绕效果。

EM:这里所谓“行框”是指 横向安排内容框(行内框)的NF特殊画布

EM:浮动框就是一个特殊的行内框,而行内框是相对块框的,下一个内容框(应该只能也是行为框)不用换行,它的「左起位置」是前一个行内框「右终结位置」

EM:浮动框特殊之处在,它是“脱流”的,在另一张画布上布局,说它是NF行内框是因它会影响NF流,从而产生环绕效果

行框(IFC)是行内框横向“垒砌”的起点和终点,而画布(或BFC)是块框纵向“垒砌”的起点和终点,从这个结论我们看出了,重定位技术就像是对BFC的调整,指定块框起始位置,是行向流动调整,而浮动技术就像是IFC上的调整,对“列框”重新定义了规则,是列向流动调整。两者都是对常规流的微调得到新的格式操作。而到CSS3出现了全新的非常规流技术。

EM:以上早期分析不全面。浮动布局应该说是与NF不同的布局技术,只是为达到环绕效果,两种布局实例必须有一定的“交互”。

EM:一种布局技术,它第一个要的定义是,画布起点位置在哪里,其次才是内容框的布局规则。

EM:浮动画布:浮动布局画布位置是在NF画布基础上确定的,例如左边与NF画布的左边缘重叠,而top是浮动框原NF的位置,这样才产生一个“浮动”效果。

EM:浮动框布局规则:当多个相邻的NF框被设置为float,它们分为成为同一个浮动画布的内容框,可以clear属性控制“换行”布局

EM:与NF流交互:浮动画布(框)会影响NF 行框的起始/终止位置,从而产生环绕效果;浮动画布会覆盖NF块框(因为从NF流中脱离)

参考

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *