什么是盒模型

什么是盒模型

在讲盒模型之前先给大家说一下盒模型在前端里作用以及盒模型的概念：

  在前端中盒模型可谓是十分重要的，它是CSS进行页面布局的基石，在页面CSS布局中盒模型规定了网页元素如何排列显示以及元素之间的相互关系。在H5中CSS样样式定义所有的元素都可以拥有像盒子一样的平面空间和外形。（如下图所示）整个盒模型包含了：内容区（content）、补白或填充（因叫法不同；padding）、边框（border）、边界或外边距（margin）这就是盒模型。

盒子组成部分的属性及用法

从盒模型的定义中我们了解到了盒模型是由内容区（content）、填充区（padding）（注：在本文中就称填充区）、边框（border）及外边距（margin）（注：在本文中就称外边距）4个部分组成，那么它们是怎么来定义的，每个组成部分的属性用法又是什么？
Content（内容区）：它是整个元素的宽和高，是属于元素内容的区域

border（边框）：它是盒子的边缘既是边框

Padding（填充区）：它是盒子边框与内容之间的间距，或者说是父元素与子元素之间的内边距

Margin（外边距）：它是盒子边框以外的外边距，或者说是同辈元素之间的间距

一、边框的属性：

边框宽度：

border-width:1px; ：设置边框的宽度的，在设置边框宽度时会用到此属性默认为1px，在网页中很多修饰性线条都是由边框来实现的，在给属性加值得时候需要加上单位，如px（像素），em…

边框线型：

border-style:solid: ：设置边框的线型样式，边框线性也有多个值，如：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)…

边框颜色：

border-color:; ；设置边框的颜色，默认为黑色。

Border-style:none; ；取消边框，在css样式中如盒子有单一方向用不到边框可用此属性取消边框

扩展：border-style:none;的应用场景：加了超链接的插入图片，在IE低版本浏览器会出现边框。解决方法：给img 这个标签添加border-style:none;。

边框有四个方向，必要时可单独设置一方向边框属性，

1：border-top: 上边框，可给边框设置宽度、线型、颜色。

2：border-right: 右边框，可给边框设置宽度、线型、颜色。

3：border-bottom: 底边框，可给边框设置宽度、线型、颜色。

4：border-left: 左边框，可给边框设置宽度、线型、颜色。

为盒子写边框属性时，为方便书写，有复合式写法：

设置边框宽度复合式写法：

1：border-top-width:10px ; 上边框的宽度

2：border-right-width:20px; 右边框的宽度

3：border-bottom-width:30px; 下边框的宽度

4：border-left-width: 40px; 左边框的宽度

border-width:10px 20px 30px 40px; border-width 的复合式写法

设置边线型度复合式写法：

1：border-top-style:solid; 上边框的线型

2：border-right-style:dashed; 右边框的线型

3：border-bottom-style:double; 下边框的线型

4：border-left-style:dotted; 左边框的线型

边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框

border-style:solid dashed dotted double; border-style 的复合式写法

设置边框颜色复合式写法：

1：border-top-color:#f00; 上边框的颜色

2：border-right-color:#ff0; 右边框的颜色

3：border-bottom-color:#00f; 下边框的颜色

4：border-left-color:#fff; 左边框的颜色

border-color:#f00 #ff0 #00f #fff; border-color 的复合式写法

单一属性值复合式写法：

如果边框的属性值我用1、2、3、4、来代替，那么它们的复合式写法可有以下几种：

1：border:1；2；3；4； ：1、上 ；2、右 ；3、下； 4、左

2：border:1；2；3； ：1、上；2、左和右3、下

3：border:1；2； ：1、上和下；2、左和右

4：border:1； ：1、上、下、左、右

多属性值复合式写法：

复合式写法：分开设置每个边的边框样式

1：border-top:#f00 solid 10px;

2：border-right:#0f0 dotted 20px;

3：border-bottom:#00f dashed 30px;

4：border-left:#fff double 40px;

border：10px solid #ff0; 代表四个边框样式是统一的，最复合式的写法；

注：边框的大小，是会添加在元素原有大小之外的，会改变元素原本的大小；也就是说边框是占位置的（在标准盒模型的情况下）。

二、padding属性padding在盒子里的属性作用：

可以用来控制父元素和子元素之间的位置关系

可以用来控制元素和内容之间的位置关系

padding的特点：

再给盒子添加了padding值之后，padding值会把元素原有的盒子大小撑大，如果让元素原本盒子大小不变得话，需要在元素的宽高上减掉所加的padding值。 padding属性对背景图片是不起作用的，可以说背景图片的位置，是不受padding的影响的。如果元素本身有背景色，那么背景色会延展到padding区域。

padding的使用方法

方法一：给盒子单个方向加padding值

1：padding-top:10px; 上填充

2：padding-right:10px; 右填充

3：padding-bottom:10px; 下填充

4：padding-left:10px; 左填充

方法二：给盒子所有方向加padding值（复合式写法）

1：padding： 1 2 3 4 ： 1、上；2、右；3、下；4、左

2：padding： 1 2 3 ： 1、上；2、左和右；3、下

3：padding： 1 2 ： 1、上和下；2、左和右
4：padding： 1 ： 1、上 、右、 下、 左三、

margin属性

margin在盒子里属性的作用：

用来控制同辈元素之间的位置关系。

margin的特点：

margin是显示在元素边框以外的空白区的，给元素加上的margin值是不需要减去的，而且margin属性的值可以施加负值。

magin的使用方法：

方法一：给盒子单个方向加margin值

1：margin-top:10px; 上外边距

2：margin-right:10px; 右外边距

3：margin-bottom:10px; 下外边距

4：margin-left:10px; 左外边距

方法二：给盒子所有方向加margin值（复合式写法）

margin：1 2 3 4 ：1、上；2、右；3、下；4、左

margin：1 2 3 ：1、上；2、左和右；3、下

margin：1 2 ：1、上和下；2、左和右

margin：1 ：1、上、右、下、左

在盒模型中margin属性除了可以设置外边距以外，还可实现元素水平居中：margin：0 auto；、margin-left:auto;、margin-right:auto;共三种属性值。

margin的特性：

在盒模型中margin属性是可以写负值的，可以用此来实现元素位置调整，而且margin的值是不会影响到元素的实际大小，但是会影响到其他元素所占区域。

补充：盒模型margin属性的bug

盒模型中如果给多个元素设置margin值，上下两个相邻元素之间的margin值会重叠显示，会用相邻元素margin的最大值显示

在盒模型中当给元素里第一个子元素（块状元素）添加margin-top值的时候，会错误的把这个margin-top值添加给父元素。此条件建立在当前元素下没有浮动和边框的条件下。

这两种bug都可以用BFC解决，其中bug2给大家推荐几种方法：

方法1：给父元素添加overflow：hidden；属性（比较好用）

方法2：给父元素添加边框

方法3：把元素中的margin属性改用padding属性

方法4：给父元素和子元素添加浮动属性

最后给大家提示一下：margin就是用来控制同辈元素之间的位置关系；padding就是用来控制父子元素之间的位置关系。

标准盒模型和怪异盒模型

标准盒模型和怪异盒模型区别就在于他们的组成部分

标准盒模型所占位置组成：

宽高组成content+padding+border+margin

元素宽度实际占有的位置大小：宽+左右padding+左右border+左右margin

元素高度实际占有的位置大小：高+上下padding+上下border+上下margin

怪异盒模型：

元素的宽度：width（content+border+padding）+margin

属性：box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）

相较而言，标准盒模型的组成属性是分开组成的，而怪异盒模型的content、border、padding属性可以看做一个组成部分，再加上margin属性由此构成了整个怪异盒模型

盒模型的大小计算

从盒模型的定义中我们了解到了盒模型是由4个部分组成，那么盒子的大该如何计算呢？由定义我们可以想到盒子的大小应该是：内容区（content）+填充区（padding）+边框（border）+外边距（margin）=盒子大小。但是，在盒模型这四个属性中除了content属性其余属性值都有4个属性，那么盒子的宽高大小可以用此方法计算：

盒子元素的宽度:

由margin-left+border-left+padding-left+width(content内容元素的宽度)+padding-right+border-right+margin-right=元素的总宽度。如下图2-1、2-2所示

                                                              图2-1

                                                               图2-2

盒子元素的高度:

由margin-top+border-top+padding-top+height(content内容元素的高度)+padding-right+border-right+margin-right=元素的总宽度。如下图2-3、2-4所示

                                                          图2-3

                                                                图2-4