CSS之块元素，行内元素，display转换，float布局对比
目录
1 元素分类
块元素
每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。
块级元素的特点：
- 块级元素会独占一行
- 高度，行高，外边距和内边距都可以单独设置
- 宽度默认是容器的100%
- 可以容纳内联元素和其他的块级元素
常见块元素
* 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 - 非排序列表
行内元素（内联元素）
行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。
行内元素的特点：
- 和相邻的行内元素在一行上
- 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
- 默认的宽度就是它本身的宽度
- 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）
注意：
- 只有文字才能组成段落，因此类似<p>,<h1>~<h6>,<dt>等里面不能放块级元素；因为它们都是文字块级标签，里面不能再存放其他的块级标签。
- 链接里面不能再存放链接
常见行内元素;
- <span>...</span>
- <a>...</a> 链接
- <input>...</input> 文本框
- <textarea>...</textarea> 多行文本
- <select>...</select> 下拉列表
- <img > 图片
- <del>...</del> 删除线
- <u>...</u> 下划线
- <sup>...</sup> 上标
- <sub>...</sub> 下标
- <i>...</i> 斜体
- <em>...</em> 斜体（强调性）
- <br> 换行
- <b>...</b> 加粗
- <strong>...</strong> 加粗（强调性）
行内块级元素(内联块元素)
即支持所有css属性，又可以在同一行显示
行内块级元素的特点：
- 和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙
- 默认的宽度就是本身内容的宽度
- 高度，行高，内边距和外边距都可以设置
在行内元素中有几个特殊的标签，<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属性
常见元素
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
空元素
例：br hr meta link 等...
注：所有写在body标签中的都有 title属性，br除外。
行元素只能嵌套行元素，不能嵌套其他元素，块元素可以嵌套任何元素。
2 display应用
这三种元素，我们通过display属性来相互变换，实际中块元素用的最多，所以有时候通常是吧内联元素转化为块元素
display:none 元素隐藏不占位
display:block 以块元素展示
display:inline_block 以内联块元素展示
display:inline 以内联元素展示
设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。
3 inline-block布局 vs 浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
b.相同之处：能在某程度上达到一样的效果
相同之处
①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元素始终会独占一行，呈块状显示，可设置宽高。所以inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。
②float： 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕状排列。
两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。
不同之处：
1、文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
2、水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
3、垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
4、空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。
5、IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。
布局对比
图一：display：inline-block
图二：对两个孩子使用float：left，这是父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：
乍一看两个都能做到几乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下面再讲）
.浮动布局不太好的地方：参差不齐的现象，我们看一个效果：
从图3,4可以看出浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。
inline-block因为具有行内元素的特性，所以可以通过设置父元素的text-align来使其水平居中。垂直方向默认是按照父元素的基线来基线（vertical-align:baseline)排列，可以通过元素自身的vertical-align来设置。
inline-block存在的小问题：
a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
b.去除空隙的方法：
1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的
c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
在ie6/7下：
对于行内元素直接使用{dislplay:inline-block;}
对于块级元素：需添加{display:inline;zoom:1;}
应用场景
场景：
①inline-block： 当我们要设置某些元素在一行显示，并且排列方向一致的情况下，我们尽可能去用inline-block。因为inline-block的元素仍然在当前文档流里面，这样就减少了程序对DOM的更改操作，因为DOM的每一次更改，浏览器会重绘DOM树。理论上会增加性能消耗。这样也不用像float那样麻烦，需要清除float.
②float： 即使inline-block为布局首选，但是也有inline-block所不能涉及的一些业务需求，比如：有两个元素，我们需要一个向左，一个向右排列，这时候我们就只能用float来实现，对于新手来说，会纠结float不好调，比较麻烦，想到达到预期效果，需要多次调整，有时候我们给元素设置了浮动，元素显示的顺序却变了，一时搞不清楚就改变HTML中元素的前后顺序等等。因为浏览器的解析顺序是逐行解析，当设置两个元素的右浮动时，顺序在前面的元素会先被解析，他是右浮动，那么在前边的元素就先往右浮动占位置，后边的元素依次被解析到以后，才往右排列，这样我们看到的顺序就是反的，当弄明白原因之后，调试就方便多了。