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

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

块级元素(Block-level Elements):

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

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

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

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

行内元素(Inline Elements):

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

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

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

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

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

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

总结:

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

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

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

相关文章

Linux下超轻量级Rust开发环境搭建:一、安装Rust

Rust语言在国内逐步开始流行,但开发环境的不成熟依然困扰不少小伙伴。 结合我个人的使用体验,推荐一种超轻量级的开发环境:Rust Helix Editor。运行环境需求很低,可以直接在Linux终端里进行代码开发。对于工程不是太过庞大的Rus…

目标检测——SPPNet算法解读

论文:Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition 作者:Kaiming He, Xiangyu Zhang, Shaoqing Ren, and Jian Sun 链接:https://arxiv.org/abs/1406.4729 目录 1、算法概述2、Deep Networks with Spatia…

share pool的组成

share pool的组成 3块区域:free,library cache,row cache 通过查看v$librarycache视图,可以监控library cache的活动情况,进一步衡量share pool设置是否合理; 其中reloads列,表示对象被重新加载的次数,在一个设置合…

代码随想录算法训练营第30天|● 332.重新安排行程 ● 51. N皇后 ● 37. 解数独 ● 总结

332. 重新安排行程 困难 相关标签 相关企业 给你一份航线列表 tickets ,其中 tickets[i] [from(i), to(i)] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK(肯尼迪国际机场)出发的先生&#…

logback日志打印操作人

logback日志打印操作人 自定义拦截器 package com.demo.dv.net.config;import com.demo.dv.net.common.domain.UserInfo; import com.demo.dv.net.common.utils.CurrentUserUtil; import org.slf4j.MDC; import org.springframework.stereotype.Component; import org.spring…

适用于 Windows 的 10 个顶级分区管理器软件

您想要对硬盘驱动器或 USB 驱动器进行分区的原因可能有多种。许多用户希望对其外部和内部硬盘驱动器进行分区以有效地管理数据。为了处理分区,Windows为用户提供了一个内置的分区管理工具。 Windows 用户可以通过磁盘管理面板对任何驱动器进行分区。然而&#xff0…

哪种超声波清洗眼镜不伤镜片?超声波什么牌子好?眼镜清洗机推荐

戴眼镜的朋友就能够感同身受,眼镜佩戴一天真的特别容易脏,灰尘或者是脸部出汗出油等,让耳机惨不忍睹!对于眼镜清洗的方式也有很多种,那么到底哪种清洗方式才是真正有效果并且不伤眼镜的呢?跟随笔者的脚步来…

电商控制台系统商品模块的处理

电商项目(前台): 登陆 注册(安全,网页版) (审核机制) 外部功能: check审核机制 Uncheck未通过机制 findUserByCheck()一条一条展示用户 findUser() 批量获取用户(分页…

安装Kuboard管理K8S集群

目录 第一章.安装Kuboard管理K8S集群 1.安装kuboard 2.绑定K8S集群,完成信息设定 3.内网安装 第二章.kuboard-spray安装K8S 2.1.先拉镜像下来 2.2.之后打开后,先熟悉功能,注意版本 2.3.打开资源包管理,选择符合自己服务器…

Flowable 7.0.0 release发布

更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H5) : http://122.227.135.243:9888 更多…

Python-Opencv图像处理的小坑

1.背景 最近在做一点图像处理的事情,在做处理时的cv2遇到一些小坑,希望大家遇到的相关的问题可以注意!! 2. cv2.imwrite保存图像 cv2.imwrite(filename, img, [params]) filename:需要写入的文件名,包括路…

快速排序并不难

快速排序的核心框架是“二叉树的前序遍历对撞型双指针”。我们在《一维数组》一章提到过”双指针思路“:在处理奇偶等情况时会使用两个游标,一个从前向后,一个是从后向前来比较,根据结果来决定继续移动还是停止等待。快速排序的每…

医院信息系统源码,采用JAVA编程,支持跨平台部署应用,满足一级综合医院(专科二级及以下医院500床)的日常业务应用

医院HIS系统源码,HIS系统全套源码,支持电子病历4级,自主版权 his医院信息系统内设门诊/住院医生工作站、门诊/住院护士工作站。各工作站主要功能依据职能要求进行研发。如医生工作站主要功能为编辑电子病历、打印、处理医嘱;护士工…

总结|哪些平台有大模型知识库的Web API服务

截止2023/12/6 笔者个人的调研,有三家有大模型知识库的web api服务: 平台类型文档数量文档上传并解析的结构api情况返回页码文心一言插件版多文档有问答api,文档上传是通过网页进行上传有,而且是具体的chunk id,需要设…

“消费增值:改变你的购物方式,让每一笔消费都变得更有价值“

你是否厌倦了仅仅购买物品或享受服务后便一无所有的消费方式?现在,消费增值的概念将彻底改变你的消费观念!通过参与消费增值,你的每一笔消费都将变得更有价值! 消费增值是一种全新的消费理念,它让你在购物的…

星闪的三层架构

在数字化转型的浪潮中,物联网技术正成为连接世界的纽带,将各种智能设备融为一个无缝的整体。而在这个大背景下,星闪崭露头角,将成为连接未来的关键枢纽。本文将介绍星闪系统的三层架构,包括基础应用层、基础服务层和星…

面向AI开发的六种最重要的编程语言

在AI开发界,你使用的编程语言很重要。每种语言有其独特的特性。选择合适的语言不是关乎个人偏好的问题,而是影响你如何构建和启动AI系统的关键决定。无论你在AI方面有无经验,选择一种合适的语言来学习至关重要。合适的语言将帮助你创建功能强…

树莓派mpu6050

sudo vi /etc/modules //文件的最后写入 i2c-bcm2708 i2c-dev //保存退出 然后是可选的,把设备解除屏蔽,一块全新的板子可能是没有的。 sudo raspi-config sudo reboot sudo apt-get install i2c-tools //可能你的已经安装了,运行一遍总没…

一文带你快速了解Python史上最快Web框架

文章目录 1. 写在前面2. Sanic框架简介2.1 背景2.2 特征与优势 3. Sanic框架实战3.1. 安装Sanic3.2. Demo案例编写 【作者主页】:吴秋霖 【作者介绍】:Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&a…

报错:Uncaught ReferenceError: Cannot access ‘l‘ before initialization

在文件 .babelrc 或 babel.config.js ,webpack.config.js 下配置 .babel 或 babel.config.js "plugins": ["babel/plugin-transform-runtime" ] webpack.config.js,详见 Webpack target module.exports {target: [web, es5], }