css盒子模型（框模型）属性

一、概述

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距padding、 边框 border、外边距 margin。

这五个属性可以通过 CSS 来设置，用来控制 HTML 元素的位置和尺寸。盒模型是 Web 开发中非常重要的概念，可以帮助开发者创建一致、可预测的布局效果。在盒模型中，元素的实际大小由内容大小、内边距、边框和外边距共同组成。其中，内容大小由宽度和高度属性来控制，内边距由 padding 属性来控制，边框由 border 属性来控制，外边距由 margin 属性来控制。通过调整这些属性的值，可以实现各种不同的布局效果。

二、实例解析

1. 宽度 width：用于设置盒子的宽度。可取数值、百分比等。

代码实例：

.box {
  width: 200px;
}

        2.高度 height：用于设置盒子的高度。可取数值、百分比等。

代码实例：

.box {
  height: 200px;
}

        3.内边距 padding：用于设置盒子边框与内容之间的距离。可取数值、百分比等。

代码实例：

.box {
  padding: 20px;
}

        4.边框 border：用于设置盒子的边框。可设置边框样式、边框宽度、边框颜色等。

代码实例：

.box {
  border: 1px solid black;
}

        5.外边距 margin：用于设置盒子与其他盒子之间的距离。可取数值、百分比等。

代码实例：

.box {
  margin: 20px;
}

三、css常见盒模型区域

CSS常见的盒模型区域包括：

1. 内容区域（content area）：包含元素的实际内容，可以通过设置 width 和 height 属性来定义。

2. 内边距区域（padding area）：内容区域周围的空白区域，可以通过设置 padding 属性来定义。

3. 边框区域（border area）：内边距区域周围的线框区域，可以通过设置 border 属性来定义。

4. 外边距区域（margin area）：边框区域周围的空白区域，可以通过设置 margin 属性来定义。

在标准盒模型中，宽度（width）和高度（height）仅包含内容区域，而在IE盒模型中，宽度（width）和高度（height）包含内容区域、内边距区域和边框区域，需要通过设置box-sizing属性来切换盒模型。

四、css padding 写法

CSS padding可以使用以下的写法：

1. 四个方向分别设定：padding-top、padding-right、padding-bottom、padding-left。例如：padding: 10px 20px 30px 40px;

2. 水平和垂直方向分别设定：padding-top、padding-bottom、padding-left、padding-right。例如：padding: 10px 20px;

3. 统一设定四个方向的padding：padding。例如：padding: 10px;

4. 分别设定水平和垂直方向的padding：padding-vertical、padding-horizontal。这是一个比较新的写法，可以使用下面的代码：

padding-vertical: 10px;
padding-horizontal: 20px;

五、padding 简写写法

CSS padding属性可以使用简写形式来设置。具体写法如下：

padding: top right bottom left;

其中，top、right、bottom、left分别表示上、右、下、左四个方向的padding值。如果某个方向的padding值不需要设置，则可以用auto占位符表示。

例如：

padding: 10px; /* 四个方向的padding值都为10px */
padding: 10px 20px; /* 上下方向padding值为10px，左右方向padding值为20px */
padding: 10px 20px 30px; /* 上方向padding值为10px，左右方向padding值为20px，下方向padding值为30px */
padding: 10px 20px 30px 40px; /* 上、右、下、左方向padding值依次为10px、20px、30px、40px */
padding: 10px auto; /* 上下方向padding值为10px，左右方向padding值为auto */

需要注意的是，省略的padding值会被自动补齐为0。因此，如果只需要设置左右方向的padding值，可以写成如下形式：

padding: 0 20px;

这种写法等价于：

padding: 0 20px 0 20px;