微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

后端程序员前端之路04html元素分类_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:23:03
原创
1132人浏览过

目录

  • 块级元素
  • 内联元素
  • 内联块级元素 
  • 总结

    •  

    一、块级元素（block）

          定义：默认情况下，独占一行的元素就是块级元素。

          特点：

    立即学习“前端免费学习笔记（深入）”；

    1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
    2. 元素的高度、宽度、行高以及顶和底边距都可设置
    3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。

          常见的块级元素：

    、

    、

    ...

    、
      、
      、
      、、
      、
      、

      二、内联元素（inline）

            定义：内联元素，也叫行内元素。默认情况下，和其他元素在同一行上，并且元素的高度、宽度等不能设置的元素就是内联元素。

            特点：

      1. 和其他元素都在一行上；
      2. 元素的高度、宽度及顶部和底部边距不可设置；
      3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。

            常见的内联元素：、、
      、、、、

      如此AI员工
      如此AI员工

      国内首个全链路营销获客AI Agent

      如此AI员工 71
      查看详情 如此AI员工

      三、内联块状元素（inline-block）

            定义：默认情况下，和其他元素在同一行上，并且元素的高度、宽度等可以设置的元素就是内联元素

            特点：

      立即学习“前端免费学习笔记（深入）”；

      1. 和其他元素都在一行上；
      2. 元素的高度、宽度、行高以及顶和底边距都可设置。

            常见的内联块级元素：后端程序员前端之路04html元素分类_html/css_WEB-ITnose、

      四、总结

            不管是哪种元素，他们之间都可以通过css中的display属性进行相互转换。

            

       

    大家都在看：

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：zoom和transform:scale()的区别_html/css_WEB-ITnose 下一篇：引入css的四种方式_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    水平滚动条外观怎么美化_html水平滚动条美化方法与技巧 通过CSS伪元素可美化水平滚动条外观，Webkit浏览器支持::-webkit-scrollbar、::-webkit-scrollbar-thumb等组件自定义样式，结合scrollbar-width和-ms-overflow-style实现跨浏览器兼容，隐藏原生滚动条并提升视觉效果。
    2025-11-09 08:55:25
    741
    CSS怎么嵌入HTML网页_CSS嵌入HTML网页的多种方法 内联样式通过style属性直接设置元素样式，如文本；2.内部样式表在中使用标签定义页面级样式，如p{color:green;}；3.外部样式表将CSS保存为独立文件（如styles.css），并通过引入，便于多页共享；4.@import可在CSS中导入其他样式文件，需置于规则前，但可能影响性能。
    2025-11-09 08:44:02
    181
    html滚动条滚动时怎么显示提示_html滚动条滚动提示功能实现方法 答案：通过监听滚动事件并结合DOM操作可实现滚动提示。首先构建滚动容器和提示元素，利用JavaScript监听scroll事件，计算滚动比例，当超过设定阈值时显示提示信息，并可通过优化提升体验。
    2025-11-09 08:43:11
    626
    解决iOS设备上输入框聚焦时意外滚动与缩放问题 本教程旨在解决iOS设备（Safari/Chrome）中，当用户聚焦输入框时出现的意外滚动或页面缩放问题。该问题通常源于iOS对小于16px字体大小输入框的自动缩放行为。文章将提供两种有效的解决方案：调整输入框字体大小至16px或更大，以及通过配置视口元标签来限制缩放，确保移动端表单的用户体验流畅无阻。
    2025-11-09 08:38:20
    988
    Python lxml Etree与XPath：可靠地提取HTML元素内文本 本教程将指导您如何使用Python的lxml库和XPath表达式，从HTML元素中可靠地提取文本内容，特别是链接文本。我们将重点介绍如何构建更健壮的XPath，避免脆弱的绝对路径，并利用//text()函数准确捕获目标文本，从而提升网页数据抓取的稳定性和准确性。
    2025-11-09 08:11:01
    681
    JavaScript实现动态API数据搜索与表格动态展示教程 本教程详细讲解如何使用JavaScript实现前端数据搜索功能。通过从API获取数据并将其存储，我们演示了如何利用Array.prototype.filter()方法根据用户输入动态筛选数据，并实时更新HTML表格内容。文章涵盖了数据获取、存储、渲染以及搜索逻辑的实现，并提供了完整的代码示例和优化建议，帮助开发者构建高效的用户界面。
    2025-11-09 08:09:17
    630
    如何使用实时协作工具处理团队HTML编辑的解决办法 使用实时协作工具可解决团队开发中HTML代码冲突与沟通延迟问题。首选支持协同编辑的工具如VisualStudioCode+LiveShare、CodeSandbox或Replit，实现多人同步编写与调试。同时配置Prettier、.editorconfig等统一代码风格，提升可读性。结合Git与GitHub等平台进行版本控制，通过分支管理与PullRequest保障代码质量。再辅以Trello、Jira等任务分配工具和Slack、Discord即时沟通，明确分工与编辑责任。坚持工具协同、规范编码
    2025-11-09 07:21:19
    578
    如何用css修改网页滚动条外观_css修改滚动条外观详细教程 可通过CSS伪元素自定义滚动条外观，主要支持Webkit内核浏览器；使用::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb等设置宽度、轨道和滑块样式，并可添加悬停效果与渐变色；Firefox需用scrollbar-width和scrollbar-color简化定制，或借助JavaScript库实现跨浏览器兼容。
    2025-11-09 01:55:18
    750
    HTML错误页面信息泄露漏洞怎么屏蔽_自定义错误页面避免敏感信息泄露 答案：屏蔽HTML错误页面信息泄露的核心是定制化错误页面，通过配置Web服务器（如Nginx、Apache、IIS）和应用框架（如Express、Flask）的错误处理机制，用简洁静态页面替代含敏感信息的默认错误页，防止暴露服务器版本、堆栈跟踪等；同时结合WAF、输入验证、移除敏感响应头、安全审计和最小权限原则，构建多层防御体系，既保护用户体验又提升安全性。
    2025-11-09 01:17:36
    352
    HTML跨站点跟踪漏洞怎么防范_Cookie跨站点跟踪漏洞防范与检测技术 SameSite属性通过限制跨站点请求中Cookie的发送，有效防范跨站点跟踪和CSRF攻击。具体而言，Strict模式仅在直接访问站点时发送Cookie，安全性最高；Lax模式允许在用户主动导航的跨站GET请求中发送Cookie，兼顾安全与体验；None模式需配合Secure属性，仅用于明确需要跨站的场景。该属性改变了浏览器默认携带第三方Cookie的行为，从根本上减少了用户被跟踪的风险，是现代Web安全的核心机制之一。
    2025-11-09 01:03:19
    176
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部