前端成长之路:CSS元素显示模式

元素显示模式

网页中的标签非常的多,在不同的地方会使用到不同类型的标签,了解这些标签的特点可以更好的布局我们的网页。 元素显示模式就是元素(标签)按照什么方式进行显示,比如:div标签会自己独占一行;但是一行又可以有多个span,这就是每个元素特有的显示模式。HTML元素一般分为块元素行内元素两种类型。

块元素

在HTML中常见的块元素有:<h1>-<h6>的标题元素<p>段落元素<div>元素<ul>、<ol>、<li>列表元素等,其中div是最典型的块元素。 块元素们共同的特点是:

1. 块元素们会自己独占一行。

2. 块元素的高度、宽度、内外边距都是可以控制的。

3. 块元素的默认宽度是容器(父级元素)的100%。

4. 块元素就像一个容器(或者盒子),里面可以放行内元素或者其他的块元素

特别注意:文字类的元素内不能再使用块元素了! p标签就是一个文字类的元素,所以说p标签内就不能放块元素了(特别是div);h1-h6的标题元素也属于文字类的元素,所以说也不能放其他块元素。

行内元素

在HTML中常见的行内元素有:<a>超链接元素<strong>这一类的元素<span>元素等,其中span是最典型的行内元素。行内元素们共同的特点是:

1. 相邻的行内元素在一行上,一行可以显示多个行内元素。

2. 直接设置行内元素的宽高是无效的。

3. 行内元素的默认宽度是其本身内容的宽度。

4. 行内元素只能容纳文本或者其他行内元素。

特别注意:链接中不可以放链接:

这样写是错误的,虽然还是会跳转到href中指定的url,但这是极其不规范的! 并且,<a>标签中可以放块级元素(这是一种十分特殊的情况),但是建议给a进行块级模式转换,保证安全。

行内块元素

在行内元素中有几个特殊的元素:<img/>、<input/>、<td>,它们同时具备块元素和行内元素的特点,所以说有些资料将它们称为行内块元素。 行内块元素的特点是:

  1. 和行内元素一样,相邻的行内块元素在同一行上,一行可以显示多个。(这是行内元素的特点)
  2. 行内块元素的默认宽度是其本身内容的宽度。(这也是行内元素的特点)
  3. 行内块元素的宽高、内外边距都是可以直接控制的。(这是块元素的特点)

可以看见,可以通过CSS直接控制img标签的宽高(这是块元素的特点),并且相邻的img标签是在一行显示多个的(这是行内元素的特点)。

学习元素的显示模式的主要目的是分清这些不同元素各自的特点,在合适的地方使用合适的标签,使用合适的CSS属性进行布局。

元素显示模式转换

在特殊情况下,在布局时需要元素模式的转换,简单理解为:一个模式的元素需要另外一个模式元素的部分特性,比如想要增加链接<a>的触发范围等。可以在CSS中通过display属性进行转换:display:block是将当前元素转换为块元素;diplay:inline是将当前元素转换为行内元素;display:inline-block是将当前元素转换为行内块元素。

将<a>转换为块元素,然后设置其宽高:

这说明了是可以将行内元素a设置转换为块元素,转换后的元素的确具有块元素的特性。

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

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

相关文章

Unity类银河战士恶魔城学习总结(P178 Archer s arrow 弓箭手的箭)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节制作了一个弓箭手的箭 Arrow_Controller.cs 1.OnTriggerEnter2D方法 功能&#xff1a;检测箭矢与其他对象的碰撞。逻辑&#xff1…

机器学习周报(12.9-12.15)

文章目录 摘要Abstract 1 Swin Transformer1.1 输入1.2 Patch Partition1.3 Linear Embedding1.4 Patch Merging1.5 Swin Transformer Block1.6 代码总结 摘要 本篇博客介绍了采用类似于卷积核的移动窗口进行图像特征提取的Swin Transformer网络模型&#xff0c;这是一种基于T…

【C++游记】Vector的使用和模拟实现

枫の个人主页 你不能改变过去&#xff0c;但你可以改变未来 算法/C/数据结构/C Hello&#xff0c;这里是小枫。C语言与数据结构和算法初阶两个板块都更新完毕&#xff0c;我们继续来学习C的内容呀。C是接近底层有比较经典的语言&#xff0c;因此学习起来注定枯燥无味&#xf…

Jenkins流水线初体验(六)

DevOps之安装和配置 Jenkins (一) DevOps 之 CI/CD入门操作 (二) Sonar Qube介绍和安装(三) Harbor镜像仓库介绍&安装 (四) Jenkins容器使用宿主机Docker(五) Jenkins流水线初体验(六) 一、Jenkins流水线任务介绍 之前采用Jenkins的自由风格构建的项目,每个步骤…

Android后端签到flask迁移到rust的axum的过程-签到性能和便携

本次变更了以下内容: 为了使用之前ip2sta的ip到端点名的python,dic变量,将其存入redis hashset.使用地址/api/ip2dic 手动执行之.并且定义在/station/init,这个每天初始化redis的路径下.在rust axum使用redis 连接池在test中 ip2dic,IP转端点名,转本日此端网址.在前端的人名下…

Python OCR文字识别api接口

一.引言 文字识别&#xff0c;也称为光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;&#xff0c;是一种将不同形式的文档&#xff08;如扫描的纸质文档、PDF文件或数字相机拍摄的图片&#xff09;中的文字转换成可编辑和可搜索的数据的技术。随着技…

.NET 6.0 中接入 Log4net 和 NLog

一、接入Log4net 1.按日期和大小混合分割日志 nuget包安装 log4net Microsoft.Extensions.Logging.Log4Net.AspNetCore 配置文件 配置文件内容为 <?xml version"1.0" encoding"utf-8"?> <log4net> <!-- Define some output appe…

编写php项目所需环境

需要编写php项目&#xff0c;需要看到编写的代码展现的效果&#xff0c;这里我选择用xampp来展现 准备工作&#xff1a; https://learncodingfast.com/how-to-install-xampp-and-brackets/#Installing_and_Running_XAMPP xampp下载地址&#xff1a;https://www.apachefriends.…

树莓派Pico火灾报警器项目:基于火焰传感器、蜂鸣器与LED的C++实现

火灾是我们生活中一个不可忽视的安全隐患,而火灾报警系统在预防火灾和保障人员安全方面起着至关重要的作用。通过嵌入式技术,我们可以实现一个简单而有效的火灾报警装置。在本项目中,我们将利用 树莓派Pico 控制 火焰传感器、LED 和 蜂鸣器,模拟火灾报警装置的工作原理。本…

数学建模问题中的多目标规划

多目标规划&#xff08;Multi-Objective Optimization, MOO&#xff09;是指在优化问题中同时优化多个相互冲突的目标函数的情况。与单目标优化问题不同&#xff0c;多目标优化的解通常不再是唯一的&#xff0c;而是一个解的集合&#xff0c;称为帕累托最优解集。这些解在所有目…

智汇云舟4个案例入选“中国联通智慧城市物联感知与AI应用案例”

12月10日&#xff0c;由中国联通智慧城市军团联合联通数字科技有限公司物联网事业部、物联中国团体组织联席会共同主办的“中国联通首届智慧城市领域物联感知与AI应用优秀案例发布交流大会”在郑州举行。大会现场对50余个优秀案例进行了集中发布与表彰。智汇云舟凭借深厚的技术…

【JavaEE】网络(1)

&#x1f435;本篇文章开始讲解计算机网络相关的知识 一、基础概念 1.1 局域网和广域网 局域网→Local Area Network→简称LAN&#xff0c;局域网是局部组建的一种私有网络&#xff0c;局域网内的主机之间可以进行网络通信&#xff0c;局域网和局域网之间在没有连接的情况不能…

Unity 模板测试透视效果(URP)

可以实现笼中窥梦和PicoVR中通过VST局部透视效果。 使用到的Shader: Shader "Unlit/StencilShader" {Properties{[IntRange]_Index("Stencil Index",Range(0,255))0}SubShader{Tags{"RenderType""Opaque""Queue""Geo…

川渝地区软件工程考研择校分析

通过最新数据分析,5所高校软件工程专业2025年考研难度从高到低预计为: 电子科技大学 >> 四川大学 > 重庆大学 ≈ 西南交通大学 > 西南大学 对于想考川渝地区985但核心目标为优先上岸的考生,建议重点考虑西南交通大学软件工程学硕。该校24届软件工程学硕实际录取1…

KeepAlive与RouterView缓存

参考 vue动态组件&#xff1c;Component&#xff1e;与&#xff1c;KeepAlive&#xff1e; KeepAlive官网介绍 缓存之keep-alive的理解和应用 Vue3Vite KeepAlive页面缓存问题 vue多级菜单(路由)导致缓存(keep-alive)失效 vue3 router-view keeperalive对于同一路径但路径…

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五) 你好,我是拉依达。 感谢所有阅读关注我的同学支持,目前博客累计阅读 27w,关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析(持续更新)-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位,感谢大家支持。 《拉…

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(四)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(四) 你好,我是拉依达。 感谢所有阅读关注我的同学支持,目前博客累计阅读 27w,关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析(持续更新)-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位,感谢大家支持。 《拉…

短波红外相机

短波红外相机搭载采用 SenSWIR 技术的 Sony 高灵敏度传感器&#xff0c;能捕获到400nm~1700nm范围的可见光-短波红外宽波段图像信息&#xff0c;该相机可替代传统的“可见光相机短波红外相机”双相机检测方案&#xff0c;降低系统成本、提高处理速度、扩大检测范围&#xff0c;…

系统安全——访问控制访问控制

访问控制 概念 什么是访问控制 access control 为用户对系统资源提供最大限度共享的基础上&#xff0c;对用户的访问权进行管理&#xff0c;防止对信息的非授权篡改和滥用 ​ 访问控制作用 保证用户在系统安全策略下正常工作 拒绝非法用户的非授权访问请求 拒绝合法用户越权…

封装confirm(Vue3+Ts)

文章目录 思路createApp封装confirm下周计划 思路 封装confirm首先要在以前js封装confirm的基础上进行操作 之前封装confirm的时候 是通过调用自己写的confirm函数实现弹窗的出现以及消失并进行逻辑的 那么在Vue3中怎么实现呢&#xff1f; 首先要进行调用函数进行传参的操作&a…