• 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行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行;可直接设置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);自动转成(行内块)元素,块元素加浮动后,体积与内容同宽。

    Why do you work so hard? Because the things I want to buy are expensive and the places I want to go are far away. The person I like is very excellent.
  • 相关阅读:
    夜神模拟器连接电脑
    Appium+python 多设备自动化测试
    appium+python 连接手机设备的yaml配置文件
    appium+python自动化测试连接设备
    Ansible 学习目录
    Python 时间处理
    获取本机网卡ip地址
    Ansible playbook 使用
    ansible hosts配置
    python os和sys模块使用
  • 原文地址:https://www.cnblogs.com/liufuyuan/p/10207003.html
Copyright © 2020-2023  润新知