* { box-sizing: border-box; } 做了什么？它有什么优势？

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

题目类型: 技术面试题

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

难度: easy

分类: Layout

标签: box-sizing, border-box

参考答案摘要

答案 默认情况下，元素应用 box-sizing: content-box，只计算内容区域大小。 box-sizing: border-box 会改变元素宽高的计算方式，把 border 和 padding 也包含进计算。 元素的 height 现在按：内容高度 + 垂直 padding + 垂直 border 宽度 计算。 元素的 width 现在按：内容宽度 + 水平 padding + 水平...

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