元素分类

1. 块元素
   • 块元素独占一行，可以自己定义宽高，一般作为别的元素的容器
   • 常用元素

   <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. 行内元素
   • 行内逐个显示，不能定义宽高，以元素内容撑开，可以设置padding margin属性，但仅left right属性会生效，top和bottom无法生效
   • 常用元素

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

3. 根据上下文语境决定该元素为块元素或者内联元素
   • 常用元素

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

4. 行内块元素
   • 行内逐个显示，可以设置宽高，拥有块元素和行内元素的特点
   • 常见的行内块元素

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

5. 元素类型的转换
   • 设置display属性
   • display有18个属性值

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

   • 大部分块元素display属性值默认为block，其中列表li的默认值为list-item
   • 大部分内联元素的display属性默认为inline,其中img和input默认的属性为inline-block
6. 垂直居中
   • 父元素需要设定 text-align:center
   • 当前元素需要设定 display:inline-block和vertical-align:middle
   • 同级的标尺元素需要设定 vertical-align:middle/width:0/height:100%/display:inline-block