【HTML】元素的分类(块元素、行内元素、行内块元素)

devtools/2025/1/25 15:38:07/

元素的分类

  • 块元素
  • 行内元素
  • 行内块元素
  • 转换

块元素

独占一行,宽度默认为容器的100%,可以设置宽、高、行高、内外边距;布局时,块元素可以包含块元素和行内元素

html"><div>div</div><p>p</p><h3>h1-h6</h3><hr>
<form action="">form</form>
<dl><dt>dt</dt><dd>dd</dd>
</dl>
<table border="1"><tr><th>tr</th><th>tr</th></tr><tr><th>tr</th><th>tr</th></tr>
</table>
<table border="1"><tr><th>tr</th><th>tr</th></tr><tr><th>tr</th><th>tr</th></tr>
</table>
<ul><li>ul > li</li></ul>
<ol><li>ol > li</li></ol>
<header>header</header><aside>aside</aside><footer>footer</footer>
<section>section</section><nav>nav</nav><article>article</article>

效果:
在这里插入图片描述

行内元素

不会独占一行;不可以设置宽、高且无效,可以设置内外边距仅设置左右方向有效,上下无效;元素的宽高取决于内容的宽高,如果一行空间不够,会自动换行显示;布局时,行内元素一般不包含块级元素

html"><button>button</button>
<sub>下标</sub><sup>上标</sup>
<span>span</span>
<del>del</del><strong>strong</strong><ins>ins</ins><em>em</em>
<a href="#">a</a>
<input type="text"><label>lable</label>
<img src="./images/小车汽车.png"></img>
<video controls src="./images/videoEdit.mp4" width="200px" height="200px"></video>
<audio controls src="./images/Clairo-may-as-well.mp3"></audio>
<select><option value="">select</option><option value="">select</option><option value="">select</option>
</select>
<textarea>textarea</textarea>

效果:
在这里插入图片描述

行内块元素

它的宽、高、行高、内外边距都可以控制;默认宽度就是它本身内容的宽度,不独占一行

html"><style>button,input,textarea,img{padding: 5px;margin: 20px;width: 200px;height: 60px;}
</style>
<button>button</button>
<input placeholder="input" type="text">
<textarea>textarea</textarea>
<img src="images/小车汽车.png">

效果:
在这里插入图片描述
在这里插入图片描述

但是行内块元素之间会有空白缝隙,需要去除 根据具体的需求和实际情况‌选择以下方法

1) 将行内块元素之间的 html 代码写在同一行,删除换行符和空格‌
2) 通过设置父元素的字体大小为 0‌,可以使空白文本节点不占据空间,再为行内块元素设置合适的字体大小
3) 使用负的间距( margin ),通过为行内块元素设置负的间距,可以抵消它们之间的间隙
4) 给行内块元素添加 float 属性(浮动)

html"><style>img{border: 1px solid red;/*float: left;*//*margin: -3px;*/}div{font-size: 0;}
</style>
<div><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png">
</div>

效果:
在这里插入图片描述
在这里插入图片描述

转换

定义元素为行内元素display: inline;

html"><style>div{border: 1px solid #f531ff;display: inline;  /*强转为行内元素*/}
</style>
<div>div1</div>
<div>div2</div>
<div>div3</div>

效果:
在这里插入图片描述

定义元素为块级元素display: block;

html"><style>span{border: 1px solid #f531ff;display: block; /*强转为块元素*/}
</style>
<span>span1</span>
<span>span2</span>
<span>span3</span>

效果:
在这里插入图片描述

定义元素为行内块级元素display: inline-block;

html"><style>span{border: 1px solid #f531ff;display: inline-block; /*强转为行内块元素*/}div{border: 1px solid #f531ff;display: inline-block; /*强转为行内块元素*/}
</style>
<span>span</span>
<div>div</div>

效果:
在这里插入图片描述

注意 :
        1)元素宽度的百分比相对于父元素的宽度的百分比
        2)元素的内边距与外边距,都是相对于父元素的宽度的百分比
        3)元素的宽度是内容的宽度,真实占据的位置是这个内容宽度+内边距+边框
        4)元素的高度的百分比相对于父元素的高度的百分比,我们一般不会设置高度 高度就是内容的高度
        5)一行只有一个容器你才能居中,如果有多个,需要自己设置宽度和边距进行居中排列

文章来源:https://blog.csdn.net/qq_57567877/article/details/137080702
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/devtools/111525.html

相关文章

java(1)数据类型,运算符,逻辑控制语句以及基本应用

目录 ​编辑 1.前言 2.正文 2.1数据类型与变量 2.1.1字面常量 2.1.2数据类型 2.1.3变量 2.1.3.1整型 2.1.3.2浮点型 2.1.3.3字符型 2.1.3.4布尔型 2.1.4类型转换与类型提升 2.1.4.1字符串的拼接 2.1.4.2整型转字符串 2.1.4.3字符串转整数 2.2运算符 2.2.1算术运…

OpenAI 联合 SWE 发布 AI 软件工程能力测试集,Gru.ai 荣登榜首

在 9 月 3 日&#xff0c;Gru.ai 在 SWE-Bench-Verified 评估最新发布的数据中以 45.2% 的高分排名第一。SWE-Bench-Verified 是 OpenAI 联合 SWE 发布测试集&#xff0c;旨在更可靠的评估 AI 解决实际软件问题的能力。该测试集经由人工验证打标&#xff0c;被认为是评估 AI 软…

商业银行零售业务数智运营探索与应用

一、商业银行零售业务面临新形势 根据国家金融监督管理总局近期发布的数据,2024年一季度商业银行净息差降至1.54%,较2023年四季度的1.69%下降15个基点。在当前经营环境复杂、客户投资预期降低等多重因素的叠加作用下,商业银行经营压力日益加大。与此同时,随着数字化转型的不…

开源模型应用落地-sherpa-onnx-AIGC应用探索(十)

一、前言 sherpa-onnx 具有诸多优势,它功能丰富,支持语音转文本、文本转语音、说话人识别等多种功能且能离线运行,无需联网;可在多种架构和操作系统上使用,包括 Android、iOS、Windows 等;提供多种编程语言的 API;拥有丰富的预构建资源,如 Android APKs、Flutter APPs …

Python Flask_APScheduler定时任务的正确(最佳)使用

描述 APScheduler基于Quartz的一个Python定时任务框架&#xff0c;实现了Quartz的所有功能。最近使用Flask框架使用Flask_APScheduler来做定时任务&#xff0c;在使用过程当中也遇到很多问题&#xff0c;例如在定时任务调用的方法中需要用到flask的app.app_context()时&#…

[论文笔记] LLM大模型剪枝篇——4、Qwen2系列剪枝实现

工作: 把shortgpt的llama代码改成了Qwen的剪枝。具体方法: 用wikitext数据,计算每层的影响力分数即BI分数(1-层前后隐层状态余弦相似度),剪掉影响力低的P%的层数。 剪枝脚本:bash short_qwen_xin.sh 推理脚本:bash short_qwen_xin_test.sh bash short_qwen_xin.sh shor…

使用API有效率地管理Dynadot域名,查看某一订单当前的状态

前言 Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮箱&…

从搜索热度上看Arcgis的衰退

Arcgis已被qgis快速赶上 google trends是一个google综合了每日的搜索情况的统计网站&#xff0c;可以追踪从2004年开始各个关键字的搜索热度。 我用arcgis和qgis作为对比&#xff0c;简单探索了arcgis和qgis的全球相关热度。 假设&#xff0c;搜索arcgis越高的区域&#xff…