HTML学习笔记Day6

一、元素类型

  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行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行;

    注:(只有这一个元素类型支持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);自动转成(行内块)元素,块元素加浮动后,体积与内容同宽。

猜你喜欢

转载自www.cnblogs.com/liufuyuan/p/10207003.html