盒子模型的详细介绍

一级标题盒子模型的组成

盒子模型

盒子模型的基础

盒子模型一般由四个部分组成，margin（外边距），padding（内边距），border（边框），content（内容）

盒模型的四个部分

• content box:这个区域是用来显示内容的，大小可以通过设置width和height
• padding box:这个区域是用来content与border之间的空白区域，大小通过padding相关属性设置
• border box:是夹在外边距(padding)和(margin)之间的，这个大小通过margin相关属性设置
• margin box:这一块区域主要是负责调整盒子模型的位置，大小通过相关属性设置。
  如下图:
  

标准盒模型

标准盒模型
在标准盒模型中，如果你设置了width和height，那么你仅仅设置的是content的宽和高，这与我们接下来讲的替代（IE）盒模型不是一个概念。
在这个模型中，真正的宽和高是width和height加上padding和border的宽高。
例如，假设我们在css中定义了width,height,padding,border,margin。
如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。

替代盒模型

这个模型里面width所设置的宽度就是真实所见的宽度，而内容宽度是该宽度减去边框和内填充部分。

一般情况下，浏览器都会使用标准模型，那如果我们想要在两种模型之间来回切换，该怎么做呢，很简单，我们只需要通过设置box-sizing:border-box就可以实现将标准模型变成替代模型。通过设置box-sizing:content-box就可以成为标准模型。

盒子模型的成分分析

margin（外边距）
margin,它包含了上下左右四条边，我们可以设置它的每一条边，当然我们也可以上下左右单独设置。关键的一点是margin可以有负值，而padding没有。
边距属性：

margin-top:上外边距
marign-bottom:下外边距
maigin-left:左外边距
maigin-right:右外边距

padding（内边距）
padding其实和margin是差不多的，也可以同时设置它的每一条边的值，也可以分开设置，但是它不能有负值。
边距属性:

padding-top:上边距
padding-bottom:下边距
padding-left:左边距
padding-right:右边距

border(边框)
border它和上面两个有点不一样，它有三个属性，border-color（边框颜色），
border-style（边框样式）,border-width(边框宽度)，这三个值是放在border的后面，顺序是无所谓的。接下来我们逐一介绍相关属性。
border实例1

/1.使用简写属性，同时设置四条边界，四条边界的颜色，样式，宽度是一样的。/
2.border: 2px solid blue;
3./下面的样式与上面的样式等价/
4.border-top:2px solid blue;
5.border-bottom:2px solid blue;
6.border-left:2px solid blue;
7.border-right:2px solid blue;

border color(边框颜色)

1.border-top-color:上边框颜色;
2.border-bottom-color:下边框颜色;
3.border-left-color:左边框颜色;
4.border-right-color:右边框颜色;

border width(边框宽度)

属性值有:

1.thin:定义比较细的边框。
2.medium：定义中等的边框。（默认）
3.thick:定义粗的边框。
4.length:允许您自定义边框的宽度。

border style（边框样式）

边框样式可以有1到4个值：

1.border-style:dotted //顺序:所有方向
2.border-style:dashed dotted //顺序：上下 左右
3.border-style： dashed dotted solid //顺序：上（左右） 下
4.border-style:dashed dotted solid dashed //顺序：上右下左（相当于顺时针）

border radius(圆角属性)

圆角边框其实和上面的边框样式有点相似，也是按照顺时针的方向设置属性。


总结:以上就是盒子模型的一些相关属性的详解，希望能帮到大家!