CSS元素类型

1、元素类型

根据css显示分类，XHTML元素被分为三种类型：

• 块状元素
• 内联元素
• 可变元素

块状元素（block element）

1）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包括：div、dl、dt、dd、ol、ul、fieldset、（h1-h6）、p、form、hr、iframe、colgroup、col、table、tr、td等；
2）默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列；
3）块状元素都可以定义自己的宽度和高度；
4）块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素。我们可以把这种容器比喻为一个盒子。

注意：
块元素在默认情况下，宽度为浏览器的宽度，高度为子元素高度，如果子元素没有高度则不显示

内联元素（inline element）（或是行内元素）

1）常见的内联元素如：a、span、i、em、strong、b等；
2）内联元素的表现形式是始终以行内逐个进行显示；
3）内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含内容的宽度和高度来确定，它的最小内容单元也会呈现矩形形状；
4）内联元素也会遵循盒模型基本规则，如可以定义padding、border、margin、background等属性，但个别属性不能正确显示；

可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。
applet-java applet
button-按钮
del-删除文本
iframe-inline frame
ins-插入的文本
map-图片区块（map）
object-object对象
script-客户端脚本

2、元素类型的转换

display属性：用于定义建立布局时元素生成的显示框类型
属性值：none | inline | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit

block

说明：
类似在元素后面添加换行符，也就是说其他元素不能再其后面并列显示。
特征：
不设置宽度时，宽度撑满一行
独占一行
支持宽高
当元素设置了float属性后，就相当于给该元素加了display：block；属性

inline

说明：
在元素后面删除换行符，多个元素可以在一行内并列显示。
特征：
内容撑开宽度
非独占一行
不支持宽高
代码换行被解析成空格

inline-block

说明：
元素的内容以块状显示，行内的其他元素显示在同一行。
特征：
不设置宽度时，内容撑开宽度
非独占一行
支持宽度
代码换行被解析成空格

none

说明：
此元素不会被显示
特征：
隐藏元素并脱离文档流

list-item

说明：
将元素转换成列表。li的默认类型。
特征：
不设置宽度时，宽度撑满一行
独占一行
支持宽高

小结：

• 大部分块元素display属性值默认为block，其中列表的默认值为list-item。
• 大部分内联元素的display属性值默认为inline，其中img，input默认为inline-block。

1. 块状元素
   div-最常用的块级元素
   dl-和dt-dd搭配使用的块级元素
   form-交互表单
   h1-h6-大标题
   hr-水平分隔线
   ol-排序列表
   p-段落
   ul-非排序列表
   fieldset-表单字段集
   colgroup-col-表单列分组元素
   table-tr-td-表格及行-单元格
2. 内联元素
   a- 锚点
   b-粗体（不推荐）
   br-换行
   i- 斜体
   em- 强调
   font- 字体设定（不推荐）
   img- 图片
   input- 输入框
   label- 表格标签
   span- 常用内联容器，定义文本内区块
   strong- 粗体情调
   sub- 下标
   sup- 上标
   textarea- 多行文本输入框
   u- 下划线