面试题：CSS盒模型计算：box-sizing属性中content-box与border-box的基础区别

Question

请阐述在使用CSS的box-sizing属性时，content-box和border-box这两种取值在计算元素盒模型尺寸方面有何不同，并举例说明在网页布局中使用这两种取值可能导致的不同效果。

Answer 1

content-box

1. 尺寸计算：在content-box模式下，元素的宽度（width）和高度（height）仅包括内容区域。边框（border）和内边距（padding）是在设定的width和height之外计算的。即元素实际占据的宽度 = width + padding-left + padding-right + border-left-width + border-right-width；实际占据的高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width。
2. 举例效果：假设有一个<div>元素，设置width: 200px; height: 100px; padding: 20px; border: 5px solid black;，在content-box模式下，该<div>实际占据的宽度为200 + 20*2 + 5*2 = 250px，高度为100 + 20*2 + 5*2 = 150px。在布局中，如果多个这样的元素横向排列，可能会因为每个元素实际占据宽度超出预期而导致换行等布局问题。

border-box

1. 尺寸计算：在border-box模式下，元素的宽度（width）和高度（height）包括内容区域、内边距（padding）和边框（border）。即元素实际占据的宽度就是设置的width值，高度就是设置的height值。内容区域的宽度 = width - padding-left - padding-right - border-left-width - border-right-width；内容区域的高度 = height - padding-top - padding-bottom - border-top-width - border-bottom-width。
2. 举例效果：同样是上述<div>元素，设置width: 200px; height: 100px; padding: 20px; border: 5px solid black; box-sizing: border-box;，此时该<div>实际占据的宽度和高度就是设置的200px和100px，内容区域的宽度为200 - 20*2 - 5*2 = 150px，高度为100 - 20*2 - 5*2 = 50px。在布局中，多个这样设置的元素横向排列时，更易控制整体宽度，不会因边框和内边距导致意外换行，使布局更紧凑和可控。