行级元素和块级元素的差异是什么

块元素和行内元素

1，常见块元素

块元素      说明
div       div层
h1～h6    1到6级标题
p         段落，会自动在其前后创建一些空白
hr        分割线
ol        有序列表
ul        无序列表

块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；

2，常见行内元素

行内元素    说明
strong    加粗强调
em        斜体强调
s         删除线
u         下划线
a         超链接
span      常用行级，可定义文档中的行内元素
img       图片
input     表单

行内元素特点：

（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

特别注意：

ul，li是块级元素。

3，行内元素和块级元素转换方式

1》行内元素转换成块级元素的方法

display：block->IE7以下的版本不支持

float:left/right->生成块级框，可以设置宽高，换行符不解析

position:absolute/fixed->生成块级框，可以设置宽高，换行符不解析

块级元素的宽度会继承其父元素。但是，只有为行内元素设置display:block;才会有这样的效果，其他转换之后并不会默认带来这个效果。

2》块级元素转换成行内元素的方法

dispaly:inline

float:left/right->生成块级框，不设置宽度时不继承父级宽度，宽高由内容撑开，在一行显示

position:absolute/fixed->生成块级框，不设置宽度时不继承父级宽度，宽高由内容撑开，在一行显示

4，浅谈block, inline和inline-block的区别

block:可以设置高度宽度，子元素的默认宽度为父元素宽度（仅是宽度可以）
inline:设置长度和宽度无效，由内容决定长度，但是可以设置左右内边距和外边距（仅左右内外边距设置有效，但上下有效).
inline-block:让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体。