CSS盒模型

        CSS盒子模型仅仅是一个形象的比喻，每一个可见的HTML元素都是一个盒子，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）以及content（内容）。有两种盒子模型，一种是内容盒子，一种是边框盒子。

内容盒子(W3C盒子) ---  默认盒子模型

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

width 属性仅表示盒子内容所占的宽度

height 属性仅表示盒子内容所占的高度

内容区的宽：width

内容区的高：height

盒子的宽：width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高：height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽：width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRigh

所占屏幕空间的高：height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

内容盒子也称为普通盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。

边框盒子(IE盒子模型)

IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

内容区的宽：width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高：height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽：width

盒子的高：height

所占屏幕空间的宽：width+marginLeft+marginRight

所占屏幕空间的高：height+marginTop+marginBottom

边框盒子也称为怪异盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。

有什么错误请在评论区写下大佬们宝贵的建议