初识HTML

发布于 2023-06-22  139 次阅读


1. 元素显示模式

1.1. 块级元素

  • 属性\:display\:block
  • 显示特点:

    • 1. 独占一行
    • 2. 宽度是父元素的宽度,高度默认由内容撑开
    • 3. 可以设置宽高
  • 代表标签:

    • div p 标题 ul li form footer nav header

1.2. 行内元素

  • 属性: display\:inline
  • 显示特点:

    • 1.一行可以显示多个
    • 2.宽度和高度默认由内容撑开
    • 3.不可以设置宽高
  • 代表标签:

    • a span i

1.3. 行内块元素

  • 属性: display\:inline-block
  • 显示特点:

    • 1.一行可以显示多个
    • 2.可以设置宽高
  • 代表标签

    • input textarea button select
  • 特殊情况

    • img标签有行内块元素的特点,但是调试工具显示为inline

1.4. 元素显示模式转换

  • 目的:改变元素默认的现实特点,让元素符合布局要求
  • 语法
属性 效果 使用频率
display\:block 转换为块级元素
display\:inline-block 转化为行内块元素
display\:inline

1.5. 嵌套规范注意点

  1. 块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等,但是 p标签中不要嵌套div,p,h等块级元素
  2. a标签内部可以嵌套任意元素
如人饮水,冷暖自知。
最后更新于 2023-07-18