行内 块状 行内块状的区别

1.元素之间的转换

1. display:inline;转换为行内元素
2. display:block;转换为块状元素
3. display:inline-block;转换为行内块状元素

2.元素特点

1.行内元素的特点

1. 不能自动换行，总是和相邻的行内元素在同一行上（物以类聚）
2. 设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
3. 默认宽度是他自身内容的宽度。
4. 行内元素只能容纳其他行内元素或者文本。
5. padding-top padding-bottom从显示效果上来看是增加的，但其实设置是无效的，对他周围的元素无影响
6. padding在垂直方向上似乎是有效的，但是设置的上下内边距是相等的，如果padding-top和bottom真的有效，那么字体就应该垂直居中，但是并没有。所以行内元素竖直方向上的内边距是无效的。
7. 特殊：a比较特殊，可以放块级元素，但是链接里面不能再放链接。

2.块状元素的特点

1. 能够识别宽高
2. margin和padding的上下左右均对其有效
3. 可以自动换行
4. 多个块状元素标签写在一起，默认排列方式为从上至下

3.行内块状元素特征

1. 不自动换行
2. 能够识别宽高
3. 默认排列方式为从左到右

4.html嵌套规则

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：

<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错

2. 块级元素不能放在

   里面：

<p><ol><li></li></ol></p> —— 错

<p><div></div></p> —— 错

3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p、dt。

5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：

<div><h2></h2><p></p></div> —— 对

<div><a href=”#”></a><span></span></div> —— 对

<div><h2></h2><span></span></div> —— 错

6.只能嵌入内联元素的块级元素：h1~h6, p, dt

7.li元素可以嵌入ul, ol, div