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

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

相关文章

MyBatis中$与#的区别解析

《MyBatis中$与#的区别解析》文章浏览阅读314次,点赞4次,收藏6次。MyBatis使用#{}作为参数占位符时,会创建预处理语句(PreparedStatement),并将参数值作为预处理语句... 目录一、介绍二、sql注入风险实例一、介绍#(井号):MyBATis使用#{}作为参数占位符时,会

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》:本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求