一、行内元素
1、特点:(1)、和相邻行元素在一行上
(2)、宽和高都无效,但是水平方向上的padding和margin可以设置,垂直方向的无效
(3)、宽度默就是它本身内容的宽度
(4)、行内元素智能容纳文本或其他的行内元素
1、代表标签:<span>...</span>段落
<a>...</a> 链接
<br> 换行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img > 图片
<sup>...</sup> 上标
<sub>...</sub> 下标
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
<u>...</u> 下划线
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表
二、块级元素
1、特点:(1)、总是从新行开始
(2)、高度,行高,外边框以及内边距都可以控制
(3)、宽度默认是容器的100%
(4)、可以容纳内联元素和其他块元素
1、代表标签:<h1>...</h1> 标题一级,以此类推还有h2,h3,h4,h5,h6
<div>...</div>盒子
<hr> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进 前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
三、行内块元素
1、特点:(1)、和相邻的行内元素在一行上,但是之间会有间隙
(2)、默认的宽度就是其本身的宽度
(3)、高度,行高,外边距以及内边距都可以进行控制
2、常见标签:<img>...</img> 图片
<input>...</input> 输入框
<td>...</td> 表格
四、显示模式的转换
1、display:inline 转换为行内元素
2、display:block 转换为块级元素
3、display:inline-block 转换为行内块元素