{ box-sizing: border-box; } 的作用是什么？它有哪些优势？

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

题目类型: 技术面试题

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

难度: medium

分类: CSS Basics

标签: box-sizing, border-box, content-box, layout

参考答案摘要

答案 默认元素使用 box-sizing: content-box ，只计算 content 的尺寸。 box-sizing: border-box 会改变宽高计算方式，把 padding 和 border 也算进 width/height。 高度计算变为：content height + 垂直 padding + 垂直 border 宽度计算变为：content width + 水平 paddi...

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