行内元素、块元素、行内块元素
一、行内元素
特点:
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;