[TOC] ## 1.`HTML`标签的分类 ### 1.1 标签分类 * 块标签 ~~~ //特点 1.独占一行 2.能够设置width,height //常用的块标签 div,h1~h6,p,ul,li,dl,dt,dd ~~~ * 内联标签 ~~~ //特点 1.并排显示 2.不能设置width,height 3.不能设置margin-top,margin-bottom a,span,em,strong ~~~ * 内联块 ~~~ //特点 1.并排显示 2.可以设置宽高 //常用的内联块标签 button,img,input ~~~ ### 1.2 原理 **块标签**：独占一行,能够设置宽高 `div,h1~h6,p,ul,li,dl,dt,dd` `display:block;` **内联标签**:并排显示,不能设置宽高,margin-top,margin-bottom `a,span,em,strong` `display:inline-block` **内联块**:并排显示,可以设置宽高 `button,img,input` `display:inline-block` ### 1.3 skill #### a.如何让内联元素和内联块元素水平居中 ~~~ display:block; margin-left:auto; margin-right:auto; ~~~ #### b.如何让内联元素和内联块元素水平居中 ~~~ //给父级加 text-align:center ~~~ 1.当遇到一个非文本的元素，想让其垂直居中用定位 2.内联元素一些奇怪的现象 给button设置margin-top,span也跟着移动 <div> <button>btn</button> <span>深圳</span> <span>广州</span> <div> 3.overflow:hidden;