内联元素和块级元素

2025-06-06 18:05:00
丁国栋
原创 6
摘要:本文记录和总结内联元素和块级元素相关知识。

内联元素(Inline Elements)是一种在网页中按行水平排列的HTML元素,它们只占据内容所需的空间,不会独自占用一整行。


内联元素的主要特征:

  1. 不会自动换行,紧跟前一个元素排列
  2. 宽度和高度由内容决定
  3. 不能设置宽高属性
  4. 可以与其他内联元素在同一行显示

常见内联元素

  • <span> - 最基础的内联容器元素
  • <a> - 链接元素
  • <img> - 图片元素
  • <input> - 表单输入框
  • <button> - 按钮元素
  • <label> - 标签元素
  • <strong> 和 <em> - 强调文本元素
CSS布局时避免给内联元素设置width和height属性。


块级元素(Block Elements)是在网页中独占一行的HTML元素,它们总是从新的一行开始,并且占据父容器的全部可用宽度。


块级元素的主要特征:

  1. 总是从新的一行开始显示
  2. 自动占据父容器的全部可用宽度
  3. 可以设置width和height属性
  4. 可以包含内联元素和其他块级元素
  5. 默认情况下会在前后添加换行符
常见块级元素
  • <div> - 最基础的块级容器元素
  • <p> - 段落元素
  • <h1>、<h2>等标题元素
  • <ul>、<ol>、<li> - 列表元素
  • <header>、<footer>、<nav> 等语义化元素
  • <button> - 按钮元素
  • <form> - 表单元素


发表评论
博客分类