块级元素和行类元素的一些探索

块级元素和行内元素在面试题中的出场率很高的，虽然自己知道块级元素和行内元素的区别，但是还是有必要总结下。

块级元素：

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

行内元素：

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

块级元素和行内元素的区别

1.行内元素会在一条直线上排列，都是同一行的，水平方向排列，块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

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

3.行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效，

行内元素和块级元素之间的转换：

通过display来实现元素的行内<---->块级的转换，对于span元素，我们完全可以display:block让其变成块元素，也可以通过display:inline将p元素变成行内元素。这里需要说明的是，如果需要块级元素，没必要强制将span转换成块级元素使用，这样会很别扭的。

注意：display：inline-block可以使元素把块级元素和行内元素某些特性结合起来，width，height，padding,margin都能设置，但是不独占一行显示，而是一行排列。当然inline-block还可以实现许多有意思的布局。