热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

Html中的块级元素和行内元素(内联元素)html块状元素和行内元素有哪些

本文主要分享【html块状元素和行内元素有哪些】,技术文章【Html中的块级元素和行内元素(内联元素)】为【申健(小健)】投稿,如果你遇到Html+css相关问题,本文相关知识或能到你。html块

本文主要分享【html块状元素和行内元素有哪些】,技术文章【Html 中的块级元素和行内元素(内联元素)】为【申健(小健)】投稿,如果你遇到Html+css相关问题,本文相关知识或能到你。

html块状元素和行内元素有哪些

先从字面意思找,块级元素可以看做讲台,自己独占一排,常见标签:

,

,

    , , ;行内元素(内联元素)可以看做学生的课桌,可以多个占用一排,常见标签:
    , ,

    块级元素特点:

     独占一行,宽度默认是整个父级的宽度(100%)高度、宽度,行高、外边距以及内边距都可以控制里面可以放其他块级元素和行内元素

    举例:

    1.

    2.

    3.

     

    行内元素(内联元素)特点:

    不独占一行,可以跟其他元素共占一行,里面可以放行内元素和其他文本设置高度,宽度无效,宽高是内容的宽高

    举例:

    1.

    2.

    上边都是通常情况下的,其实还可以通过样式进行修改,通过display属性进行修改。

            块转行内:display:inline;
            行内转块:display:block;
            块、行内元素转换为行内块:display:inline-block;行内块是行内元素和块级元素集合,既可以设置宽度和高度属性(如果没有设置宽度,则是包裹内容宽高),又可以在里面可以放其他块级元素和行内元素。

    举例

    1.设置宽度和高度时

    2.没有宽度和高度时

    在开发中注意规范问题:

    块级元素在网页中一般用于页面布局,行内元素主要用于包裹内容,细节控制一般情况下块级元素放行内元素,行内元素不能放块级元素特殊块级元素不要包含其他块级元素 (h1、h2、h3、h4、h5、h6、p、dt),强调p元素不能放任何的块级元素块级元素与块级元素平级、内联元素与内联元素平级;优化问题:为了提高浏览器的渲染效率问题,应该尽可能少的的嵌套标签。

    本文《Html 中的块级元素和行内元素(内联元素)》版权归申健(小健)所有,引用Html 中的块级元素和行内元素(内联元素)需遵循CC 4.0 BY-SA版权协议。


推荐阅读
  • 一、HTML5新增属性1.1、contextmenucontextmenu的作用是指定右键菜单。<!DOCTYPEhtml><html><head> ... [详细]
  • 本文探讨了使用C#在SQL Server和Access数据库中批量插入多条数据的性能差异。通过具体代码示例,详细分析了两种数据库的执行效率,并提供了优化建议。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 本文总结了MySQL的一些实用技巧,包括查询版本、修改字段属性、添加自动增长字段、备份与恢复数据库等操作,并提供了一些常见的SQL语句示例。 ... [详细]
  • 本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式,包括输入框、选择器和文本区域等元素。 ... [详细]
  • 前端技术分享——利用Canvas绘制鼠标轨迹
    作为一名前端开发者,我已经积累了Vue、React、正则表达式、算法以及小程序等方面的技能,但Canvas一直是我的盲区。因此,我在2018年为自己设定了一个新的学习目标:掌握Canvas,特别是如何使用它来创建CSS3难以实现的动态效果。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文探讨了如何通过最小生成树(MST)来计算严格次小生成树。在处理过程中,需特别注意所有边权重相等的情况,以避免错误。我们首先构建最小生成树,然后枚举每条非树边,检查其是否能形成更优的次小生成树。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
author-avatar
dashan
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有