盒子模型

盒子看作比如

等

内容是文字图片或者其他标签元素

padding盒子的内边距

margin外边距（两个盒中间的距离）

盒模型边框border

内填充外边距边框都有四个方向top left right buttom

e.g., padding-top

实际宽度是内容+左右的内填充+边框

块级标签都具备盒子模型特征

盒模型内的内容可以是文字，图片，标签等等。视频应该也可以,盒子与盒子内的内容之间的距离用 padding 表示,两个盒模型之间的距离用 margin 表示,盒模型的边框用 border 表示.内填充，外边距，边框都有四个方向top,left right,buttom.盒

块级元素标签具备盒子模型的特点.css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=

左边界(margin)+左边框(border)+左填充(padding)+内容宽度(width)+右填充(padding)+右边框(border)+右边界(padding)