范叶亮写智能体、模型和数据系统时，习惯先把定义和边界钉死。把「CSS 布局和定位」整理成可落地的中文笔记：问题在哪、默认做法会踩什么坑、该怎么选。原站导航和广告已去掉。

盒模型

CSS 中的布局 display 和定位 position 可以说是两个最基本的属性，其控制着元素在网页中的显示方式。之前对布局和定位可谓是一知半解，最终奏不奏效全凭一顿乱试 😂，想了想还是应该细致地了解下，后面虽不妄想写起代码来事半功倍，但至少不会再暴力遍历破解了。

在介绍布局和定位之前，首先回顾一下 CSS 的盒模型。CSS 盒模型从外到内由 外边距 margin 、 边框 border 、 内边距 padding 和 内容 content 共 4 部分组成，如下图所示：

布局

元素的宽度 width 为内容的宽度 + 左边框 + 有边框 + 左内边距 + 右内边距，上例中为 $360+10+10+10+10=400$；元素的的高度 height 为内容的高度 + 上边框 + 下边框 + 上内边距 + 下内边距，上例中为 $240+10+10+20+20=300$。在实际中，我们并不能直接设定内容的宽度和高度，只能设置元素的宽度和高度，而显示区域的宽度和高度则通过计算自动设定。

在 CSS 中广泛使用的有两种盒子模型： 块级盒子 （block box） 和 内联盒子 （inline box） 1 。

弹性布局

在 CSS 中使用 display 属性控制元素的布局方式，上文中的 block 和 inline 是最常用的两种布局方式。除此之外还有一种介于块级盒子和内联盒子之间的布局方式，即 inline-block ，其具有如下表现行为：

这是一段包含 span 元素 的文本。 display: inline 的 span 元素的 width 和 height 属性无法发挥作用。

网格布局

这是一段包含 span 元素 的文本。 display: inline-block 的 span 元素的 width 和 height 属性可以发挥作用。

上图分别展示了 display: inline 和 display: inline-block 两种布局 span 元素的显示差异。

定位

弹性布局 （Flexbox Layout，Flexible Box Layout） 旨在提供一种更加有效的方式来布局、对齐和分配容器中元素之间的空间，即使元素的大小是未知或动态的，这也就是称为“弹性”的原因。

弹性布局是一套完整的模块而非一个单一的属性，其中一些属性要设置在 父元素 （flex container） 上，一些属性要设置在 子元素 （flex items） 上。常规布局是基于块级元素和内联元素的的流向，而弹性布局是基于 弹性流向 （flex-flow directions）。下图展示了弹性布局的基本思想：

静态定位

. container { display : flex ; /* 或 inline-flex */ } flex-direction 该属性定义了弹性流向，即基本思想中的 main-axis 。

. container { flex-direction : row | row-reverse | column | column-reverse ; } row （默认）： ltr 时从左至右， rtl 时从右至左 row-reverse ： ltr 时从右至左， rtl 时从左至右 column ：从上至下 column-reverse ：从下至上 flex-wrap 默认情况下会将子元素放置在一行中，该属性用于设置换行模式。

值得单独记下的点

• 盒子会在内联方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽。
• width 和 height 属性可以发挥作用。
• 内边距、外边距和边框会将其他元素从当前盒子周围“推开”。
• width 和 height 属性将不起作用。
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
• width 和 height 属性可以发挥作用。
• 内边距、外边距和边框会将其他元素从当前盒子周围“推开”。

落地时建议先做的 5 件事

1. 先写清任务能不能被自动验证：能验证的交给系统和评测，不能验证的留给人审。
2. 本地部署先算显存、延迟和失败回滚，不要只看能跑通一次。
3. 多智能体只在单智能体触到上下文或专业边界时再拆。
4. Token、微调和压缩都要有对照数字，避免口号式优化。
5. 结论写成可检查清单：接口、超时、评测集、回滚版本。

和智能体产品怎么接

龙虾PRO做 OpenClaw 落地时，最该拿走的是「单智能体先做好工具和提示，再谈编排」。数字员工、技能市场和网关应共用同一套评测与权限，而不是各写一套角色人设。

本文侧重全链路风控方法论。落地时请用自身业务单据做回放验证，不要把示例阈值直接当生产策略。 相关：风控体检 · 方案资源