CSS 盒子模型详解：内容、内边距、边框、外边距

CSS 盒子模型是指 HTML 元素在页面中呈现为一个矩形的盒子，包括四个部分：'内容区域'、'内边距'、'边框'、'外边距'。其中，'内容区域'指元素的实际内容，'内边距'指内容与边框之间的空白区域，'边框'指内容与外边距之间的边框，'外边距'指盒子与其它元素之间的空白区域。

CSS 盒子模型可以用来设定元素的尺寸、位置和外观，通过设定'内边距'和'边框'的宽度、颜色等属性来控制元素的边框和填充，通过设定'外边距'的大小来控制元素与其它元素之间的距离。盒子模型还可以使用 box-sizing 属性来控制元素的尺寸计算方式，包括 'content-box' 和 'border-box' 两种方式。其中，'content-box' 指元素的尺寸只包括'内容区域'的宽度和高度，而 'border-box' 指元素的尺寸包括'内容区域'、'内边距' 和 '边框' 的宽度和高度。