CSS盒子定位的形式语义

Question

我是一名(理论)计算机科学专业的学生,​​因此研究编程语言的语义是我研究的主题之一(维基百科).

我使用CSS玩了很多,并且对盒子定位规则有了合理的理解.(如果你告诉我创建一个具有特定布局的页面,我通常会想到正确的方法和适用的CSS规则.)

为CSS盒子定位规则提供某种形式语义会很酷,但是在搜索网络一段时间之后,我找不到任何有用的东西.

我大多只是简单地结束了CSS规范,这些规范被格式化为具有伪算法的长文本(不是最大的读物 - 我还没有花很多精力阅读这些规范).

没有人试图将这个"理论"形式化为某种数学模型,比规范提供的更严格吗？我不是在寻找完整或确定的东西,但如果至少应该以正式的方式对盒子的定位方式进行建模,那么它肯定会是整洁的(并且很有用!).

有谁知道这样的研究？

Answer 1

没有答案！ 这是一个非常简化的情况的可能形式化的示例（请参阅上面我的评论）。

举例来说，我们工作的世界具有 (1) 已知的屏幕宽度, (2) 的有序列表盒子不嵌套，没有边距/填充/边框，向左浮动，我们通过数学函数知道它们的 (2.1) 高度和 (2.2) 宽度和。

我们将定义函数和，它表示每个框的左上角的坐标。

我们将定义/使用关系“起始线“ 和 ”有高度”。

首先，从第 0 行开始。

那么，如果起始线，而且如果对于某些情况

...我们的结论是：

1. 
2. 
3. 有高度
4. 起始线+1 当且仅当

这些规则以正式的方式定义给定框的位置。当然，这只是这样做的一种方法，而且可能不是最聪明的（只是很快想到），但它确实正确地形式化了浮点数的工作方式（模错别字，我还没有检查得足够好）。

在处理编程语言时，人们可以选择多种形式，每种形式都是为了特定目的而发明的（参见维基百科）。

我只是感兴趣是否有人尝试过对 CSS 框定位进行形式化。当然，规范有很长的路要走，但它们只是不像数学方法要求的那么严格。