行內元素一般是內容的容器，而塊級元素一般是其他容器的容器。一般情況下，行內元素只能包含內容或者其它行內元素，寬度和長度依據內容而定，不可以設置，可以和其它元素和平共處於一行；而塊級元素可以包含行內元素和其它塊級元素，且占據父元素的整個空間，可以設置 width 和 height 屬性，瀏覽器通常會在塊級元素前后另起一個新行。
因此，行內元素適合顯示具體內容，而塊級元素適合做布局。常用的行內和塊級元素如下：
| 級別 | 元素 |
|---|---|
| 行內元素 | a,b,strong,span,img,label,button,input,select,textarea |
| 塊級元素 | header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer |
之所以說“一般情況下”，是因為元素的級別不是一成不變的，瀏覽器是按照規范規定元素默認的級別，但是可以通過“display”屬性改變其級別。
常用的 display 值
常用的 display 可能的值如下：
| 值 | 說明 |
|---|---|
| inline | 以行內元素行為展示 |
| block | 以塊級元素行為展示 |
| inline-block | 行內元素和塊級元素特性兼而有之，既不會占滿父元素，又可以設置width和height屬性 |
| table | 以表格的形式展示 |
| table-cell | 以表格單元格的形式展示 |
| table-row | 以表格行的形式展示 |
| table-column | 以表格列的形式展示 |
| flex | CSS3 新增，雖然處於CR階段，但是很多現代瀏覽器已經支持無前綴的該特性，IE從11開始部分支持。類似塊級元素，但是可以用於制作自適應布局 |
| inline-flex | 類似行內元素，但是可以用於制作自適應布局 |
| grid | CSS3 新增，目前處於“實驗階段（Experimental）”,只是得到了IE11和edge的部分支持 |
行內元素 和 塊級元素 盒模型區別
行內元素尺寸由內含的內容決定，盒模型中 padding, border 與塊級元素並無差異，都是標准的盒模型，但是 margin 卻只有水平方向的值，垂直方向並沒有起作用。
塊級元素當沒有明確指定 width 和 height 值時，塊級元素尺寸由內容確定，當指定了 width 和 height 的值時，內容超出塊級元素的尺寸就會溢出，這時塊級元素要呈現什么行為要看其 overflow 的值，下面會提到。塊級元素的 padding, border 和標准的盒模型一致，但是如果 width + padding + border + 指定的margin 小於其父元素的寬度時，瀏覽器會通過補margin 來填滿整行。
塊級元素 與 overflow
塊級元素當沒有明確指定 width 和 height 值時，塊級元素尺寸由內容確定，當指定了 width 和 height 的值時，內容超出規定的尺寸就會溢出，元素的尺寸並不會隨着內容改變。這時候使用 overflow 可以指定內容超出時的行為，當然， overflow 只對塊級元素起作用，指定當內容超出塊級容器的時候，塊級元素該如何處理內容的顯示。overflow 可能的值如下表：
| 值 | 說明 |
|---|---|
| visible | 默認值，如果內容超出容器尺寸，不做任何處理 |
| hidden | 超出的內容被截斷並隱藏 |
| scroll | 無論內容是否超出，總是顯示滾動條。可以控制只顯示一個方向的滾動條，這時應該設置 overflow-x 和 overflow-y |
| auto | 內容沒有超出時，不顯示滾動條；內容超出時，顯示滾動條，且如果只有一個方向超出，那么只顯示該方向上的滾動條 |
舉個例子，html 結構是三個 DIV 元素，css 樣式一樣，只有 overflow 的值不同：
<div class='block'>blockblockblock</div> <div class='block-hidden'>blockblockblock</div> <div class='block-auto'>blockblockblock</div>
.block{ height: 40px; width: 100px; font-size: 30px; padding: 10px; border: 6px solid rgb(120, 120, 120); margin: 20px; background-color: rgb(255, 0, 0); } .block-hidden{ height: 40px; width: 100px; font-size: 30px; padding: 10px; border: 6px solid rgb(120, 120, 120); margin: 20px; background-color: rgb(255, 0, 0); overflow: hidden; } .block-auto{ height: 40px; width: 100px; font-size: 30px; padding: 10px; border: 6px solid rgb(120, 120, 120); margin: 20px; background-color: rgb(255, 0, 0); overflow: auto; }
最終，面對三種設置，效果是這樣的。
總結
文章總結了行內元素和塊級元素的區別，每個元素都可以通過 display 來設置行內還是塊級顯示，inline 和 block 是兩種顯示模型，瀏覽器對每個元素都要采用一種模型來呈現元素，上面我們提到的行內元素和塊級元素分組，其實並不是它們天生就應該這樣，而是瀏覽器按照規范指定了默認值，因此即使我們沒有指定這些屬性，那些元素仍然會按照其所屬類別渲染呈現。通過display 可以改變元素對應的渲染呈現模型，也就是盒模型。當塊級元素的內容超出容器時，使用 overflow 屬性來指定塊級元素的行為。
但凡涉及頁面渲染呈現，都脫離不了與 CSS盒模型的關系，所以掌握盒模型是理解前端規范和瀏覽器行為的前提。display 屬性各種值其實是不同的渲染呈現模型，包括新增的 flex 和 grid，后面的文章我們再分享看的 flex 布局是神馬，它解決了什么痛點，為什么比較火