说下行内元素和块级元素的区别？行内块元素的兼容性使用？

行内元素:行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。

块级元素:块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

 

行内元素与块级元素的区别：

1）行内元素与块级元素直观上的区别

    行内元素会在一条直线上排列，都是同一行的，水平方向排列

    块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2)块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3)行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

 

行内块元素兼容性：display:inline-block;*display:inline;*zoom:1;

其中*display:inline作用是一旦触发了hasLayout设置display：inline和display：block效果相似。

*zoom:1作用是在IE下出发hasLayout。

HasLayout：一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高)，要么由其containing block来组织和尺寸计算。

当hasLayout为true时(就是所谓的"拥有布局")，相当于元素产生新BFC，元素自己对自身内容进行组织和尺寸计算;
当hasLayout为false时(就是所谓的"不拥有布局")，相当于元素不产生新BFC，元素由其所属的containing block进行组织和尺寸计算。

无法通过CSS属性直接设置，需要通过CSS属性间接开启，不只有html元素，可通过object.currentStyle.hasLayout来判断是否开启了。