1，块级元素和行内元素的区别
| 是否独占一行 | 是否填满父元素 | 设置宽高是否有效 |
设置padding-top padding-bottom是否有效 |
设置margin-top margin-bottom是否有效 |
设置margin-left margin-right padding-left padding-right 是否有效 |
常见元素 |
|
| 块级元素 | 是 | 是 | 有效 | 有 | 有效 | 有效 | div，p，form，ul，ol，li，h1~h6，table |
| 行级元素 |
否， 相邻的行内元素会排列在 同一行，直到一行排不下，才会换行 |
否， 其宽度随元素内容变换 |
无效 |
无效 padding-top padding-bottom 虽然增大了行内元素的面积，但是并没有与相邻元素拉大距离 |
无效 | 有效 | b,td,a, img，span |
如图所示span元素的padding-top为100px，但是并没有拉大span与上下两个相邻div的距离，因此行内元素的padding-top与padding-bottom是不起作用的
2，行内元素与块级元素的相互转换
通过设置display的值可以改变行内元素与块级元素
其中块级元素对应的是display:block;,行内元素对应的是display:inline;，如果我们对行内元素设置display:block;，则行内元素就会变为块级元素；如果我们队块级元素设置display:inline;则块级元素就会变为行内元素
3，我的疑惑点：
但是我们注意在对div应用float:left/right;以后，即使我们不对div应用display:inline;其多个div仍然会排列在一行，那么float是否也可以改变了其块级元素的性质，将其变为行内元素了呢？
但是我们又发现该div可以设置宽高，并不符合行内元素的特征
在这里，我们就要介绍display的另外一个值inline-block，即行内的块级元素，它拥有块级元素的特点，可以设置宽高，padding，margin，但是它却又符合行内元素的特征：不独占一行，宽度不会沾满父元素，在不设置宽高的情况下，宽高随内容变换；而且和行内元素一样可以排列于一行，如下图所示
那么这个float又是何方神圣呢？
我们首先介绍css中的定位机制
3，css中的定位机制
CSS中有三种基本的定位机制：普通流、浮动和绝对定位。
普通流：默认情况下，所有框都在普通流中定位。按照你所写的html，顺序的排列，块级元素从上到下一个接一个地排列；块级元素之间的垂直距离由其定义的margin-top，margin-bottom决定。行内元素则在一行中水平布置。利用margin-left/right，padding-left/right，来调整它们之间的水平距离。
相对定位：position:relative;如果一个元素的设置该属性为relative，那么就激活了该元素left和top属性，利用这两个属性，该元素就相对于它自身原本在普通文档流中的位置进行偏移，但无论如何进行移动，元素仍然占据原来的空间，仍然属于普通流。
绝对定位：position:absolute;绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中的其他元素在布局的时候就像绝对定位的元素不存在时一样,绝对定位的元素的位置是相对于最近的已定位祖先元素(position:relative/absolute)。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块.同时因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的堆放次序。z-index值越高，框在堆中的位置就越高
浮动模型。浮动的元素脱离普通文档流，向左或者向右移动，直到它的边缘碰到包含框或者另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
因为浮动元素脱离了文档流，所以上面的例子中包围浮动div的外层div不占据空间
