第一篇：前端開發-css元素類型詳解

 css元素類型詳解

 css元素類型可分爲三類：塊狀元素、內聯元素以及可變元素（具備爭議）

一、塊狀元素

特色：

　　a、在頁面中以矩形區域顯示；

　　b、自上而下排列，獨佔一行；

　　c、可直接添加寬高；

　　d、通常狀況下直接做爲其餘元素或內容的容器。

塊狀元素：

　　div：最經常使用的塊狀元素

　　dl：和dt、dd搭配使用的塊狀元素

　　form：交互表單

　　h1-h6：大標題

　　hr：水平分隔線

　　ul：無序列表

　　ol：有序列表

　　li：列表單元

　　p：段落

　　fieldset：表單字段集

　　colgroup-col：表單列分組元素

　　table-tr-td：表格及行列單元格

 

二、內聯元素

特色：

　　a、在頁面中最小單位也是矩形；

　　b、橫向排列，在一行內逐個排列。若是元素間有回車，會出現空格；

　　c、不可直接添加寬高，大小直接由內容撐開；

　　d、也符合盒模型規則，但個別屬性會出現問題，如padding-top/bottom，margin-top/bottom(轉化爲塊狀元素後可正常使用)。

　　e、也內聯元素在一行排列的時候會有間距，清除方法：

　　　　一、添加浮動。

　　　　二、把全部內聯元素放在一行，不用回車鍵（不推薦使用）。

內聯元素

　　a：超連接

　　b：粗體

　　br：換行

　　i：斜體

　　em：強調

　　img：圖片（特殊內聯，可添加大小）

　　input：輸入框

　　label：表單標籤

　　span：經常使用內聯容器，定義文本內區塊

　　strong：粗體強調

　　sup、sub：上下標

　　textarea：多行文本輸入框

 

三、可變元素

根據上下文的顯示來肯定這個元素是塊狀元素仍是內聯元素。