盒子模型（box model）是什么

盒子模型不仅在css里面用到的多，而且在面试地时候问到的也多。

一、 盒子模型概念

盒子模型（box model），就是把 HTML 标签比喻成盒子 box。例如我们在网页上看到每个板块都是一个盒子。在浏览器中点击快捷键F12 可以查看到盒子模型。

二、盒子模型属性

盒子模型是由content（内容）、padding（内边距）、border（边框）和margin（外边距）组成的。

1.content（内容）

content包含width和height，用来存放标签内容（文字、图片、视频）等。
单位：长度值（ px，rem ），百分比 % 。

<div class="box">
		这里是内容哦
</div>

<div class="box1">
	<div class="box2">
 		这里是内容哦
 	</div>
</div>

    .box1{
      width: 100px;
      height: 100px;
      background: red;
    }
    .box2{
      width: 50px;
      height: 50px;
      background: gray;
    }

将box1的宽高设置为100px，box2宽高设置为50px，则刚好可以放下内容“这里是内容哦”，如果内容超出box2的宽高范围，可以设置内容超出状态overflow
overflow: visible | hidden | scroll | auto ;

visible： 默认值。内容不会被隐藏，会简单粗暴的直接呈现在标签之外。
hidden： 超出的内容部分会被隐藏。
好处：可以保持内容范围不变，不会影响页面的的布局。
scroll： 内容会被隐藏，但是浏览器会显示滚动条。
auto：如果内容没有超出width 或者 height 的范围，浏览器不会出现滚动条；如果内容超出浏览器则会显示滚动条。

2、padding（内边距）

又叫填充，是内容和边框的距离，会影响盒子模型的大小。四个方向都有。

padding: 10px; /* 上右下左 */
padding: 10px 20px; /* 上下 左右 */
padding: 10px 20px 30px; /* 上 左右 下 */
padding: 10px 20px 30px 40px; /* 上 右 下 左 。顺时针方向 */
padding-top: 10px; /* 上 */
padding-left: 10px; /* 左 */
padding-right: 10px; /* 右 */
padding-bottom: 10px; /* 下 */

3、border（边框）

盒子的边缘，可以为盒子设置边框颜色、边框宽度、边框样式
border-width： 边框宽度。单位（px，rem）、百分比。也可以是关键词 thin（细）、medium（中）、thick（宽）。
border-color：边框颜色。
border-style：边框样式（实线 solid、虚线 dashed 或者 dotted ）
也可以直接写在一起用空格分开
border: 1px #999 solid; //边框宽度 边框颜色 边框样式

    .box1{
      width: 100px;
      height: 100px;
      /*background: red;*/
      border: 1px red solid;
    }
    .box2{
      width: 50px;
      height: 50px;
      background: gray;
    }

同样的，border四个方向都有

border-top: 5px #000 solid; /* 上 */
border-left: 5px #000 solid; /* 左 */
border-right: 5px #000 solid; /* 右 */
border-bottom: 5px #000 solid; /* 下 */

margin（外边距）

margin是标签于标签之间的距离，长度可以为复数，也是四分方向都有。

marign: 10px; /* 上右下左 */
marign: 10px 20px; /* 上下 左右 */
marign: 10px 20px 30px; /* 上 左右 下 */
marign: 10px 20px 30px 40px; /* 上 右 下 左 。顺时针方向 */
marign-top: 10px; /* 上 */
marign-left: 10px; /* 左 */
marign-right: 10px; /* 右 */
marign-bottom: 10px; /* 下 */

    .box1{
      width: 100px;
      height: 100px;
      /*background: red;*/
      border: 1px red solid;
    }
    .box2{
      width: 50px;
      height: 50px;
      background: gray;
      margin: 10px;
    }

三、盒子模型的两种属性

盒子模型又分为标准盒子模型和IE盒子模型。
标准盒子模型包含了padding、border，标签的实际宽高计算方式为content + padding + border + margin。
IE盒子模型相反不包含padding、border，标签的实际宽高计算方式为content + margin。
两则之间可以通过设置标签的 box-sizing 改变计算方式

box-sizing : content-box | border-box ; 

/*content-box 默认值。在 width 和 height 之外绘制元素的 padding 和 border。即，padding 和 border 不占用 width、height 的值。

border-box 为元素设定的 width 和 height 决定了标签的边界。
即，padding 和 border 共用 width、height 的值。*/