HTML标签类型

www3c学习网站


  • HTML有N多标签,根基显示的类型,主要分为3大类

    • 块级标签:
      • 独占一行的标签
      • 能随时设置宽度和高度(比如div、p、h1、h2、ul、li)


        块级标签100.png
    • 行内标签:(内联标签)
      • 多个行内标签能同时显示在一行
      • 宽度和高度取决于内容的尺寸(span、a、label)


        行内标签.png
    • 行内-块级标签:(行内-块级标签)
      • 多个行内-块级标签能同时显示在同一行
      • 能同时设置宽度和高度(比如:input、button)

修改标签的显示类型

  • CSS有个display属性,能改变标签的显示类型

    • none:隐藏标签

    • block:让标签变为块级标签


      block.png

    • inline: 让标签变为行内标签

      inline.png.png

    • inline-block: 让标签变为行内-块级标签




CSS属性(加粗为主要掌握,常用的)

  • CSS有N多属性,根据继承性,主要分为2大类

    • 可继承性

      • 父标签的属性会传递给子标签
      • 一般是文字控制属性
    • 不可继承性

      • 父标签的属性不会传递给子标签
      • 一般是区块控制属性

  • 所有标签度可以继承

    • visiblity:属性规定元素是否可见(Tip:display:none会把控件隐藏,还不用占用空间;而visiblity:hidden会把控件隐藏,但保留之前控件所占用的空间)

    • sursor:属性规定要显示的光标的类型(形状)


      光标的类型.png
  • 内联(行内)标签可以继承

    • letter-space、word-space、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
  • 块级标签可继承

    • text-indent
    • text-align
  • 列表标签可继承

    • list-style:主要掌握
    • list-style-type
    • list-style-position
    • list-style-image

  • 不可以继承属性

不可以继承属性.png
  • display、margin、border、padding、background
    • background:包括背景和图片



      background.png
  • height、min-height、max-height、width、min-width、max-width(盒子模型)
  • overflow、position、left、right、top、bottom、z-index
    • overflow:相当于OC的clipToBounce


      overflow.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,033评论 1 92
  • 块级标签独占一行的标签能随时设置宽度和高度(比如div、p、h1、h2、ul、li) 行内标签(内联标签)多个行内...
    Z了个L阅读 297评论 0 1
  • /*HTML标签类型 <!DOCTYPE html> html /*HTML标签类型 1.块级标签:*1....
    我的梦想之路阅读 355评论 0 0
  • 前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的...
    珍此良辰阅读 1,982评论 2 15
  • 一,HTML有N多标签,根据显示的类型,主要可以分为3大类 1,块级标签 独占一行的标签 能随时设置宽度和高度(比...
    张不二01阅读 805评论 0 4

友情链接更多精彩内容