行內元素和塊級元素

行內元素一般是內容的容器，而塊級元素一般是其他容器的容器。一般情況下，行內元素只能包含內容或者其它行內元素，寬度和長度依據內容而定，不可以設定，可以和其它元素和平共處於一行；而塊級元素可以包含行內元素和其它塊級元素，且佔據父元素的整個空間，可以設定 width 和 height 屬性，瀏覽器通常會在塊級元素前後另起一個新行。

因此，行內元素適合顯示具體內容，而塊級元素適合做佈局。常用的行內和塊級元素如下：

之所以說“一般情況下”，是因為元素的級別不是一成不變的，瀏覽器是按照規範規定元素預設的級別，但是可以通過“display”屬性改變其級別。

常用的 display 值

常用的 display 可能的值如下：

行內元素 和 塊級元素 盒模型區別

行內元素尺寸由內含的內容決定，盒模型中 padding, border 與塊級元素並無差異，都是標準的盒模型，但是 margin 卻只有水平方向的值，垂直方向並沒有起作用。

塊級元素當沒有明確指定 width 和 height 值時，塊級元素尺寸由內容確定，當指定了 width 和 height 的值時，內容超出塊級元素的尺寸就會溢位，這時塊級元素要呈現什麼行為要看其 overflow 的值，下面會提到。塊級元素的 padding, border 和標準的盒模型一致，但是如果 width + padding + border + 指定的margin 小於其父元素的寬度時，瀏覽器會通過補margin 來填滿整行。

塊級元素 與 overflow

塊級元素當沒有明確指定 width 和 height 值時，塊級元素尺寸由內容確定，當指定了 width 和 height 的值時，內容超出規定的尺寸就會溢位，元素的尺寸並不會隨著內容改變。這時候使用 overflow 可以指定內容超出時的行為，當然， overflow 只對塊級元素起作用，指定當內容超出塊級容器的時候，塊級元素該如何處理內容的顯示。overflow 可能的值如下表：

舉個例子，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 佈局是神馬，它解決了什麼痛點，為什麼比較火。