从基本概念开始学习 CSS
CSS盒模型是Web开发中的基础概念，对于理解网页布局至关重要。
什么是CSS盒模型？
在CSS中，每个元素被视为一个矩形盒子，这个矩形盒子包围着元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。这四个部分共同构成了CSS盒模型。
盒模型的组成
1. 内容（Content）
内容区域是放置文本和图像的地方，其宽度和高度可以通过width和height属性直接控制。
2. 内边距（Padding）
内边距位于内容区域的外围，可用于控制内容与边框之间的空间。内边距的大小不会影响盒子本身的大小，但会影响盒子中内容的显示区域。
3. 边框（Border）
边框环绕在内边距和内容外，是盒子的可视边界。边框的粗细、样式和颜色可以通过CSS进行设置。
4. 外边距（Margin）
外边距是盒子最外层的空间，用于控制不同盒子之间的空间。它不会直接影响盒子内部布局，但会影响其与其他盒子的距离。
盒模型类型
CSS提供了两种盒模型：标准盒模型和IE盒模型（也称为怪异模式）。
标准盒模型
在标准盒模型中，元素的width和height属性只包括内容区域的大小。如果你添加了内边距和边框，那么元素的总宽度和总高度会增加。
IE盒模型
在IE盒模型中，元素的width和height属性包括内容、内边距和边框的大小。这意味着增加内边距和边框不会增加元素的总宽度和总高度。
如何控制盒模型的使用？
可以通过CSS的box-sizing属性来控制使用哪种盒模型：
content-box：应用标准盒模型，这是默认值。border-box：应用IE盒模型。