CSS3学习笔记-盒模型

CSS盒模型是指包含内容（content）、填充（padding）、边框（border）和外边距（margin）几个方面的一个矩形框模型。

内容区（content）：指元素中显示内容的区域，它的大小由width和height属性决定。

填充区（padding）：用于控制内容区周围的空白区域或边距，padding属性可以控制填充区的大小。

边框（border）：位于填充区之外的一层边框区域。border属性可以设置边框的宽度、样式和颜色等信息。

外边距（margin）：定义元素与元素之间的距离。margin属性可以设置元素间的距离大小。

在CSS中，盒模型有两种模式：标准模式和怪异模式。

标准模式中，宽度和高度属性只包含内容区的大小，而在怪异模式中，宽度和高度属性包含了内容区、填充区和边框区的大小。

通常，我们可以通过box-sizing属性来控制盒模型的模式，有以下两个值可选：

• box-sizing: content-box; // 标准模式
• box-sizing: border-box; // 怪异模式

box-sizing为content-box时，元素的尺寸仅包含内容的宽度和高度；

box-sizing为border-box时，元素的尺寸包含了内容、填充和边框的宽度和高度。

使用盒模型可以对页面元素的布局和排版进行精细调整。下面是一些常用的CSS属性和值，可以用于控制盒模型的各个方面：

1. width和height属性，控制内容区的宽度和高度。 例：width: 200px; height: 100px;
2. padding属性，控制填充区的大小和颜色。 例：padding: 10px; padding: 10px 20px; padding: 10px 20px 30px 40px;
3. border属性，控制边框的宽度、样式和颜色。 例：border: 1px solid #000; border-top: 2px dotted red;
4. margin属性，控制元素与元素之间的距离。 例：margin: 20px; margin: 10px auto;
5. box-sizing属性，控制盒模型的模式。 例：box-sizing: content-box; box-sizing: border-box;
6. display属性，控制元素的显示方式。例如，块级元素会独占一行，行内元素会在一行内显示。 例：display: block; display: inline;
7. position属性和top、right、bottom、left属性，控制元素的定位方式和位置。 例：position: absolute; top: 10px; left: 20px;

以上是盒模型中一些常用的属性和值，可以根据实际需求进行选择和组合使用，实现页面布局和排版的效果。