CSS 盒子模型范围包括 内容(content)、填充(padding)、边框(border)、边界(margin)。
CSS盒子模型 —— 百度百科
每个HTML标记都可看作一个盒子；
每个盒子都有：边界、边框、填充、内容四个属性；
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；
CSS盒子模型包括两种：标准 W3C 盒子模型 和 IE 盒子模型。
- 标准 W3C 盒子模型
标准 W3C 盒子模型中的的 content 部分不包含其他部分； - IE 盒子模型
IE 盒子模型中的 content 部分包含了 border 和 pading；
额，好像不是很好理解，举个栗子：
一个盒子的 margin 为10px, border 为1px, padding 为5px, content = 100px * 50px。
1. 标准 W3C 盒子模型
占据位置：width => 10*2 + 1*2 + 5*2 + 100 = 132px
height => 10*2 + 1*2 + 5*2 + 50 = 82px
实际大小：width => 1*2 + 5*2 + 100 = 112px
height => 1*2 + 5*2 + 50 = 62px
2. IE 盒子模型
占据位置：width => 10*2 + 100 = 120px
height => 10*2 + 50 = 70px
实际大小：width => 100px
height => 50px
So，选择盒子模型变的重要了，为了兼容浏览器，要选择 标准 W3C 盒子模型，即在网页上边加上DOCTYPE 文档声明 ，如 <!DOCTYPE html>，这样所有的浏览器都会采用标准盒子模型去解释盒子了。
CSS优先级
参考博客园：CSS 的优先级机制
如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式。
内联样式 > 内部样式 > 外部样式
CSS选择器优先权
- 内联样式权值 1000；
- ID 选择器权值 100；
- Class 选择器权值 10；
- 标签 选择器权值 1；
配图来源 Google 图片