如何定义盒模型：
在CSS盒子模型理论中，页面中所有的元素都是看成一个盒子，并且还占据一定的空间。
一个页面是由很多这样的盒子组成的。这些盒子之间都会相会影响，因此我们掌握CSS盒模型相当重要。需要理解盒模型，我们需要从两个方面去考虑：一.理解一个单独盒子的内部结构，二是理解多个盒子之间的相互关系！
盒子的组成：盒子是由（content（内容） + padding（内边距）+ border（边框） + margin（外边距） ） 四个属性组成。此外，在盒子模型中，还有width（宽度）和 height（高度）两个辅助属性。
*****记住，所有的元素都是可以看成一个盒子。
下图是盒子模型示意图：
下面介绍盒子模型的具体属性：
border： （边框） 元素边框
margin： （外边距） 用于定义页面元素与元素之间的距离
content： （内容） 可以是文字或是图片
padding：（内边距）用于定义内容与边框的距离（通常也称为补白）
--------------------华丽分割线-----------------------------
1.内容区
内容区是CSS盒子模型的中心，它呈现的是盒子的主要信息内容，这些内容都可以是文本、图片等多种类型、内容区是盒子的必要组成部分，其他三个部分都是可以选的；内容区还有三个属性，
分别是：width，height，overflow。使用width和height属性可以指定盒子的宽度和高度。这里必须要注意的是：width和height这俩个属性是针对内容区而言的，并不包括padding部分。overflow的作用是当盒子的内容部分溢出时，超出部分，可以是 使用overflow来处理。
2.内边距
内边距，指的是盒子内容与border之间的空间，可以看作是内容区的背景区域。
关于内边距的属性又五种，分别是padding-left / padding-top/ padding-bottom /padding-ring / 以及综合来这四种方式的padding。使用这个方式直接可以简写边距：如
padding：10px 20px 20px 20px ( 指的是上右下左） ----->值得注意的是。方向都是从上边距开始-然后是右=====》下=======》左；这样的方式区写。如果只写两个：如padding：10px 30px; 表示上下边距是10px 左右边距30px；
3.边框
在CSS 盒子模型中，边框的属性又border-width/ border-style/ border-color/ 以及综合了这三个方式的 border。 其用法如下：border:1px solid red ; 其含义是定义一个边框为1px，实线。红色的一个边框。 其中根据意思我们就可以得知border-widht表示的是线宽。border-style表示的是线的类型，border-color：表示的是线的颜色。
4.外边距
外边距，指的是两个盒子之间的距离，也可能是子元素与父级元素之间的距离，也可以是兄弟之间的距离。
外边距使得元素之间不必紧凑的联在一起，是CSS布局的一个重要的手段。
外边距的类型同内边距一样，也有五种。可以分别来说就是 margin-top/margin-right/ margin-bottom / margin-left .。综上四种方式，可以直接使用margin来表示；如margin：10px 10px 20px 20px ; 表示的是距离其他元素边距分别为：上边距为10px，右边距10px, 下边距10px，左边距10px 。
同时，CSS允许给边边距属性指定负数值，当指定的负边距距离时，整个盒子可以向指定负值相反的方向去移动，这样就产生来盒子重叠的效果。这也是传说中的“负margin技术”。
-----------------------华丽分割线----------------------------------------
总结：
这一节，就先简单的介绍盒子模型（介绍来盒子模型的组成部分，以及每个组成是什么含义，以及用法）。盒子模型在前端开发过程中十分重要！一定要掌握透彻！后面可以还会分享盒子边距重叠以及如何解决。今天就先介绍到这里啦～～～2019-04-22 22:16:28
原文地址：https://www.cnblogs.com/yaogengzhu/p/10753472.html