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

news2024/12/16 6:39:24

元素显示模式

网页中的标签非常的多,在不同的地方会使用到不同类型的标签,了解这些标签的特点可以更好的布局我们的网页。 元素显示模式就是元素(标签)按照什么方式进行显示,比如: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.coloradmin.cn/o/2260356.html

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

相关文章

如何在 Ubuntu 22.04 上使用 vnStat 监控网络流量

简介 vnStat是一个免费的、开源的、基于控制台的Linux操作系统网络流量监控工具。通过vnStat&#xff0c;你可以在不同的时间段监控网络统计数据。它简单、轻量级&#xff0c;并且消耗的系统资源很小。vnStat允许你按小时、日、月、周和日生成网络流量数据。本教程将向你展示如…

解决pip下载慢

使用pip下载大量安装包&#xff0c;下载速度太慢了 1、问题现象 pip安装包速度太慢 2、解决方案 配置国内源 vi /root/.config/pip/pip.conf[global] timeout 6000 index-url https://mirrors.aliyun.com/pypi/simple/ trusted-host mirrors.aliyun.com

RabbitMQ中的Publish-Subscribe模式

在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信和解耦系统的关键组件。RabbitMQ 是一个功能强大且广泛使用的开源消息代理&#xff0c;支持多种消息传递模式。其中&#xff0c;Publish/Subscribe&#xff08;发布/订阅&#xff0…

专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。

考研落幕&#xff0c;本人本中游211&#xff0c;如愿以偿考入浙江大学&#xff0c;专业课842信号系统与数字电路140&#xff0c;总分410&#xff0c;和考前多次模考预期差距不大&#xff08;建议大家平时做好定期模考测试&#xff0c;直接从实战分数中&#xff0c;找到复习的脉…

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

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

后端接受前端传递数组进行批量删除

问题描述&#xff1a;当我们需要做批量删除功能的时候&#xff0c;我们循环单次删除的接口也能进行批量删除&#xff0c;但要删除100条数据就要调用100次接口&#xff0c;或者执行100次sql&#xff0c;这样系统开销是比较大的&#xff0c;那么我们直接采用接收的数组格式数据sq…

ByteCTF2024

wp参考&#xff1a; 2024 ByteCTF wp 2024 ByteCTF WP- Nepnep ByteCTF 2024 writeup by Arr3stY0u 五冠王&#xff01;ByteCTF 2024 初赛WriteUp By W&M ByteCTF 2024 By W&M - W&M Team ByteCTF Re WP - 吾爱破解 - 52pojie.cn 2024 ByteCTF - BediveRe_R…

Envoy 服务发现原理大揭秘与核心要点概述

1 Envoy动态配置介绍 动态资源&#xff0c;是指由envoy通过xDS协议发现所需要的各项配置的机制&#xff0c;相关的配置信息保存 于称之为管理服务器&#xff08;Management Server &#xff09;的主机上&#xff0c;经由xDS API向外暴露&#xff1b;下面是一个 纯动态资源的基…

转盘抽奖功能(附加代码)

写在开头 上期代码主要实现PC端电商网站商品放大效果&#xff0c;本期就来实现积分随机抽奖效果&#xff0c;开发久了很多功能都是通过框架组件库来完成&#xff0c;但是如果组件满足不了开发需求&#xff0c;还需要开发人员手动封装组件&#xff0c;专门出这样一期文章&#x…

【CSS in Depth 2 精译_075】12.2 Web 字体简介 + 12.3 谷歌字体的用法

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体 ✔️12.3 谷歌字体 ✔️12.…

ARM嵌入式学习--第七天(GPT)

GPT -介绍 GPT有一个32位向上计数器&#xff0c;定时计数器值可以使用外部引脚上的事件捕获到寄存器中&#xff0c;捕获触发器可以被编程为上升沿和下降沿。GPT还可以在输出比较引脚上生成事件&#xff0c;并在定时器达到编程值时产生中断。GPT有一个12位预分频器&#xff0c;…

搭建Tomcat(一)---SocketServerSocket

目录 引入1 引入2--socket 流程 Socket&#xff08;应用程序之间的通讯保障&#xff09; 网卡(计算机之间的通讯保障) 端口 端口号 实例 client端 解析 server端 解析 相关方法 问题1&#xff1a;ServerSocket和Socket有什么关系&#xff1f; ServerSocket Soc…

SpringBoot快速使用

一些名词的碎碎念: 1> 俩种网络应用设计模式 C/S 客户端/服务器 B/S 浏览器/服务器 俩者对比: 2> 集群和分布式的概念 集群: 分布式: 例子: 一个公司有一个人身兼多职 集群: 招聘N个和上面这个人一样身兼多职 分布式: 招聘N个人,分担上面这个人的工作,进行工作的拆分. 工…

【含开题报告+文档+PPT+源码】基于SpringBoot的开放实验管理平台设计与实现

开题报告 设计开放实验管理平台的目的在于促进科学研究与教学的融合。传统实验室常常局限于特定地点和时间&#xff0c;而开放平台可以为学生、教师和研究人员提供一个便捷的交流与共享环境。通过在线平台&#xff0c;他们可以分享实验资源、交流经验&#xff0c;从而促进科学…

分布式 漏桶算法 总结

前言 相关系列 《分布式 & 目录》《分布式 & 漏桶算法 & 总结》《分布式 & 漏桶算法 & 问题》 概述 简介 LBA Leaky Bucket Algorithm 漏桶算法是一种流行于网络通信领域的流量控制/频率限制算法。漏桶算法的核心原理是通过一个概念上的“漏桶”来…

linux glances vs top

一、安装 apt-get install glances glances top显示效果&#xff1a;

CTF知识集-PHP特性

title: CTF知识集-PHP特性 写在开头可能会用到的提示 call_user_func 调用的函数可以不区分大小写preg_match过滤存在长度溢出&#xff0c;长度超过100w检测失效。str_repeat(‘show’,250000); 生成100w个字符preg_match是无法处理数组的&#xff0c;例如:preg_match( n u m…

Hadoop运行Mapreduce问题集锦——Ubuntu虚拟机配置

一、端口访问问题 问题描述 运行任务前一直重连。具体来说&#xff0c;错误发生在尝试从czs-virtual-machine虚拟机的127.0.1.1地址连接到同一台机器的8032端口时&#xff0c;连接被拒绝。 如下&#xff1a; 2024-11-17 23:05:45,800 INFO retry.RetryInvocationHandler: java…

【经验分享】搭建本地训练环境知识点及方法

最近忙于备考没关注&#xff0c;有次点进某小黄鱼发现首页出现了我的笔记还被人收费了 虽然我也卖了一些资源&#xff0c;但我以交流、交换为主&#xff0c;笔记都是免费给别人看的 由于当时刚刚接触写的并不成熟&#xff0c;为了避免更多人花没必要的钱&#xff0c;所以决定公…

流程引擎Activiti性能优化方案

流程引擎Activiti性能优化方案 基于关系型数据库层面优化 MySQL建表语句优化 Activiti在MySQL中创建默认字符集为utf8&#xff08;即utf8mb3&#xff09;格式&#xff0c;本文将默认字符集设置为utf8mb4&#xff0c;排序规则为utf8mb4_general_ci&#xff0c;并修改变量等类…