元素分類

1. 塊元素
   • 塊元素獨(dú)占一行，可以自己定義寬高，一般作為別的元素的容器
   • 常用元素

   <div></div>
   <dl>
       <dt></dt>
       <dd></dd>
   </dl>
   <form></form>
   <h1></h1>-<h6></h6>
   <hr>
   <ul>
       <li></li>
   </ul>
   <ol>
       <li></li>
   </ol>
   <p></p>
   <fieldset></fieldset>
   

2. 行內(nèi)元素
   • 行內(nèi)逐個(gè)顯示，不能定義寬高，以元素內(nèi)容撐開(kāi)，可以設(shè)置padding margin屬性，但僅left right屬性會(huì)生效，top和bottom無(wú)法生效
   • 常用元素

   <a href="#"></a>
   <br>
   <i></i>
   <em></em>
   <label for="#"></label>
   <span></span>
   <strong></strong>
   <textarea></textarea>
   <u></u>
   <select></select>
   

3. 根據(jù)上下文語(yǔ)境決定該元素為塊元素或者內(nèi)聯(lián)元素
   • 常用元素

   <button></button>
   <del></del>
   <iframe src="#" frameborder="0"></iframe>
   <ins></ins>
   <map name="#"></map>
   <object data="#" type="#"></object>
   <script></script>
   

4. 行內(nèi)塊元素
   • 行內(nèi)逐個(gè)顯示，可以設(shè)置寬高，擁有塊元素和行內(nèi)元素的特點(diǎn)
   • 常見(jiàn)的行內(nèi)塊元素

   <img src="#">
   <input type="text">
   

5. 元素類型的轉(zhuǎn)換
   • 設(shè)置display屬性
   • display有18個(gè)屬性值

   常用
   block/inline/inline-block/none/flex
   不常用
   list-item/table-header-group/table-footer-group
   

   • 大部分塊元素display屬性值默認(rèn)為block，其中列表li的默認(rèn)值為list-item
   • 大部分內(nèi)聯(lián)元素的display屬性默認(rèn)為inline,其中img和input默認(rèn)的屬性為inline-block
6. 垂直居中
   • 父元素需要設(shè)定 text-align:center
   • 當(dāng)前元素需要設(shè)定 display:inline-block和vertical-align:middle
   • 同級(jí)的標(biāo)尺元素需要設(shè)定 vertical-align:middle/width:0/height:100%/display:inline-block