css盒模型的组成部分,css margin,css padding,css盒子的实际大小
目录：
一、盒模型的组成部分
二、margin
三、padding
四、盒子的实际大小
一、盒模型的组成部分
盒模型是Css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定 义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。
下图是标准盒模型
基本上我们的所有的常规网站，页面上的各种特效、文本、标题、内容、图片、视频、按钮、链接....所有的东西，都可以看做是有一个盒子装起来，然后由网站的开发者来进行按序的排列，排列到想要的位置，然后再进行好看的样式编辑，最后在做出炫酷的特效。
但是这一切的一切，都是建立在盒模型的基础上的。
盒模型从外到内分别是 margin、border、padding、content组成 ，分别是 外边距、边框、内边距和内容。
简单的讲，
外边距就是两个盒子之间的距离
边框就是盒子的边缘，就是围着盒子的线
内边距就是盒子和内容之间的距离，因为盒子里可能还有盒子或者盒子里内容需要跟盒子边框有些间距，所以会出现内边距
内容就是每个元素中的东西
二、margin
margin的使用方法
外边距: margin,在元素外边的空白区域，被称为外边距。
margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
属性值的4种方式:
四个值:上 右 下 左
margin:10px 20px 30px 40px; /* 元素上右下左的外边距分别是10px,20px ,30px,40px */
三个值:上 左 右 下
margin:10px 20px 30px; /* 元素上边距是10px，左右边距是20px ,下边距是30ox */
二个值:.上下 左右
margin:10px 20px; /* 元素上下边距是10px，左右边距是20px */
一个值:四个方向
margin:20px;/ *定义元素四边边距为20px*/
让一个有宽度并且宽度生效的元素在父元素中水平居中
margin:0 auto; /* 上下外边距为0，左右外边距自适应 */
注意：
可单独设置一个方向
margin-top:10px /* 上方向 */
margin-right:30px /* 右方向 */
margin-bottom:20px /* 下方向 */
margin-left:40px /* 左方向 */
三、padding
padding的使用方法
内边距（内填充、补白）: padding,在设定页面中一个元素内容到元素的边缘(边框)之间的距离。也称补白。
用法及注意:
1)用来调整内容在容器中的位置关系
2) padding值是额外加在元素原有太小之上的，如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性值
属性值的4种方式:
四个值:上右下左
padding:0px 0px 0px 40px;
三个值:上 左右下
padding:10px 20px 30px;
二个值:上下左右
padding:10px 20px;
一个值: 四个方向
padding:20px; /*定义元素四周填充为20px*/
注意：
可单独设置一方向填充
padding-top:10px; /* 上方向 */
padding right:10px; /* 右方向 */
padding-bottom:10px; /* 下方向 */
padding-left:10px; /* 左方向 */
四、盒子的实际大小
盒子的实际宽 = 左右margin+左右border +左右padding+ width,
盒子的实际高=上下margin+.上下border+.上下padding + height,
例如:
一个盒子的margin为20px, border 为1px, padding 为10px,
content的宽为200px、
高为50px,
宽 = margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px,
高 = margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px,
