第一篇：前端开发-css元素类型详解

 css元素类型详解

 css元素类型可分为三类：块状元素、内联元素以及可变元素（具有争议）

1、块状元素

特点：

　　a、在页面中以矩形区域显示；

　　b、自上而下排列，独占一行；

　　c、可直接添加宽高；

　　d、一般情况下直接作为其他元素或内容的容器。

块状元素：

　　div：最常用的块状元素

　　dl：和dt、dd搭配使用的块状元素

　　form：交互表单

　　h1-h6：大标题

　　hr：水平分隔线

　　ul：无序列表

　　ol：有序列表

　　li：列表单元

　　p：段落

　　fieldset：表单字段集

　　colgroup-col：表单列分组元素

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

 

2、内联元素

特点：

　　a、在页面中最小单位也是矩形；

　　b、横向排列，在一行内逐个排列。如果元素间有回车，会出现空格；

　　c、不可直接添加宽高，大小直接由内容撑开；

　　d、也符合盒模型规则，但个别属性会出现问题，如padding-top/bottom，margin-top/bottom(转化为块状元素后可正常使用)。

　　e、也内联元素在一行排列的时候会有间距，清除方法：

　　　　1、添加浮动。

　　　　2、把所有内联元素放在一行，不用回车键（不推荐使用）。

内联元素

　　a：超链接

　　b：粗体

　　br：换行

　　i：斜体

　　em：强调

　　img：图片（特殊内联，可添加大小）

　　input：输入框

　　label：表单标签

　　span：常用内联容器，定义文本内区块

　　strong：粗体强调

　　sup、sub：上下标

　　textarea：多行文本输入框

 

3、可变元素

　　根据上下文的显示来确定这个元素是块状元素还是内联元素。