块级元素有哪些? 行内元素有哪些?空元素有那些?行内元素和块级元素有什么区别?

2023-12-28 23:28
文章标签 元素 区别 行内 块级

本文主要是介绍块级元素有哪些? 行内元素有哪些?空元素有那些?行内元素和块级元素有什么区别?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

块级元素有

块级元素通俗来讲就是块级元素一般是其他元素的容器元素,能容纳其他元素或内联元素。

<div>...</div><ul>...</ul>无序列表<ol>...</ol>有序列表<dl>...<dl>定义列表<dl>...<dl><h1~h6>...</h1~h6>标题1~6级<p>...</P>段落<address>...</asserss><center>...</center>地址文字<hr>水平分割线<pre>...</pre>预格式化<blockquote>...</blockquote>段落缩进 前后5个字符<marquee>...</marquee>滚动文本<table>...</table>表格<form>...</form>表单

块级元素的特点

1、总是在新行上开始;

2、高度,行高以及外边距和内边距都可控制;

3、宽度缺省是它的容器的100%,除非设定一个宽度。

4、它可以容纳内联元素和其他块元素

行内元素有

行内元素一般情况下行内元素只包含内容或者其他行内元素,宽度和长度依据内容而定,不可以设置,可以和其他元素和平共处于一行。行内元素适合显示具体内容。display属性为inline的元素为行内元素。叫法:内联元素、内嵌元素、行内元素 、直进式元素等。

<span>...</span><a>...</a>链接<b>...</b>加粗<strong>...</strong>加粗<img>图片<sup>...</sup>上标<sub>..</sub>下标<i>...</i>斜体<em>...</em>斜体< del>...</del >删除线<u>...</u>下划线<input>...</input>文本框<textarea>...</textarea>多行文本<select>...</select>下拉列表

行内元素的特点

1、和其他元素都在一行上;

2、宽度就是它的文字或图片的宽度,不可改变;

3、行内元素只能容纳文本或者其他内联元素

行内元素,需要注意

设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin只有左右margin有效,上下无效。
设置padding 上下左右都有效,。注意元素范围是增大了,但是对元素周围的内容是没影响的。

空元素:

空元素(Void Element)是 HTML 和 XML 中的一种特殊元素,它没有子元素,也没有结束标签这些元素通常用来表示文档中的一些特殊内容,例如换行符、图像、表单控件、元数据等。

空元素的语法格式是在标签结尾处使用一个斜杠符号,例如 <br> 或 <input type="text" />。虽然在 HTML5 中,空元素的结束标签可以省略,但是建议为了兼容性和可读性,仍然保留斜杠符号。

空元素是由浏览器自动解析和渲染的,因为它们没有子元素和结束标签,所以浏览器可以自动关闭它们。

在 HTML 中,空元素不允许添加子元素或内容,因为它们没有结束标签来定义子元素的范围。

使用空元素可以简化 HTML 代码,减少页面大小,提高页面加载速度。但是需要注意的是,空元素通常需要设置属性才能达到预期效果,例如 <img> 元素需要设置 src 属性才能显示图片。

<br><hr><img><input><link><meta>

行内元素不可以设置宽高,不独占一行
块级元素可以设置宽高, 独占一行

行内元素和块级元素有什么区别?

盒模型: 块级元素会生成一个独立的矩形框,具有内边距(padding)、外边距(margin)和边框(border),它会占据一整行的宽度,可以设置宽度、高度、边距和填充等属性。行内元素则不会产生独立的框,行内元素的盒模型主要包括水平方向的内边距、外边距和边框,对垂直方向的设置有一定限制。它的宽度和高度由内容决定,无法直接设置宽度和高度。

布局特性:块级元素会独占一行,块级元素会自上而下按顺序排列不能与其他任何元素并列,每个块级元素都会从新行开始。行内元素则不会独占一行,行内元素则会在同一行上水平排列,直到一行放不下才会换行,可以与其他元素在同一行上并排显示。

内容显示:块级元素可以包含其他块级元素和行内元素,并且可以设置内部元素的布局和样式。行内元素一般不能包含块级元素,只能包含文本或其他行内元素。

相对位置:块级元素具有明显的边界,可以使用CSS定位属性(如position、top、left)来控制其相对位置。行内元素通常不能设置这些属性,它们会根据文本流布局自动调整位置。

默认尺寸:块级元素能设置宽高,如果不设置宽高,那么块级元素宽度将默认宽度是100%,会占满父元素可用空间。行内元素不能设置宽高,行内元素的默认宽度由内容决定,一般只占据内容所需的宽度,但可以通过设置padding和margin来微调。

注意:通过CSS的display属性可以改变元素的默认类型,将块级元素设置为行内元素,或将行内元素设置为块级元素,从而改变它们的显示和布局方式。

持续学习总结记录中,回顾一下上面的内容:
块级元素有哪些? 行内元素有哪些?空元素有那些?行内元素和块级元素有什么区别?

这篇关于块级元素有哪些? 行内元素有哪些?空元素有那些?行内元素和块级元素有什么区别?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/547644

相关文章

native和static native区别

本文基于Hello JNI  如有疑惑,请看之前几篇文章。 native 与 static native java中 public native String helloJni();public native static String helloJniStatic();1212 JNI中 JNIEXPORT jstring JNICALL Java_com_test_g

Android fill_parent、match_parent、wrap_content三者的作用及区别

这三个属性都是用来适应视图的水平或者垂直大小,以视图的内容或尺寸为基础的布局,比精确的指定视图的范围更加方便。 1、fill_parent 设置一个视图的布局为fill_parent将强制性的使视图扩展至它父元素的大小 2、match_parent 和fill_parent一样,从字面上的意思match_parent更贴切一些,于是从2.2开始,两个属性都可以使用,但2.3版本以后的建议使

Collection List Set Map的区别和联系

Collection List Set Map的区别和联系 这些都代表了Java中的集合,这里主要从其元素是否有序,是否可重复来进行区别记忆,以便恰当地使用,当然还存在同步方面的差异,见上一篇相关文章。 有序否 允许元素重复否 Collection 否 是 List 是 是 Set AbstractSet 否

javascript中break与continue的区别

在javascript中,break是结束整个循环,break下面的语句不再执行了 for(let i=1;i<=5;i++){if(i===3){break}document.write(i) } 上面的代码中,当i=1时,执行打印输出语句,当i=2时,执行打印输出语句,当i=3时,遇到break了,整个循环就结束了。 执行结果是12 continue语句是停止当前循环,返回从头开始。

遮罩,在指定元素上进行遮罩

废话不多说,直接上代码: ps:依赖 jquer.js 1.首先,定义一个 Overlay.js  代码如下: /*遮罩 Overlay js 对象*/function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩状态 true 激活,f

maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令

maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令 在日常的工作中由于各种原因,会出现这样一种情况,某些项目并没有打包至mvnrepository。如果采用原始直接打包放到lib目录的方式进行处理,便对项目的管理带来一些不必要的麻烦。例如版本升级后需要重新打包并,替换原有jar包等等一些额外的工作量和麻烦。为了避免这些不必要的麻烦,通常我们

ActiveMQ—Queue与Topic区别

Queue与Topic区别 转自:http://blog.csdn.net/qq_21033663/article/details/52458305 队列(Queue)和主题(Topic)是JMS支持的两种消息传递模型:         1、点对点(point-to-point,简称PTP)Queue消息传递模型:         通过该消息传递模型,一个应用程序(即消息生产者)可以

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图

深入探讨:ECMAScript与JavaScript的区别

在前端开发的世界中,JavaScript无疑是最受欢迎的编程语言之一。然而,很多开发者在使用JavaScript时,可能并不清楚ECMAScript与JavaScript之间的关系和区别。本文将深入探讨这两者的不同之处,并通过案例帮助大家更好地理解。 一、什么是ECMAScript? ECMAScript(简称ES)是一种脚本语言的标准,由ECMA国际组织制定。它定义了语言的语法、类型、语句、

Lua 脚本在 Redis 中执行时的原子性以及与redis的事务的区别

在 Redis 中,Lua 脚本具有原子性是因为 Redis 保证在执行脚本时,脚本中的所有操作都会被当作一个不可分割的整体。具体来说,Redis 使用单线程的执行模型来处理命令,因此当 Lua 脚本在 Redis 中执行时,不会有其他命令打断脚本的执行过程。脚本中的所有操作都将连续执行,直到脚本执行完成后,Redis 才会继续处理其他客户端的请求。 Lua 脚本在 Redis 中原子性的原因