元素類型大家都了解吧！
html元素的類型主要可分為塊級元素、行內元素、行內塊元素分別對應的各自的display屬性，block、inline、inline-block
html的標簽都被默認設置了對應的display屬性值，例如
<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>等
行內元素/內聯元素：默認設置display:inline的元素
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<span>等
行內塊元素：默認設置display:inline-block的元素
<img/>、<input/>、<td>等
其中各種元素的類型也有着各種特點
1、前后都有換行符 （自己獨占一行）；
2、高度、寬度、內外邊距各方向可以自由控制；
3、默認寬度是父容器的100%;
4、里面可以放行內元素、行內塊元素或塊級元素;(文字類標簽里面不能放塊級元素)
可以看到三個盒子都是塊級元素，無論是否設置了他們的width是否占滿了父盒子，都會獨占一行；a2設置了height和width都有效；a3設置了內外邊距也有效
1、前后無換行符 （相鄰的行內元素在一行上，一行可以有多個行內元素，但之間有空隙（可以設置負margin值解決，設置的大小各瀏覽器不一））；
2、設置的寬和高是不起作用，元素大小根據元素內文本決定； 豎直方向的margin無效，水平有效；豎直和水平方向的padding都有效（豎直方向的padding有效，但不會撐開周圍的盒子）
3、行內元素里只能放文本或者行內元素；（a標簽里可以放塊級元素）
可以看到在父容器寬度允許的情況，相鄰的行內元素是在同一行的，且之前有空隙；b2設置了寬高但不起作用，b3設置了負值的左邊的外邊距解決了行內元素空隙問題；b4設置了上下的外邊距但不起作用（依然緊靠着塊級元素a）；b5設置了上下左右2px的內邊距起作用了(豎直方向的padding並沒有將b5和a撐開)
1、前后無換行符 （相鄰的行內元素在一行上，一行可以有多個行內元素，但之間有空隙（可以設置負margin值解決，設置的大小各瀏覽器不一））；
2、默認的寬度為內容決定；可以設置寬高，會覆蓋默認的寬度；
3、各個方向的margin和padding都有效
可以看到行內塊元素也是在同一行的，且之前也有空隙；c2設置了寬高有效，c3設置了負值的左邊的外邊距解決了空隙問題；c5設置了上下的外邊距有效；c6設置了上下左右5px的內邊距有效
c4和c6沒有設置上外邊距但因為與設置了上外邊距的c5處於同一行所有也與上邊的塊級盒子a隔開了
對了，處於浮動的元素與flex容器中的元素都具有行內塊元素的特性哦（元素之間沒空隙）！
可以看到可以設置高寬，內外邊距，父元素寬度允許的情況下浮動元素在同一行，默認之間沒有空隙