盒模型

CSS盒模型

在网页布局中，我们可以将 HTML 标签看成一个个矩形盒子，盒模型就是用来描述这些矩形盒子所占的空间大小。

相关属性

width 和 height 分别指定了一个元素的宽和高

width：定义元素的宽度；height:定义元素的高度。

border 指元素的边框

border 是 border-width、border-style、border-color 的简写，分别用来设置边框的宽度，样式（实线、虚线、双线等），颜色。

padding 指内边距，是元素内容和边框之间的部分

padding 是 padding-top、padding-right、padding-bottom、padding-left 的简写，分别指上内边距、右内边距、下内边距和左内边距。

margin 指外边距，用来定义元素周围的空间

margin 是 margin-top、margin-right、margin-bottom、margin-left 的简写。

盒模型的分类

盒模型分为：W3C标准盒模型和IE盒模型。

标准盒模型

• 元素的 width、height 只包含内容 content，不包含 border 和 padding 值；
• 盒子的大小由元素的宽高、边框和内边距决定。

IE盒模型

• 元素的 width、height 不仅包括 content，还包括 border 和 padding；
• 盒子的大小取决于 width、height，修改 border 和 padding 值不能改变盒子的大小。

页面进行布局时，可以通过box-sizing 样式进行设置

box-sizing:content-box;//当设置为此值时，该布局的宽高定义的是纯内容content的高度，不包含padding与border；这也正是标准盒模型的特点；

box-sizing:border-box;//当设置为此值时，该布局的宽高定义的是盒子的总体宽高，包含padding于border了；这也正是IE盒模型的特点；