最近給自己定了一個小目標，一週溫習一個基礎知識點，並輸出一篇手記。看自己是否能堅持下去。^_^
塊級元素
塊級元素佔據獨立的空間，有以下特點：
- 獨佔一行或多行
- 寬度，高度，內外邊距可以設置，且有效
- 寬度默認是父容器的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博客，即刻閱讀最新文章！
