盒子模型相关介绍

盒子模型的概念

1. 盒子模型用来"放"网页中各种元素。
2. 网页设计中的内容，比如文字、图片等元素，都可以是盒子（DIV嵌套）

**下面我们详细了解一下盒子模型。** 先来盒子模型长什么样子吧

一个完整的盒子模型包含了 边框、外边距、内边距、所含的内容

所含的内容

1. 内容由我们自己来确定，我们可以通过p标签，div标签，span标签等标签来实现我们内容的编辑，当然我们可以通过 设置heigth, width的方式对我们的内容进行宽高的调整， 但是需要注意的是这样的方法只对块级标签起作用 ¹

2. heigth, width 的设置方式相同，均可以用长度值，百分比，auto这三种形式去设置。.p{ height: auto; height: 100px; height: 30%; } 其中需要注意的是，百分比是根据它的父级元素进行设置的，举个例子

<div style="height: 100px;">
    <p style="height: 30%;">所包含的内容</p>
  </div>

它高度的30%是根据它父级元素div的100px来进行计算的

内边距（padding）

内边距顾名思义就是内容与边框 border之间的距离

padding 的设置有4种方法

1. 当我们设置1个值的时候，代表着内容与边框的上下左右间隔均为30px;

<div style="padding: 30px;">
         padding--内边距
</div>

2. 当我们设置2个值的时候，30px代表的是与上下边框的距离，50px代表的是与左右边框的距离。

<div style="padding: 30px, 50px;">
          padding--内边距
</div>

3. 当我们设置3个值的时候， 30px代表与上边框的距离，50px代表与左右边框的距离，70px代表的是与下边框的距离。

<div style="padding: 30px, 50px, 70px;">
          padding--内边距
</div>

4. 当我们设置4个值的时候，遵循“上–右--下–左”的顺时针顺序

<div style="padding: 30px, 40px, 50px, 60px ;">  
          padding--内边距
</div>

当然有些时候在代码运行后看到的效果跟设置的内边距不一定匹配，那通常是因为内容的宽和高设置的不合理。

边框（border）

• 边框的属性有很多种：宽度，颜色，边框样式。（前两个属性的设置我们是看不到边框的效果的，只有添加了边框样式我们才可以看到边框的效果）

 <div style="border-color: red;border-width: 30px; border-style: solid;">
          边框属性的设置
 </div>

dotted solid double dashed： 点状 实线 双线 虚线

• 同时边框属性的设置可分别对上边，右边，下边，左边起作用，我们来看一下具体的代码

  .pab{
            border-top: red solid;
            border-right:blue solid;
            border-bottom: green solid;
            border-left:yellow solid;
            background-color: white;
        }

当然要完成这整个图片还有代码需要补充，现在只是演示一下最终的效果

外边距（margin）

• margin设置的是元素与元素之间的距离，与padding相似，也有4个方向的距离设置（上，右，下，左）特别注意的是，在padding值设置的是，值不可以为负值，但是在margin中，值可以是负值
• 赋值的方法其实跟padding类似，但为了更清楚的了解，我还是展示一下

1. 当我们设置1个值的时候，代表着边框与外界的上下左右间距均为30px;

<div style="margin: 30px;">
           margin--外间距
    </div>

2. 当我们设置2个值得时候，代表边框与外界的上下间距为30px，左右间距为50px

<div style="margin: 30px, 50px;">
          margin--外间距
</div>

3. 当我们设置3个值得时候，代表边框与外界的上间距为30px，左右间距为50px，下间距为60px

<div style="margin: 30px, 50px, 60px;">
          margin--外间距
</div>

4. 当我们设置4个值得时候，代表边框与外界的上间距为30px，左右间距为50px，下间距为60px，左间距为80px

<div style="margin: 30px, 50px, 60px, 80px;">
          margin--外间距
</div>

• 有些标签“与生俱来”就有外边距，比如p标签，在没有设置任何外边距的情况下，它本身带有一个外边距为16px，所以在实际开发中我们一定要注
  意这个细节（大家可以尝试一下再看看那些标签具备这种属性）
  

• margin还有一个特殊之处，就是在垂直方向上，两个相邻元素设置外边距，外边距会发生合并，合并后外边距的高度 = 两个发生合并外边距的高度中最大值，例如我设置“第一个”外边距为100px，“第二个”为50px!
  
  比较小的那个外边距会被大的那个所覆盖，这一点比较重要

盒子模型的计算

**盒子模型在页面中所占的宽度是由左边距 + 左边框 + 内容宽度 + 右填充 + 右边框 + 右边距组成。（边距其实指的是padding而是是padding+margin）
width = width(内容区) + padding + border，盒子的 height 计算方法同样是如此

所以如下图，我们盒子的总宽度为 22 + 202 + 100 = 144px

---

1. 块级标签一般独自占据一整行的空间，例如 p标签，div标签等 ↩︎