块级元素、内联元素、内联块元素的width和height的设置问题
基础知识点：
1. css文档流概念：对于块级元素，它独占一行（读张鑫旭的css世界，知道是“外在盒子”的缘故），自上而下的排列；对于内联元素，它是自左向右排序，宽度不够的时候换行。
2. 元素的外在盒子：个人理解，它决定元素在文档中的位置，相当于一个人的体型，有的人是胖子，有的人是瘦子，胖子占的空间大，瘦子占的空间小；所以块级元素就是超级大胖子，它要占一行，内联元素就是瘦子，它可以几个放在一行。
3. 元素的内在盒子：个人理解，它用来展现元素的内容，相当于一个人的内心世界，有的人内心世界很宽广，有的人内心世界很狭小；对于元素来讲，它的内在盒子包括哪些呢？其实很简单，给元素添加 background-color 属性就一目了然了（在CSS中，background-color起作用的部分：content，padding，border；有人会有疑问了，border怎么会包含其中？当你给border设置transparent之后你就知道了）。
4. 元素的width和height：这两个属性是元素的content的宽和高。
知道了上面几点之后，下面就来讨论3种类型元素的width和height的设置问题
一：块级元素（内心世界 和 体型匹配，但是体型 却尽可能地大的人）
width：
1. 可以自己设定具体的数值，但是要注意：设定了具体的height之后，使用 line-height 不能撑开盒子，可以改变文字的位置。
2. 不设置时，默认是auto，等于父级元素的宽度（就是自身的margin，border，padding，content都加起来之后等于父级元素的宽度）
3. 设定 width：100% ，此时是盒子content的宽度等于父级元素的宽度，所以如果设置了margin，border，padding的值的时候，盒子会凸出来的如下图：
height：
1. 可以自己设定具体的数值
2. 不设置具体值的时候，默认值是0，靠内容撑开 （例如：设定line-height: 50px 来撑开盒子的 height ）
3. 由元素内部的文档流的高度之和决定
二：内联元素（体型 包不住 内心世界的人）
width：
1. 设定具体的数值是 不起作用的，由文字内容决定；
2. padding-left 和 padding-right 设定值，可以改变width大小；
3. margin-left 和 margin-right 设定值，改变不了width大小，但是可以改变元素的位置；
height：
1. padding-top和padding-bottom可以设定具体的值，但是已经超出了外在盒子，虽然可以通过background-color观察到，但是却无法撑开元素的位置；margin-top和margin-bottom直接没有效果，所以不要使用
2. 可以通过font-size来改变其大小其高度的大小，这时就体现出来inline元素是靠内容撑开的特点了
3. 不能通过设置 line-height 的值来改变height的大小，一定要切记；虽然文字的位置可能改变了，也将父元素的边框撑开了，但是通过background-color可以观察出，其实元素的height没有发生改变，如下图所示，可以清楚的看到前后行高不同，但是height的值并没有改变。
三：内联块元素（内心世界 和 体型匹配的人）
width：
1. 可以自己设定具体的数值
2. 不设置具体的数值的时候，靠内容撑开
height：
1. 可以自己设定具体的数值，但是要注意：设定了具体的height之后，使用 line-height 不能撑开盒子，可以改变文字的位置。
2. 不设置具体的数值的时候，靠内容撑开 （例如：设定line-height: 50px 来撑开盒子的 height ）