“* { box-sizing: border-box; }” 这段代码做了什么？它的优势是什么？

What does * { box-sizing: border-box; } do? What are its advantages?

题目类型: 技术面试题

这是一道技术面试题，常见于澳洲IT公司面试中。

难度: medium

分类: Layout

标签: box-sizing, border-box

参考答案摘要

答案 默认情况下，元素会应用 box-sizing: content-box，此时计算宽高只考虑内容区域（content）的尺寸。 box-sizing: border-box 会改变元素宽高的计算方式，把 border 和 padding 也纳入计算。 此时元素的高度计算为：内容高度 + 垂直方向 padding + 垂直方向 border 宽度。 此时元素的宽度计算为：内容宽度 + 水平方向 ...

本题提供 STAR 原则详细解答和技术解析，登录匠人学院学习中心即可查看完整答案。