## 元素分类 **示例链接：** 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