块级元素、行内元素、行内块元素

一、块级元素

 

特征：

1. 独占一行
2. 高度，宽度，外边距及内边距可控制
3. 宽度默认是父级的100%
4. 里面可放行内或块级元素

注意：文字类元素内不能使用块级元素如<p></p>

二、行内元素

 

特征：

1. 相邻行内元素在一行上，一行显示多个
2. 高、宽直接设置无效
3. 默认宽度即本身内容宽度
4. 行内元素只能容纳文本或其他行内元素

三、行内块元素

<img> 、<input> 、<td>、<Button>

特征：

1. 和相邻行内/行内块元素在一行上，但之间有空白缝隙
2. 默认宽度即本身内容宽度
3. 高度，宽度，内外边距可控制

四、元素的相互转换

display:inline;转换为行内元素

display:block;转换为块状元素

display:inline-block;转换为行内块状元素