HTML 块级元素与行内元素有哪些以及注意、总结

行内元素和块级元素是HTML中的两种元素类型,它们在页面中的显示方式和行为有所不同。

块级元素(Block-level Elements):

常见的块级元素有div、p、h1-h6、ul、ol、li、table、form等。

块级元素会独占一行,即使没有设置宽度,也会自动填充父容器的宽度。

块级元素可以设置宽度、高度、内外边距等属性。

块级元素可以包含其他块级元素和行内元素。

<span style="background-color: red">块级元素</span>

在这里插入图片描述
行内元素(Inline Elements):

常见的行内元素有span、a、img、strong、em、input、label等。

行内元素不会独占一行,它会在同一行内根据内容的大小自动排列。

行内元素的宽度和高度由内容决定,不能直接设置宽度和高度属性。

行内元素的内外边距只影响元素自身的排列,不会改变其他元素的位置。

行内元素不能包含块级元素,只能包含其他行内元素或文本内容。

需要注意的是,HTML5中的一些元素可以根据上下文的不同表现出块级元素或行内元素的特性。例如,a标签在默认情况下是行内元素,但如果给a标签设置display: block;属性,它就会变成块级元素。

<p style="background-color: pink">行内元素 </p>

在这里插入图片描述
总结:

行内元素和块级元素在页面布局和样式设置上有着不同的表现。块级元素会独占一行,可以设置宽度、高度和内外边距,可以包含其他块级元素和行内元素;行内元素在同一行内根据内容大小排列,不能设置宽度和高度,内外边距只影响元素自身的排列,只能包含其他行内元素或文本内容。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

web服务器之——搭建两个基于不同端口访问的网站

要求如下&#xff1a; 建立一个使用web服务器默认端口的网站&#xff0c;设置DocumentRoot为/www/port/80&#xff0c;网页内容为&#xff1a;the port is 80。建立一个使用10000端口的网站&#xff0c;设置DocumentRoot为/www/port/10000&#xff0c;网页内容为&#xff1a;t…

太阳能光伏企业网站建设效果如何

光伏行业近些年发展也比较迅速&#xff0c;其服务/产品拓展度较高&#xff0c;对企业来说&#xff0c;合作商较少更需要多地域寻找目标客户及信息承载展示、拓展等&#xff0c;传统线下方式单一且不足&#xff0c;线上成为众商家经营的方向。 1、品牌宣传、信息呈现难 太阳能…

windows 镜像下载地址

HelloWindows.cn - 精校 完整 极致 Windows系统下载仓储站

原来使用代码也可以画时序图,用这个Mermaid就行,真香

本文首发于我的个人掘金博客&#xff0c;看到很多人都比较喜欢这篇文章&#xff0c;分享给大家。 个人博客主页&#xff1a;https://www.aijavapro.cn 个人掘金主页&#xff1a;juejin.cn/user/2359988032644541/posts 个人知识星球: 觉醒的新世界程序员 一、背景 在软件开发和…

数据结构基础介绍

一.起源及重要性 1968 年&#xff0c;美国的高德纳 Donakl E . Kn uth 教授在其所写的《 计算机程序艺术》第一卷《基本算法 》 中&#xff0c;较系统地阐述了数据的逻辑结构和存储结构及其操作&#xff0c; 开创了数据结构的课程体系 &#xff0c;数据结构作为一门独立的…

记录一次postgresql临时表丢失问题

项目相关技术栈 springboot hikari连接池pgbouncerpostgresql数据库 背景 为了优化一个任务执行的速度&#xff0c;我将任务的sql中部分语句抽出生成临时表&#xff08;create temp table tempqw as xxxxxxxxx&#xff09;&#xff0c;再和其他表关联&#xff0c;提高查询速…

php之jwt使用

PHP JWT&#xff08;JSON Web Token&#xff09;是一种用于身份验证和授权的开放标准。JWT是一个包含有关用户或实体身份信息的安全令牌&#xff0c;它由三部分组成&#xff1a;头部&#xff08;Header&#xff09;、载荷&#xff08;Payload&#xff09;和签名&#xff08;Sig…

Linux上进行Nacos安装

Nacos安装指南 仅供参考&#xff0c;若有错误&#xff0c;欢迎批评指正&#xff01; 后期会继续上传docker安装nacos的过程&#xff01; 1.Windows安装 开发阶段采用单机安装即可。 1.1.下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好…

PyTorch张量:内存布局

你可能对 torch 上的某些函数感到困惑&#xff0c;它们执行相同的操作但名称不同。 例如&#xff1a; reshape()、view()、permute()、transpose() 等。 这些函数的做法真的不同吗&#xff1f; 不&#xff01; 但为了理解它&#xff0c;我们首先需要了解一下张量在 pytorch 中…

Http模块

Http模块 1.创建http服务 //导入http模块 const http require(http)//创建服务对象 const server http.createServer((request,response)>{response.end(Hello HTTP Server) })// 监听端口&#xff0c;启动服务 server.listen(9000,()>{console.log(服务已启动....);…

【Jeecg Boot 3 - 第二天】2.1、nginx 部署 JEECGBOOT VUE3

一、场景 二、实战 ▶ 2.1、打包&#xff08;build 前端&#xff09; &#xff1e; Stage 1&#xff1a;修改配置文件 .env.production&#xff08;作用&#xff1a;指向后端接口地址&#xff09; &#xff1e; Stage 2&#xff1a;点击build&#xff08;作用&#xff1…

智能优化算法应用:基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蝙蝠算法4.实验参数设定5.算法结果6.参考文献7.MA…

HeartBeat监控Redis状态

目录 一、概述 二、 安装部署 三、配置 四、启动服务 五、查看数据 一、概述 使用heartbeat可以实现在kibana界面对redis服务存活状态进行观察&#xff0c;如有必要&#xff0c;也可在服务宕机后立即向相关人员发送邮件通知 二、 安装部署 参照文章&#xff1a;HeartBeat监…

「差生文具多系列」推荐两个好看的 Redis 客户端

&#x1f4e2; 声明&#xff1a; &#x1f344; 大家好&#xff0c;我是风筝 &#x1f30d; 作者主页&#xff1a;【古时的风筝CSDN主页】。 ⚠️ 本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正&#xff0c;不胜感激。 直达博主&#xff1a;「…

前端 三种解决跨域问题 jsonp 、CORS、代理服务器 解决跨域全家桶

我的报错情况是 后端接口是3000 前端本地接口是8080&#xff0c;最后出现跨域 1.什么是跨域&#xff1f; 首先跨域是一种安全机制&#xff0c;是在开发上线前考虑到的安全问题并且需要采取合适的手段去避免这个问题带来的程序错误,接口跨域可以后端处理,也可以前端处理&#x…

Appium微信小程序自动化环境准备

一、前置说明 微信从8.0.19开始内核从x5换成xweb之后&#xff0c;原先的开启webview调试的原方案已经会报503错误。 点击下面的链接&#xff0c;都会报503错误&#xff1a; http://debugmm.qq.com/?forcex5ture http://debugx5.qq.com 微信内核升级为xweb之后&#xff0c;需要…

LeetCode力扣每日一题(Java):58、最后一个单词的长度

一、题目 二、解题思路 1、我的思路 先将字符串转换成字符数组 由于我们需要获取最后一个单词的长度&#xff0c;所以我们从后往前遍历字符数组 我们还需判断所遍历的字符是不是字母&#xff0c;即判断每个字符对应的ASCII值即可&#xff0c;用计数器count来储存单词长度 …

小型洗衣机哪个牌子质量好?迷你洗衣机排名前十名

随着内衣洗衣机的流行&#xff0c;很多小伙伴在纠结该不该入手一款内衣洗衣机&#xff0c;专门来洗一些贴身衣物&#xff0c;答案是非常有必要的&#xff0c;因为我们现在市面上的大型洗衣机只能做清洁&#xff0c;无法对我们的贴身衣物进行一个高强度的清洁&#xff0c;而小小…

Unity优化——加速物理引擎1

大家好&#xff0c;这里是七七&#xff0c;今天开始更新物理引擎相关的优化部分了&#xff0c;本文介绍的是物理引擎内部工作情况。 Unity技术有两种不同的物理引擎&#xff1a;用于3D物理的Nvidia的PhysX和用于2D物理的开源项目Box2D。然而&#xff0c;Unity对它们的实现是高…

和鲸科技携手深圳数据交易所,“数据+数据开发者生态”赋能人工智能产业发展

信息化时代&#xff0c;数据驱动决策的重要性日益凸显。通过利用数据可以深入了解市场需求、客户行为、竞争态势等关键信息&#xff0c;从而制定更为有效的战略和决策。围绕推动数据要素产业发展&#xff0c;近日&#xff0c;深圳数据交易所&#xff08;以下简称“深数所”&…