[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;