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