CSS盒子定位的形式语义

Question

我是一名（理论）计算机科学专业的学生，​​因此研究编程语言的语义是我研究的主题之一（wikipedia）。

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

对于CSS盒子定位规则有一些形式语义会很酷，但是在搜索网络一段时间之后，我找不到任何有用的东西。

我大多只是简单地使用CSS规范，这些规范被格式化为带有伪算法的长文本（不是最大的读物 - 我还没有花很多精力阅读这些规范）。

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

有谁知道这样的研究？

Answer 1

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

比如说，我们正在一个以（1）已知屏幕宽度，（2）框的有序列表为特征的世界中工作。嵌套，没有边距/填充/边框，向左浮动，我们通过数学函数和知道它们的（2.1）高度和（2.2）宽度。

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

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

首先，从第0行开始。

然后，如果开始行，那么如果某个

......我们得出结论：

1. 
2. 
3. 的身高为
4. 开始行 + 1 iff

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

在处理编程语言时，可以选择许多这些形式，每种形式都是出于特定目的而发明的（见wikipedia）。

我只是感兴趣，如果有人试图想出一些CSS盒子定位的形式化。当然，规范还有很长的路要走，但它们并不像数学方式那样严格，而是强迫你做。