css盒子模型学习记录

CSS盒子模型是一个核心概念，它描述了如何在网页中布局和定位HTML元素。每个HTML元素都可以视为一个矩形盒子，这些盒子可以包含内容、内边距、边框和外边距。盒子模型定义了这些部分如何相互作用，以形成最终在屏幕上可见的元素。

盒子模型的组成部分

- **内容（Content）**：元素的实际内容所在的区域，可以通过`width`和`height`属性设置其大小。
- **内边距（Padding）**：内容周围的空白区域，用于分隔内容和边框。
- **边框（Border）**：包围内边距的线，可以设置样式、宽度和颜色。
- **外边距（Margin）**：盒子外部的空白区域，用于与其他元素分隔。

标准盒子模型与替代盒子模型

在标准盒子模型中，元素的`width`和`height`属性只应用于内容区域，而内边距和边框会加在内容区域的外部，导致元素的总体尺寸大于指定的`width`和`height`。

替代盒子模型（也称为IE盒子模型）则将元素的`width`和`height`属性设置为包括内容、内边距和边框的总尺寸。这意味着设置的宽度和高度值等于元素可视区的总尺寸。

`box-sizing`属性

`box-sizing`属性允许开发者选择使用哪种盒子模型。`content-box`对应标准盒子模型，而`border-box`对应替代盒子模型。通过设置`box-sizing: border-box;`，可以使得元素的宽度和高度包括内边距和边框，简化布局计算。