display属性决定元素布局角色，盒模型定义该角色下空间计算方式；二者协同作用，不同display值对宽高、内外边距的响应截然不同，box-sizing仅在display允许尺寸生效时起作用。
有直接关系。display 属性决定元素以什么“角色”参与布局，而盒模型定义这个角色下“空间怎么算”。两者不分开看，否则容易出布局偏差。
display 决定了盒模型能不能完整生效
不同 display 值，对 width、height、padding、margin 的响应程度完全不同：
- display: block：宽高有效，padding、border、margin 全部按标准盒模型起作用；外边距可折叠，内容区宽度默认撑满父容器。
- display: inline：width 和 height 被忽略；垂直方向的 padding 和 margin（上/下）不推动邻近元素，仅影响背景和行高视觉；水平方向的 margin/padding 仍生效。
- display: inline-block：宽高有效，padding/border/margin 全部可用，且不会独占一行；常用于按钮组、图标行等需并排又需控尺寸的场景。
- display: flex / grid：容器自身仍是块级盒子，但子项尺寸受 flex/grid 规则主导；子项仍遵循盒模型（比如 padding 和 border 仍占空间），但 width 可能被 flex-grow 或 grid-template 覆盖。
box-sizing 是盒模型的“计算开关”，但它依赖 display 的前提
box-sizing 控制 width/height 算的是 content 还是 content+padding+border，但它的效果受 display 类型限制：
- 对 block 或 inline-block 元素，box-sizing: border-box 很有用：设 width: 200px 就真占 200px 宽（含内边距和边框）。
- 对 inline 元素，即使写了 box-sizing: border-box，width/height 依然无效——它根本没机会参与布局计算。
- 对 flex 项目，box-sizing 仍起作用，但最终尺寸还受 flex-basis、grow、shrink 影响，不能只靠 width。
常见显示类型下的尺寸表现对比
假设统一设置：width: 100px; padding: 10px; border: 2px solid #000;
立即学习“前端免费学习笔记（深入）”；
- block：总宽度 = 100 + 10×2 + 2×2 = 124px（content-box 默认）；设 border-box 后，内容区自动压缩为 76px，整体仍 100px。
- inline：width 被无视；水平 padding 和 border 显示出来，但垂直 padding/border 不影响行高，也不推其他行；整体宽度由文字+左右 padding+border 决定，不可预测。
- inline-block：行为同 block，但可和其他 inline 元素并排；border-box 下也严格守 100px 总宽。
- flex item（无 flex-grow）：width 优先，再叠加 padding/border；若设 flex: 1，则 width 被忽略，由剩余空间分配。
特殊值要注意的限制
有些 display 值会引入额外规则，让盒模型表现更复杂：
- display: table-cell：padding 和 border 行为类似 block，但 margin 无效；宽度受表格算法约束（如 min-content、table-layout: fixed）。
- display: none：不生成盒子，盒模型完全不参与——既不占空间，也不触发任何 margin/padding 计算。
- 绝对定位元素（position: absolute）：display 默认为 block，但脱离文档流后，margin 折叠消失，width/height 按包含块计算，box-sizing 依然有效。
