---

谈谈我对 行内元素/块级元素/空元素 的区别的认识

---

之前一直很熟悉 在行内元素、块级元素，后来听说竟然还有空元素一说，于是就赶紧总结一下，增长一下见识

先说说行内元素

行内元素又叫内联元素或者行内标签.

它的特点有

• 设置宽高无效，只能由内容撑起来，即行内元素设置width,height属性无效.
• 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.
• 设置上下margin无效，左右margin有效
• 设置上下padding无效，左右padding有效
• 行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.
• 行内元素对应于display:inline

常见的行内元素有：

span、em、i、b、strong、a、img、input、br、select、textarea、q、bdo、sub、sup...等等

块级元素

块级元素又叫块级标签

它的特点有

• 能够设置宽高，即块级元素可以设置width,height属性.
• 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
• 块级元素即使设置了宽度,仍然是独占一行
• 块级元素可以设置margin和padding属性，即上下左右margin有效，上下左右padding有效
• 块级元素对应于display:block

常见的块级元素有：

div、p、h1~h6、
ul、ol、li、
dl、dt、dd、
form、table、hr、
blockquote // 浏览器以缩进方式显示被引用的文本，通常定义一段长的文本引用、
address、menu、pre.....等等

空元素

这个我之前不了解，但了解了特性就很简单了，大家都看一看记住就行了

什么是 空元素？

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br>就是没有关闭标签的空元素（<br>标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

由于HTML元素的内容是开始标签与结束标签之间的内容。
而某些 HTML 元素具有空内容。那些含有空内容的HTML元素，就是空元素。

简单的说就是：没有 HTML 内容的元素被称为空元素。空元素是在开始标签中关闭的。

空元素最显著的特点？

• 没有HTML内容
• 单标签，只有开始标签，没有结束标签

常见的空元素有哪些？

<br> //换行 
<input> //文本框等
<img>  //图片
<hr>  //分割线
...等等

空标签注意的地方？

<br />就是没有关闭标签的空元素（<br />标签定义换行）。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br>在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。

HTML 元素语法

• HTML 元素以开始标签起始
• HTML 元素以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content）
• 空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

行内元素与块级元素的嵌套规则？

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。

• 块级元素可以嵌套内联元素或者某些块级元素
• 内联元素只能嵌套内联元素，不能嵌套块级元素

比较典型的特例

• a无所不能，但a不能嵌套它本身
• p标签不能嵌套块级元素
• h1~h6、p、dt标签：只能包含内联元素，不能再包含块级元素
• li很强大，它可以包含div，甚至可以包含它的父元素ul或者ol

怎么改变元素的排列方式，通过设置display属性？

常见的属性值有：

diaplay: none 此元素不会被显示。
diaplay: block 此元素将显示为块级元素，此元素前后会带有换行符。
diaplay: inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
diaplay: inline-block 行内块元素。（CSS2.1 新增的值）
diaplay: list-item 此元素会作为列表显示。
diaplay: inherit 规定应该从父元素继承 display 属性的值。

可做了解，不做深入：

diaplay: run-in 此元素会根据上下文作为块级元素或内联元素显示。
diaplay: compact    CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
diaplay: marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
diaplay: table  此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
diaplay: inline-table   此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
diaplay: table-row-group    此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
diaplay: table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
diaplay: table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
diaplay: table-row  此元素会作为一个表格行显示（类似 <tr>）。
diaplay: table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
diaplay: table-column   此元素会作为一个单元格列显示（类似 <col>）
diaplay: table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
diaplay: table-caption  此元素会作为一个表格标题显示（类似 <caption>）

display: inline-block行内块元素的兼容性问题？

给元素设置display: inline-block属性，元素将变成行内块元素，结合盒子模型理解，该元素整体以内联元素表现，但它的内容以块状元素表现。

简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

但是这个属性目前不是所有的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果，下面就来探讨一下

在火狐浏览器上存在的问题

在Firefox2中有-moz-inline-stack和-moz-inline-box实现，但是这两个私有属性在某些情况下都会有异常，具体如下：
1、display:-moz-inline-stack
“当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将无法点击或无法选取，需要通过position:relative还hack掉这个bug”--乌龙茶
2、display:-moz-inline-box
使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性 -moz-box-align来解决
所以，建议不要使用-moz-inline-box，还是使用-moz-inline-stack

在IE浏览器上怎么实现的

在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法：

1、先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display为inline或block，layout不会消失），代码如下：

div {display:inline-block;}
div {display:inline;}

2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：
div {display:inline; zoom:1;}

怎么兼容所有浏览器？

那么为了能够让所有浏览器支持display:inline-block，综合一下，最终的实现代码如下（参考怿飞：模拟兼容性的 inline-block 属性）：

display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另一方面下触发IE下inline 元素的 hasLayout*/

display:-moz-inline-stack; /* Firefox 的私有属性，需要时还必须用到position:relative解决上面提到的bug */

zoom:1; /*同样是IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

/*扩展一下一些其他可能用到的属性*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隐藏文字，可用这四个属性 */
/*另外上面隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0; */

overflow:hidden; /* 隐藏溢出的内容 */

vertical-align:middle; /* 行内垂直居中，针对 Opera 比较大的偏离 */

width:？px; /*？为任意非auto值*/
height:？px; /*？为任意非auto值*/