盒子模型

什么是盒模型

css定义所有的元素都可以拥有像盒子一样的外形和平面空间，都包括边界、边框、补白、内容区，背景，这就是盒子模型。

为什么是盒模型

传统网页设计是以表格为基础，所有元素都通过表格来确定自己的外框和位置。但是也会有一些缺点：传统表格布局如果要给一段文本加上一个彩色边框都需要添加一个表格，这未免有点太复杂了，但是以前网页就是应用的这种技术。
CSS完全不同与表格，明确规定所有的元素都可以定义自己的模型。

盒子结构

所有的网页内容都包括四个区域：灰色的内容区（），白色补白区（padding），黄色边框区（border）以及浅蓝色的边界区（margin）。

易错点：width、height属性指的是盒子里内容部分的属性不是指的整个盒子的宽和高。

盒模型尺寸计算

• 元素总宽度：左边界+左边框+左补白+宽+右补白+右边框+右边界
• 总高度：上边界+上边框+上补白+高+下补白+下边框+下边界

当两个元素在一行并列显示的两个元素之间的距离=左边元素的右补白+左边元素的右边框+左边元素的右边界+右边元素的左边界+右边元素的左边框+右边元素的左补白
当两个元素并排显示的时候两个元素之间的距离=上边元素的下补白+上边元素的下边框+下边元素的上补白+下边元素的上边框+上下元素边界的最大值（小的被覆盖掉了）

注意：只要是块状元素，或定义了display：block的左右元素都能执行盒模型规则，但是如果应用到span等非块状元素上时会失效。说明非块状元素不能完全执行盒模型规则，宽高属性失效，也就是内联元素不能定义宽和高。