## 元素分类
**示例链接：** http://www.lsxm.tech/doc/demo/display.html
### html标签元素分为三类：
>[success]#### 1. 块状元素(display:block)
~~~
<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table> 、<form>
~~~
<div style="background:#D36AC1">这是一个div</div>
<p style="background:#B25DEA;margin-top:5px;">这是一个p</p>
<h3 style="background:#5DEAB2;margin-top:5px;width:300px;height:100px">这是一个设置了宽高的h3</h3>
**特点:**
* 元素独占一行 , 宽度默认100%
* 可设置width、height、marign
>[info]#### 2. 内联元素(又叫行内元素)(display:inline)
~~~
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<code>
~~~
<a href="#" style="width:10px;height:10px;background:#ddd;">这是一个设置了宽高的a标签</a><span style="margin-left:10px;margin-top:20px;background:#ddd;">这是一个设置了margin的sapn标签</span>
**特点:**
* 元素在同一行上 , 内容撑开宽度
* 不可设置width、height、marign-top、marign-bottom
>[warning]#### 3. 内联块状元素(display:inline-block)
~~~
<img>、<input>
~~~
<a href="#" style="display:inline-block;width:210px;height:100px;background:#ddd;">这是一个设置了display:inline-block的a标签</a>
**特点:**
* 元素在同一行上 , 内容撑开宽度
* 可设置width、height、marign
