元素类型
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的默认类型。
特征:不设置宽度时,宽度撑满一行;独占一行;支持宽高