角材料中的盒子尺寸重置

Question

我正在开发一个带有材料的角度应用程序。我想全局重置 box-sizing 以避免将来头痛，并考虑 2 个选项：

选项 1：

*,
*:before,
*:after {
    box-sizing: border-box;
  }

选项 2：

html {
box-sizing: border-box; 
}
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

我喜欢选项 1，因为它很清晰（一切都是边框）。

选项 2 更谨慎，并考虑了角材料的盒子尺寸。

我的问题是：选项 2 是否必要？如果某些角材料组件被“强制”加边框，它们会出现故障吗？

Answer 1

所以，我查看了 Material css 文件。以下元素是明确的“内容框”：

• textarea.cdk-textarea-autosize-measuring > 影响文本区域 “自动调整大小”功能

• textarea.cdk-textarea-autosize-measuring-firefox > 类似

• mat-form-field-label-wrapper > 影响一些输入。删除它 在占位符上创建溢出。

• mat-input-element 影响一些输入

• 垫子扩展面板

在我的项目中，mat-expansion-panel 有继承 content-box 的子项（我不喜欢）。其他的是独立的内联，可以保留我所关心的所有内容框。

所以这是我最后的重置文件，如果有人感兴趣的话：

body,
html {
  box-sizing: border-box;

  & .mat-expansion-panel {
    box-sizing: border-box;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
}