盒模型（概念、组成、内外边距、实际大小计算）

**

盒模型**

1、什么是盒模型
（1）盒模型的概念：
css定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
（2）盒模型的组成：
css盒子模式都具备这些属性：内容(content)、填充(padding)、边框(border)、边界(margin)

用日常生活的盒子来理解这四个属性:
1.内容（content）盒子里装的东西；
2.填充（padding）就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
3.边框（border）盒子本身；
4.边界（margin）盒子与盒子之间的空隙，或者是大盒子与嵌套在里面的小盒子之间的空隙。

2、padding属性

1.padding的定义：
①padding是元素内容到元素边框之间的距离，叫内填充、补白或内边距；
②padding区域内会显示背景色和背景图片；

2.用法：

1）用来调整内容在容器中的位置关系
2）用来调整子元素在父元素中的位置关系。
（注：padding属性需要添加在父元素上。）
3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。

3.padding属性值的4种形式：

一个值：padding:2px; 四周的填充都是2px
二个值：padding:10px 20px ; 上下 左右
三个值： padding:10px 20px 30px ; 上 左右 下
四个值：padding:10px 20px 30px 40px; 上 右 下 左

3、margin属性

边界：margin,在元素外边的空白区域，被称为外边距。
margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界

属性值的4种方式

四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向
margin:2px; 定义元素四边边界为2px
margin:2px 4px; 定义元素上下边界为2px，左右边界为4px
margin:2px 4px 6px; 定义元素上边界为2px，左右边界4px，下边界为6px， margin:2px 4px 6px 8px; 定义元素上、右边界为2px，下右边界为6px，左边界为8px margin:0 auto; 在浏览器中横向居中。
定义元素上、下边界为2px，
说明：可单独设置一方向边界，如：margin-top:10px;

4、border的使用方法

border:边框宽度 边框风格 边框颜色;
例如：border:5px solid #f00

边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)

5、元素总尺寸计算方法
盒子的实际大小（公式）：

实际宽 =左右margin+左右border+左右padding+width
实际高 =上下margin+上下border+上下padding+height

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
**注意：**增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素的总尺寸。