一、元素类型
1.元素类型分类依据和元素类型分类
根据css显示分类,XHTML元素被分为三种类型:块状元素、内联元素、行内块元素、可变元素
2.块状元素
1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包括div,dl,dt,dd,ol,ul,fieldset,h1~h6,p,form,hr,colgroup,col,table,tr,td等;
2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列;
3)块状元素都可以定义自己的宽度和高度;
4)块状元素严格遵循盒模型规则,即都可以定义padding/border/margin的属性;
5)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素;我们可以把这种容器比喻为一个盒子;
注:h1~h6、p标签里面不能再容纳其他块状元素,包括其本身;
大部分块元素display属性值默认为block,其中列表中的li的默认值为list-item。
3.内联元素:(inline element称内嵌元素,行内元素,直进式元素等)
1)任何不是块状元素的可见元素都可以称之为内联元素,常见的内联元素如:a,img,span,input,b,select,i,em,strong,u,del,sub,sup等;
2)内联元素的表现形式是始终以行内逐个显示的,和文字一样,自左向右排列(默认情况下)
3)内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含的内容的宽高来确定,它的最小内容单元也会呈现矩形块状;
4)内联元素也会遵循盒模型的规则,也可以定义padding、border、margin属性,但部分内联元素需要特殊处理后才能正确显示;
注:大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block;
5.行内块元素
1)Inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行;可直接设置width/height;
注:(只有这一个元素类型支持vertical-align属性)img,input垂直对齐方式{vertical-align:top/bottom/middle;}
6.可变元素
7.元素转换{display:none/block/inline/inline-block/list-item/table-cell/table-header-group/table-footer-group该属性规定元素应该生成的盒模型(元素类型)
none:此元素不会被显示(隐藏该元素)
block:此元素将显示为块状元素(显示该元素)
inline:此元素会被显示为行内元素(内联元素)
inline-block:行内块元素
list-item:将元素转换为列表格式
注:HTML中的置换元素与非置换元素
大部分内联元素的元素类型为inline,其中有类特殊的元素:如img,input,select,textarea,button等,他们被称为可置换元素(Replaced element);他们区别一般inline元素,这些元素拥有内在的尺寸(intrinsic dimensions),他们可以设置width/height属性;他们的性质同设置了display:inline-block的元素一致;
内联元素添加浮动后(float);自动转成(行内块)元素,块元素加浮动后,体积与内容同宽。