【重拾基礎】塊級元素和行內元素

最近給本身定了一個小目標，一週溫習一個基礎知識點，並輸出一篇手記。看本身是否能堅持下去。^_^

塊級元素

塊級元素佔據獨立的空間，有如下特色：

• 獨佔一行或多行
• 寬度，高度，內外邊距能夠設置，且有效
• 寬度默認是父容器的100%
• 能夠做爲其餘塊級元素和行內元素的父容器（文本類塊級元素不建議做爲其餘塊級元素的容器，如p, h1~h6）

常見的塊級元素有：div, h1~h6, hgroup, p, table, form, ul, ol, hr, header, main, footer, aside, article, section, video, audio, canvas, pre, option

行內元素

行內元素不佔據獨立空間，依靠自身內容撐開寬高，與同屬一個父容器的其餘行內元素在同一行上依次排列，根據white-space屬性值來決定是否換行。它們具有如下特徵：

• 不獨佔一行，但內容過長時會根據white-space控制換行。

• 寬度，高度的設置是無效的。內外邊距只能設置左右方向（設置padding-top, padding-bottom, margin-top, margin-bottom是無效的）。可是有一點要注意，padding-top和padding-bottom對自身有表現效果，可是不影響周圍元素的佈局，看圖說話：

  

• 寬度由自身內容決定。

• 行內元素不建議做爲塊級元素的容器（a標籤例外）

常見的行內元素有：span, i, code, strong, a, br, sub, sup, label

對於不肯定的元素，能夠設置width來測試下，若是width不生效，說明是行內元素啦。

行內塊級元素

行內塊級元素也不會獨佔一行，可是可設置寬高，內外邊距等。

常見的行內塊級元素有：input， button, img, select, textarea

CSS顯示轉換

display: block;

讓元素表現爲塊級元素

display: inline;

讓元素表現爲行內元素

display: inline-block;

讓元素表現爲行內塊級元素

---

首發連接

掃一掃下方小程序碼或搜索Tusi博客，即刻閱讀最新文章！