CSS盒模型

盒模型

盒模型是css中一个重要的概念，也是css布局的基石，它规定了网页元素如何显示以及元素间相互关系，css定义所有的元素都可以拥有像盒子一样的外形和平面空间。

什么是盒模型

顾名思义，css盒模型本质上是一个盒子，封装周围的HTML元素，它包括content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）四个属性。它们的关系是margin包着border包着padding包着content。就像盒子一层一层地包着一样，这就是所说的盒模型。

打开谷歌浏览器，按下F12，然后把右边栏的滚动条拉到最下面你就会看到这样一张图：

此图很直观的展示出了什么是盒模型！

看这段代码：

 <style>
        .box {
          width: 100px;
          height: 100px;
          border: 15px solid pink;
          padding: 30px;
          margin: 40px;
          background: yellow;
        }
 </style>
        
        <div class="box"></div>

效果如下：

在上面中的例子

• content： 内容区

• border： 盒子的边缘

   .box {
    width: 100px;
    height: 100px;
    border: 5px solid gray;
    padding: 30px;
    margin: 40px;
    background: red;
  }
  

改变border:的大小，变成了

• padding：
  作用：用来控制父元素和子元素之间的位置关系；
  用来控制元素和内容之间的位置关系；

 .box {
          width: 100px;
          height: 100px;
          border: 5px solid gray;
          padding: 50px;
          margin: 40px;
          background: red;
        }

• 添加了padding值之后，padding值会把元素原有的大小撑大； 如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding；

• padding属性对背景图片 是不起作用的，可以说背景图片的位置，是不受padding的影响的。

• 背景色会延展到padding区域。

  使用方法：

  方法一 ：
  padding-top:30px; 上填充
  padding-right:30px; 右填充
  padding-bottom:30px; 下填充
  padding-left:30px; 左填充

  方法二 ：
  padding： 1 2 3 4 1、上 2、右 3、下 4、左
  padding： 1 2 3 1、上 2、左和右 3、下
  padding： 1 2 1、上和下 2、左和右
  padding： 1 1、上 右 下 左

接下来是margin，为了方便观察我们加个类名为box2的div，并且加上样式：

  .box {
          width: 100px;
          height: 100px;
          border: 5px solid gray;
          padding: 50px;
          margin-bottom: 40px;
          background: red;
        }
        .box2 {
          width: 100px;
          height: 100px;
          background: blue;
        }
        </style>
        <div class="box"></div>
        <div class="box2"></div>

效果如下

可以看出，盒子box的底部有40px的空白

• margin：
  作用：控制同辈元素之间的位置关系。
  特点： margin是现在是在元素边框以外的空白区。
  使用方法：

  方法一：
  margin-top:30px; 上外边距
  margin-right:30px; 右外边距
  margin-bottom:30px; 下外边距
  margin-left:30px; 左外边距]

  方法二 ：
  margin：1 2 3 4 1、上 2、右 3、下 4、左
  margin：1 2 3 1、上 2、左和右 3、下
  margin：1 2 1、上和下 2、左和右
  margin：1 1、上 右 下 左

• 实现元素水平居中的方法

	  .box {
	    margin: :0 auto;;
	}

• 注：margin 是可以写负值的，padding不可以写负值；
  margin不会影响元素的实际宽高，但是也会曾加的他的所占区

盒模型一般分为两种：

标准盒模型

元素的宽度：宽高（content）+padding+border+margin
元素宽度实际占有的位置大小： 宽+左右padding+左右border+左右margin
元素高度实际占有的位置大小： 高+上下padding+上下border+上下margin

怪异盒模型

即IE盒子模型，IE浏览器实现的一种怪异的盒子模型，怪异之处在于相比标准盒模型：

元素的宽度：width（content+border+padding）+margin
（ 即 width/height 包含了 padding 和 border 值 ）

标准盒模型和怪异盒模型的区别

• 计算宽度和高度的不同。
• 标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin（ width/height 只是内容高度，不包含 padding 和 border 值 ）
• 怪异盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin（ width/height 包含了 padding 和 border 值 ）