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

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

一、行内元素

特点：

1.相邻行内元素在一行上，一行可以显示多个

2.高、宽、直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或其他行内元素

注：特殊情况下< a> 里面可以放块级元素，给< a>转换为块级元素最安全

常见行内元素：< a> < strong> < b> < em> < i> < del> < s> < ins> < u> < span>等

二、块元素

特点：

1.自己独占一行

2.高度、宽度、外边距以及内边距都可以控制

3.宽度默认是容器（父元素）宽度的100%

4.是一个容器及盒子，里面可以放行内元素或块元素

注：文本类的元素内不能放块级元素，如< p>主要用于放文字，因此不能放块级元素，特别是< div>

常见块级元素：< div> < p> < ul> < li> < h1>···< h6>

三、行内块元素

特点：

1.和相邻行内元素（行内块元素）在一行上。但是它们之间会有空白缝隙。一行可以显示多个（行内元素特点）

2.默认宽度就是它本身内容宽度（行内元素特点）

3.高度，行高，外边距以及内边距都可以控制（块级元素特点）

常见行内块元素：< img/> < input> < td>

四、元素显示显示转换

转换为块元素：display: block;

转换为行内元素：display: inline;

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