1)块级元素
特点：
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
5.块级文字元素中不能放入其他块级元素
6.块级大多为结构性标记
常见块级元素：
<center>...center> 地址文字 <h1>...h1> 标题一级 <h2>...h2> 标题二级 <h3>...h3> 标题三级 <h4>...h4> 标题四级 <h5>...h5> 标题五级 <h6>...h6> 标题六级 <hr> 水平分割线 <p>...p> 段落 <pre>...pre> 预格式化 <blockquote>...blockquote> 段落缩进 前后5个字符 <marquee>...marquee> 滚动文本 <ul>...ul> 无序列表 <ol>...ol> 有序列表 <dl>...dl> 定义列表 <table>...table> 表格 <form>...form> 表单 <div>...div>(2)行内元素
特点：
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，依靠自身字体大小和图形支撑结构的，不可以改变
4.行内元素只能行内元素，不能包含块级元素
5.行内元素的paddding可以设置
6.margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效
7.块级大多为结构性标记
常见行内标签:
特点：
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
5.行内大多为描述性标记
<b>...b> 加粗 <strong>...strong> 加粗 <sup>...sup> 上标 <sub>...sub> 下标 <i>...i> 斜体 <em>...em> 斜体 <del>...del> 删除线 <u>...u> 下划线3)行内块级元素
特点：
综合块级元素与行内元素的特性，可设宽高(默认是内容宽高)，也可以设置内外边距
常见行内块级元素：
<span>...span> <a>...a> <img/> <textarea>...textarea> <button>..button> <input> <br> <label>...label> <select>...select> <canvas>...canvas> <progress>...progress> <cite>...cite> <code>...code> <strong>...strong> <em>...em> <audio>...audio> <video>...video>(4)显示模式转换
display:block|inline|inline-block
(1)块级转行内、行内块级
<h1 class="inline">Talk is easy,show me the code!h1> <h1 class="inline">Talk is easy,show me the code!h1> <h1 class="inline">Talk is easy,show me the code!h1> <h1 class="inline">Talk is easy,show me the code!h1> <hr> <h1 class="inline-block">Talk is easy,show me the code!h1> <h1 class="inline-block">Talk is easy,show me the code!h1> <h1 class="inline-block">Talk is easy,show me the code!h1> <h1 class="inline-block">Talk is easy,show me the code!h1>将前两行转为行内元素，而将后两行转为行内块级元素：
.inline{ display: inline; background: #ccc; } .inline-block{ display: inline-block; background-color: #ccc; } hr{ height:5px; background: green; }有时间大家可以尝试一下
