css基础知识4（元素类型)

元素类型

1.元素的类型

根据CSS显示分类，XHTML元素被分为3类：

1）块状元素：在网页中以块的形式显示，所谓的块状元素就是元素显示为矩形区域；默认情况下块状元素都会占据一行，会按顺序自上而下排列；块状元素都可以定义自己的高度和宽度；块状元素一般作为其它元素的容器，可以容纳其它内联元素和其它块状元素。

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

3）可变元素：需要根据上下文关系确定该元素是块元素或者内联元素。

2.元素类型的装换

元素类型的装换就是改变属性的值。

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

display属性：用于定义建立布局时元素生成的显示框类型
属性值：none|inline|block|inline_block|list-item等等

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

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

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

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

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