HTML行内元素与块级元素的区别(超详细)

目录

  • 行内元素
      • 🌸常见的行内元素
      • 🌸行内元素(内联元素)的特性
  • 块级元素
      • 🌸常见的块级元素
      • 🌸块级元素的特性
  • 相互转换(display)
      • 🌸行内块状元素的特性

行内元素

🌸常见的行内元素

<span><a><img><input><textarea><select><label>还有包括一些文本元素如:<br><b><strong><sup><sub><i><em><del><u>等。

🌸行内元素(内联元素)的特性

1,和其他元素都在一行,即行内元素和其他行内元素都会在一条水平线上排列

2,高度、宽度是不可控的,设置无效,由内容决定。

3,根据标签语义化的理念,行内元素最好只包含行内元素,不包含块级元素。


块级元素

🌸常见的块级元素

<div><table><form><p><ul><h1>......<h6><hr><pre><address><center><marquee><blockquote> 

🌸块级元素的特性

1,总是从新的一行开始,即各个块级元素独占一行,默认垂直向下排列;

2,高度、宽度、margin及padding都是可控的,设置有效,有边距效果;

3,宽度没有设置时,默认为100%;

4,块级元素中可以包含块级元素和行内元素。


相互转换(display)


当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种

1,display:inline;转换为行内元素;

2,display:block;转换为块状元素;

3,display:inline-block;转换为行内块状元素


🌸行内块状元素的特性

1,行内块状元素综合了行内元素和块状元素

2,不自动换行,与其他行内元素都会在一条水平线上排列;

3,高度、宽度、margin及padding都是可控的,设置有效,有边距效果;

4,默认排列方式为从左到右。


OK,以上就是关于HTML行内元素与块级元素的区别的全部内容啦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/209283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c#学习相关系列之as和is的相关用法

一、子类和父类的关系 public class Program{static void Main(string[] args){Animal animal new Dog();// Dog dog (Dog)new Animal(); 编译成功&#xff0c;运行报错Dog dog (Dog)animal;Dog dog new Dog();Animal animal dog; //等价于Animal animal new Dog();}}pub…

java多生产者多消费者模拟实现

package com.example.springboottestone.main;import java.util.LinkedList; import java.util.Queue;/*** 多生产者多消费者模型是指多个生产者线程同时向缓冲区中添加数据&#xff0c;同时多个消费者线程从缓冲区中获取数据的并发模型。这种模型适用于需要高并发处理数据的场…

企业计算机服务器中了eking勒索病毒怎么办,eking勒索病毒解密数据恢复

随着计算机网络技术的不断发展与应用&#xff0c;企业的生产运营效率得到了极大提升&#xff0c;但网络安全威胁一直存在&#xff0c;网络威胁的技术也在不断更新&#xff0c;给企业的数据安全带来了严重威胁。在本月&#xff0c;云天数据恢复中心陆续接到很多企业的求助&#…

C++ Qt开发:Qt的安装与配置

Qt是一种C编程框架&#xff0c;用于构建图形用户界面&#xff08;GUI&#xff09;应用程序和嵌入式系统。Qt由Qt公司&#xff08;前身为Nokia&#xff09;开发&#xff0c;提供了一套跨平台的工具和类库&#xff0c;使开发者能够轻松地创建高效、美观、可扩展的应用程序。其被广…

Python---random库

目录 基本随机数函数(): rand.seed() random() 扩展随机数函数(): random库包含两类函数&#xff1a;基本随机数函数&#xff0c;扩展随机数函数 基本随机数函数:seed(),random() 扩展随机数函数&#xff1a;randint,getrandbits(),uniform(),randrange(),choice(),shuff…

猴子吃桃问题(for循环)

一只猴子第一天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不过瘾&#xff0c;又多吃了一个&#xff1b;第二天早上又将剩下的桃子吃掉一半&#xff0c;又多吃了一个。以后每天早上都吃了前一天剩下的一半加一个。到第N天早上想再吃时&#xff0c;见只剩下一个桃子了…

ECS云主机容量大于2TB,初始化Linux数据盘(parted)

本文为您介绍当容量大于2TB时&#xff0c;如何在Linux环境下适用parted分区工具初始化数据盘。 操作场景 本文以“CentOS 7.6 64位”操作系统为例&#xff0c;介绍当磁盘容量大于2TB时&#xff0c;如何使用parted分区工具在Linux操作系统中为数据盘设置分区&#xff0c;操作回…

SAP UI5 walkthrough step6 Modules

在SAPUI5 中&#xff0c;资源通常用作Modules&#xff0c;这个我们将用Message Toast 来实现告警功能 修改controller.js webapp/controller/App.controller.js sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast" ], (Controller, Mes…

Python中的Alpha-Beta剪枝算法:优化博弈树搜索

标题&#xff1a;Python中的Alpha-Beta剪枝算法&#xff1a;优化博弈树搜索 摘要&#xff1a;Alpha-Beta剪枝算法是一种用于优化博弈树搜索的算法&#xff0c;能够降低搜索的时间复杂度&#xff0c;提高程序的性能和效率。本文将介绍Alpha-Beta剪枝算法的原理&#xff0c;以及…

Java 1对1

文章目录 前言 客户端 服务器端 输出线程端 End 前言 TCP&#xff08;Transmission Control Protocol&#xff09;是一种面向连接的、可靠的网络传输协议&#xff0c;它提供了端到端的数据传输和可靠性保证。 本程序就是基于tcp协议编写而成的。 利用 TCP 协议进行通信的…

js 复制粘贴板,当clipboardjs 不好使怎么办?

最近项目中做一个很常见的复制粘贴的功能耽误了比较长的时间特此记录&#xff0c;在往常这个功能直接用 clipboard 做就行了&#xff0c;但是这次却发现复制功能不好使了&#xff0c;虽然走了复制成功的回调&#xff0c;但是粘贴板并没有复制的内容。代码如下 <div v-for&q…

java实现冒泡排序算法

文章目录 冒泡排序算法 冒泡排序算法 算法原理&#xff1a; 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换他们两个。 对每一对相邻元素做同样的工作&#xff0c;从开始第一对到结尾的最后一对。在这一点&#xff0c;最后的元素应该会是最大的数。 针对所有的元素重…

Leetcode 345. Reverse Vowels of a String

Problem Given a string s, reverse only all the vowels in the string and return it. The vowels are ‘a’, ‘e’, ‘i’, ‘o’, and ‘u’, and they can appear in both lower and upper cases, more than once. Algorithm Collect all the vowels and reverse the…

人工智能教程(三):更多有用的 Python 库

目录 前言 推荐 JupyterLab 入门 复杂的矩阵运算 其它人工智能和机器学习的 Python 库 前言 在本系列的上一篇人工智能教程&#xff08;二&#xff09;&#xff1a;人工智能的历史以及再探矩阵中&#xff0c;我们回顾了人工智能的历史&#xff0c;然后详细地讨论了矩阵。在…

【数据结构和算法】--- 栈

目录 栈的概念及结构栈的实现初始化栈入栈出栈其他一些栈函数 小结栈相关的题目 栈的概念及结构 栈是一种特殊的线性表。相比于链表和顺序表&#xff0c;栈只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的…

概率论之 证明 正态分布的上a 分位点的对称的性质

公式(Z(a) -Z(1-a)) 表示正态分布的上(a)分位点与下(1-a)分位点在分布曲线上关于均值的对称性。 左侧 (Z(a))&#xff1a; 这是分布曲线上累积概率为(a)的那个点。也就是说&#xff0c;这是一个使得这个点及其左侧的面积占据整个曲线下方(a)的位置。 右侧 (Z(1-a))&#xff1…

Kubernetes(K8s 1.27.x) 快速上手+实践,无废话纯享版

文章目录 1 基础知识1.1 K8s 有用么&#xff1f;1.2 K8s 是什么&#xff1f;1.3 k8s 部署方式1.4 k8s 环境解析 2 环境部署2.1 基础环境配置2.2 容器环境操作2.3 cri环境操作2.4 harbor仓库操作2.5 k8s集群初始化2.6 k8s环境收尾操作 3 应用部署3.1 应用管理解读3.2 应用部署实…

[Firefly-RK3399] TFTP/NFS网络启动内核与Buildroot文件系统

​网络启动&#xff0c;是用 TFTP 在服务器下载内核、dtb 文件到目标机的内存中&#xff0c;同时可以用 NFS 挂载网络根文件系统到目标机上&#xff0c;实现目标机的无盘启动。 准备工作&#xff1a; Firefly-RK3399 板卡&#xff1b;路由器、网线&#xff1b;安装有 NFS 和 …

微前端 前置知识2--- monorepo架构

目录 前言 pnpm vs npm pnpm设计思想 硬连接 软链接 &#xff08;符号链接&#xff09; 原理 pnpm 指令 monorepo架构 介绍 配置monorepo pnpm --filter 前言 我们采用的是微前端一个主应用&#xff0c;和多个子应用&#xff0c;我们肯定不会一个一个去install安装…

uniapp微信小程序富文本、小程序富文本、rich-text解决video问题

我直接使用的 mp-html mp-html 相当好用&#xff0c;功能比较完善&#xff0c;也可以二次开发 具体的直接看官方文档吧