HTML/CSS 04-css盒模型

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,