在初步接触HTML和css之后，对于其中元素的功能甚是痴迷。近来，盒子模型这一名词让我有些懵懂，而不知所措。在经过谷歌洗礼之后，对盒子模型这一名词有了初步认识，为此特意写了下来，如有错误，欢迎探讨。
1.什么是盒子模型？
其实我也不太清楚。但我将它拟作一个事件，来加深记忆。什么事件？
假设你是一个送外卖的快递员。此时此刻，你后背有个箱子，箱子里面是饭盒，饭盒里面是饭。然后呢，我们把饭盒比作边框（border），内容是盒饭里面装的饭团。padding就是饭团到盒饭的距离，margin指的是饭盒到快递箱边框的距离。padding的值取多大，取决于你饭团到饭盒的距离，同理margin的取值与饭盒到箱子边框的距离有关。
我们再送外卖的快递员送快递的事件比作元素，有时候箱子可能装的是饭，但有时候箱子装的就不一定是饭了。比如说，可能是衣服，也可能是其他东西。也就是说，并不是所有的元素（送快递事件）都有padding和margin值，但是所有的元素都可以用盒子模型来描述（即，可以用送快递事件来表述）。
为了更好的阐述盒子模型的概念，看图：
margin指的是红色border到外边框的距离，padding指的是内容到border的距离。
2.盒子模型在应用中的注意事项
宽度计算：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
高度计算：margin-top+border-top+padding-top+width+padding-bottum+border-bottum+margin-bottum
需要注意的是在浏览器中，系统会默认设置margin和padding值，所以一般我们要用*{margin：0；padding：0；}来清除系统默认值的设置。
还有一点，当内容背景被完全填充，border透明时，背景内容将作用于内容，内边距，以及边框的区域。
3.盒子模型的应用
我们知道，元素一般分为，块级元素，行级元素。
例如：
* a – 锚点
* abbr – 缩写
* acronym – 首字
* b – 粗体(不推荐)
* big – 大字体
* br – 换行
* em – 强调
* font – 字体设定(不推荐)
* i – 斜体
* img – 图片
* input – 输入框
* label – 表格标签
* s – 中划线(不推荐)
* select – 项目选择
* small – 小字体文本
* span – 常用内联容器，定义文本内区块
* strike – 中划线
* strong – 粗体强调
* sub – 下标
* sup – 上标
* textarea – 多行文本输入框
* tt – 电传文本
* u – 下划线
* var – 定义变量
2.块级元素
* address – 地址
* blockquote – 块引用
* center – 举中对齐块
* dir – 目录列表
* div – 常用块级容易，也是css layout的主要标签
* dl – 定义列表
* fieldset – form控制组
* form – 交互表单
* h1 – 大标题
* h2 – 副标题
* h3 – 3级标题
* h4 – 4级标题
* h5 – 5级标题
* h6 – 6级标题
* hr – 水平分隔线
* isindex – input prompt
* menu – 菜单列表
* noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容）
* noscript – ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol – 排序表单
* p – 段落
* pre – 格式化文本
* table – 表格
* ul – 非排序列表
其中块级元素可以使用盒子模型的属性，而行内元素必须转化为块级元素才可以使用属性值。