十五，盒子模型

盒子模型：

在这里插入图片描述

作用： 进行页面布局，用来改变内外间距
适用范围： div，body，table等块状显示的
属性： width，height，border（边框），margin（外边距，对象与对象之间的距离），padding（内边距，内部内容和边框的距离）
border，margin，padding四个属性都可以拆分为4个小类，
比如margin，分为margin-top，margin-left，margin-right，margin-bottom，
另外2个同理，简写是margin:10px 10px 10px 10px;（上，右，下，左）
padding:10px 10px 10px 10px;
盒子的总高度=(margin-top)+(border-top)+(padding-top)+(content)+(padding-bottom)+(border-bottom)+(margin-bottom)的高度，宽度同理
属性设置
1,边框属性比如margin，如果只设置2个，就表示上下，左右
比如margin:0px 0px;
2,如果只设置1个，表示上下左右都是一个值。
其他属性同理
box-sizing：padding的距离由哪里产生
属性值1：content-box：在宽度和高度之外绘制元素的内边距和边框（默认效果）
属性值2：border-box：已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度（设置了这个属性以后，padding的属性包含在内，比如整个width是200px，设置了这个属性为20px后，原先的宽度就200-20）
语法：box-sizing:border-box