盒模型和盒模型属性
声明：本人才疏学浅，文中如有错误或不当之处，请各位指出，共同进步，谢谢！
一、什么是盒模型？
盒模型被视为构建现代Web页面布局的核心机制，在CSS中被广泛采用以实现复杂的排版需求和交互效果。它允许所有HTML元素都被视为具有类似盒子的外形，并占据平面空间。从名称上可以看出，在CSS中盒模型本质上就像一个盒子一样，并用于包裹并组织周围的HTML内容以实现预期的显示效果和空间关系。
盒模型的组成：由内容区域、填充区域、边框区域和外边距区域这四个组成部分构成！
二、盒子的大小
盒子模型分为两类：一类是标准型的箱线图模型（Standard Box Plot Model），另一类是基于IE特征的异常盒子模型（IE Anomaly Box Model）。为了更好地阐述这两种类型的特点与差异。
1、标准盒模型的大小
我们通过实验来探究标准盒模型的大小，上代码！
<div class="box"></div>
AI写代码 .box{
width: 300px;
height: 300px;
background-color: green;
}
AI写代码运行代码就会在页面左上角出现设置好宽高的绿色方块
对应的盒模型：
可以看到这个时候方块的大小就是content（内容区）的大小
接下来我们给这个方块加上padding（填充区）：
.box{
width: 300px;
height: 300px;
padding: 10px;
background-color: green;
}
AI写代码这个时候通过控制台我们可以看到这个元素变大了一点
对应的盒模型：
能够观察到盒子尺寸从3.0英寸扩大至3.2英寸之间，在此过程中我们能推断出padding参数确实会对盒体尺寸产生影响；此时盒体的实际尺寸则等于内容区域与边距之和
接着我们又给盒子加上border（边框）：
.box{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid black;
background-color: green;
}
AI写代码这个时候的盒子我们通过控制台看就变成这个大小了：
对应的盒模型：
可以看出宽度和高度分别变为340x340，在这种情况下该盒子整体尺寸即由content（内容区域）、padding（填充区域）及border（边框区域）三部分之和决定
随后为盒子设置外边距（margin）, 以便于我们观察设置后盒子外边距的变化情况, 在下方增加一个名为box2的div元素并为其添加相应的样式设置
.box2{
width: 50px;
height: 50px;
background-color: red;
}
AI写代码效果图：
由于div属于块级元素，默认情况下会占据独立行；因此，在新增红色div时，其位置将位于绿色div下方。
接着给绿色的div加上margin我们观察下变化
.box{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid black;
margin: 10px;
background-color: green;
}
AI写代码
可以看到绿色盒子和红色盒子产生了10px的空白
对应的盒模型
绿色方块的宽高：
可以看到盒子大小并没有因为添加margin变大，还是保持在了340x340。
根据上述实验结果可以看出两个关键点
2、IE怪异盒模型的大小
我们再来看下怪异盒模型的大小，上代码
<input type="submit" class="box" />
AI写代码 .box{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid black;
margin: 10px;
background-color: green;
}
AI写代码
对应的盒模型：
虽然怪异盒模型的大小不受border、padding以及margin的影响而不会被撑大（扩展），而是保持原有尺寸，并且只是centent（内容区）缩小了。
独特的怪异盒模型长度：length（内容区域 + 边框区域 + 填充区域） + margin
三、盒模型的属性
padding（内边距）属性
padding位于边框与内容之间的区域，并且只能为正值而不允许为负值。 padding位于盒子内部，并且在盒子与内容之间。
1）padding的作用和特点：
1、用于调整父级元素与其子级元素间的相对位置关系；
2、用于调节元内容及其内部结构之间的相对位置关系；
3、添加了特定数值后（...），该数值会对容器产生一定的扩展作用；如果希望容器尺寸维持原有数值，则需从容器宽度与高度中扣除所增加的数值；
4、若容器未指定宽度与高度（...），则该容器将自动延伸至其外部边界所限定的空间范围；
5、背景图片的位置设置不会受到容器内填充物的影响；
6、背景颜色将会延伸至填充物所占据的空间范围之内（...）
2）padding的用法
1、Padding复合式写法设置多个方向填充
padding: 15px; /* 一个属性值表示四周都填充15px */
padding: 15px 12px; /* 第一个属性值表示上下填充15px，第二个表示左右填充12px */
padding: 14px 16px 17px; /* 第一个属性值表示上填充14px，第二个表示左右填充16px，第三个表示下填充17px */
padding: 12px 15px 16px 17px; /* 第一个属性值是上填充12px，第二个是右填充15px，第三个是下填充16px，第四个是左填充17px */
AI写代码2、padding设置单一方向
padding-top:（设置上填充）、padding-right:（设置右填充）、padding-bottom:（设置下填充）、padding-left:（设置左填充）
AI写代码margin（外边距）属性
在元素外围设置 margin 时，默认具有透明背景且无色填充，并不会影响元素尺寸。允许设置正值或负值。
1）margin的作用和特点：
1、调节同级元素的位置关系。
2、margin位于元素外围空白区域。
3、不影响实际尺寸但会占用更多空间；
2）margin的用法
1、margin复合式写法设置多个方向的外边距
margin: 15px; /* 一个属性值表示四周外边距15px */
margin: 15px 12px; /* 第一个属性值表示上下外边距15px，第二个表示左右外边距12px */
margin: 14px 16px 17px; /* 第一个属性值表示上外边距14px，第二个表示左右外边距16px，第三个表示下外边距17px */
margin: 12px 15px 16px 17px; /* 第一个属性值是上外边距12px，第二个是右外边距15px，第三个是下外边距16px，第四个是左外边距17px */
AI写代码2、margin设置单一方向的外边距
margin-top:（设置上外边距）、margin-right:（设置右外边距）、margin-bottom:(设置下外边距)、margin-left:（设置左外边距）
AI写代码借助于 margin 实现元素的水平居中对齐效果（例如采用 margin-left: 10px； margin-right: 10px；或 margin: 10px auto；等任意一种方式均可达到该目的）
margin:0 auto; /*设置对象上下间距为0，左右自动*/
margin-leftauto:auto;
margin-right:auto;
AI写代码border（边框）的属性：
1、边框分为上下左右四个方向：
- 上边缘采用
border-top - 下边缘采用
border-bottom - 左边缘采用
border-left - 右边缘采用
border-right
可以选择单独设置某一边
1）border的用法
1、border 的复合式写法
border: 3px solid green; /* 表示四周边框宽度为3px、实线、边框颜色为绿色*/
AI写代码2、border 设置单边的边框样式
border-top:#f0f solid 10px; /*上边框的样式*/
border-right:#00f dotted 20px; /*右边框的样式）*/
border-bottom:#0ff dashed 15px; /*下边框的样式*/
border-left:#0f0 double 25px;/*左边框的样式*/
AI写代码3、border-width 的复合式写法
border-width:5px 10px 15px 20px; /*border-width的复合式写法*/
border-top-width:5px; /*上边框的宽度*/
border-right-width:10px; /*右边框的宽度*/
border-bottom-width:15px; /*下边框的宽度*/
border-left-width: 20px; /*左边框的宽度*/
AI写代码4、border-style 的复合式写法
border-style:solid dashed dotted double；/*border-style的复合式写法*/
border-top-style:solid; /*上边框的线型*/
border-right-style:dashed; /*右边框的线型*/
border-bottom-style:double; /*下边框的线型*/
border-left-style:dotted; /*左边框的线型*/
AI写代码5、border-color 的复合式写法
border-color:#ff0 #f0f #0ff #0f0；/*border-color的复合式写法*/
border-top-color:#ff0; /*上边框的颜色*/
border-right-color:#f0f; /*右边框的颜色*/
border-bottom-color:#0ff; /*下边框的颜色*/
border-left-color:#0f0; /*左边框的颜色*/
AI写代码