CSS 的块级元素和行内元素

news2025/1/18 18:57:05

previewfile_1658340036

CSS 的块级元素和行内元素

常见的块级元素:h1 - h6pdivulolli
常见的行内元素:astrongbemispan

块级元素的特点

  • 独占一行
  • 高度, 宽度, 内外边距, 行高都可以控制.
  • 宽度默认是和父元素一样宽
  • 是一个容器(盒子), 里面可以放行内和块级元素

注:文字类的元素内不能使用块级元素,例子p标签主要用于存放文字, 内部不能放块级元素, 比如div标签

行内元素的特点

  • 不独占一行,一行可以显示多个
  • 无法设置高度,宽度,行高
  • 左右外边距有效(上下无效),内边距有效
  • 默认宽度就是本身的内容
  • 行内元素通常只能容纳文本和其他行内元素,不能放块级元素

注:a 标签中不能再放 a 标签;a标签是行内元素,但是可以放块级元素,不过更建议先把 a 转换成块级元素

行内元素和块级元素的区别

  1. 块级元素独占一行,行内元素不独占一行
  2. 块级元素可以设置宽高,行内元素不能设置宽高
  3. 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置

行内元素和块级元素的相互转化

使用display属性进行修改,可以把div等块级元素变成行内元素,也可以把 a ,span等变成块级元素

display: block; 将行内元素改成块级元素(常用)
display: inline; 将块级元素改成行内元素(几乎不用)
display: inline-block; 将选中元素改成行内块元素

示例代码

a标签行内元素改成块级元素

image-20240225135656111

运行效果
更改前效果:
image-20240225135831995

更改后效果:
image-20240225135914232


margin: auto;块级元素水平居中
text-align: center; 是让行内元素或者行内块元素居中的

去除浏览器默认样式,保证代码在不同的浏览器上都能按照统一的样式显示

* {
    marign: 0;
    padding: 0;
}

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

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

相关文章

深入理解计算机系统——进程,虚拟内存,文件

文章目录 操作系统之进程线程虚拟内存文件 操作系统之进程 进程是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配的基本单位,是操作系统结构的基础。进程具有以下特征: 独立性。进程是独立运行的单位,具有自…

Camunda7.18流程引擎启动出现Table ‘camunda_platform_docker.ACT_GE_PROPERTY‘的解决方案

文章目录 1、问题描述2、原因分析3、解决方案3.1、方案一:降低mysql版本3.2、方案二:增加nullCatalogMeansCurrent参数(推荐) 4、总结 1、问题描述 需要在docker中,部署Camunda流程引擎。通过启动脚本camunda-platfor…

Linux系统添加新的网卡,并启用

在Rocky Linux系统中添加新的网卡并启用,一般涉及到以下步骤: 物理连接网卡: 首先确保你的虚拟机已经正确连接了新的网络适配器。 查看新添加的网卡: 在终端中输入以下命令来列出所有已识别的网络接口: ip link show …

1110. 删点成林

1110. 删点成林 关键要点 通过O(1)时间复杂度确认节点是否需要删除 Set to_deleteSet new HashSet<>(); Arrays.stream(to_delete).forEach(to_deleteSet::add); 使用深度优先搜索&#xff08;DFS&#xff09;遍历树 node.left dfs(node.left, s, ans); node.right …

C语言《数据结构与算法》安排教学计划课设

背景&#xff1a; 10、安排教学计划 (1) 问题描述。 学校每学期开设的课程是有先后顺序的&#xff0c;如计算机专业&#xff1a;开设《数据结构》课程之前&#xff0c;必须先开设《C语言程序设计》和《离散数学》课程&#xff0c;这种课程开设的先后顺序称为先行、后继课程关…

RabbitMQ服务启动失败

报错信息&#xff1a; 在服务中启动RabbitMQ服务显示&#xff1a; RabbitMQ 服务正在启动 . RabbitMQ 服务无法启动。 系统出错。 发生系统错误 1067。 进程意外终止 报错原因&#xff1a; 1.Erlang与RabbitMQ是否匹配 2.Erlang与RabbitMQ安装路径是否存在中文或空格 3.电…

定时任务处理-Spring Task

目录 1 前言 2 cron表达式 2.1 相关概念的介绍 2.2 举个例子(白雪警告) 2.3 使用网站自动生成 3 Spring Task的使用 3.1 导入依赖坐标 3.2 开启任务调度 3.3 自定义定时任务类 1 前言 当我们需要处理一些定时任务的时候就需要用到我们的Spring Task&#xff0c;接下来…

在vue3中使用及封装echarts

在vue3中使用及封装echarts 1.获取ECharts 从npm获取 npm install echarts2.在项目中引入ECharts&#xff08;父子组件无通信&#xff09; 导入echarts import * as echarts from echarts创建DOM结构 <template><div ref"myChart" style"width: …

数据库应用:Windows 部署 MySQL 8.0.36

目录 一、实验 1.环境 2.Windows 部署 MySQL 8.0.36 3.Windows配置环境变量 4.Navicat链接MySQL 二、问题 1.安装MySQL 报错 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 主机软件版本IP备注WindowsMySQL8.0.36localhost 2.Windows 部署 MySQL 8.0.…

m估计及其c++简单实现

文章目录 什么是m估计怎么求解m估计呢&#xff1f;Huber函数时的线性m估计 什么是m估计 自20世纪60年代稳健统计建立以来&#xff0c;在国内外众多学者的研究之下&#xff0c;诞生了一系列稳健统计重要理论和成果。其中最主要且广泛使用的稳健统计有以下三类&#xff1a; L-e…

深度学习系列60: 大模型文本理解和生成概述

参考网络课程&#xff1a;https://www.bilibili.com/video/BV1UG411p7zv/?p98&spm_id_frompageDriver&vd_source3eeaf9c562508b013fa950114d4b0990 1. 概述 包含理解和分类两大类问题&#xff0c;对应的就是BERT和GPT两大类模型&#xff1b;而交叉领域则对应T5 2.…

【深度学习:视频注释】如何为机器学习自动执行视频注释

【深度学习&#xff1a;视频注释】如何为机器学习自动执行视频注释 #1&#xff1a;多目标跟踪 &#xff08;MOT&#xff09; 以确保帧与帧之间的连续性#2&#xff1a;使用插值来填补空白#3: 使用微模型加速人工智能辅助视频注释#4: 自动目标分割提高目标分割质量 自动视频标记通…

Sora将创造多少算力需求?

1.1 Sora 训练与推理算力需求初步测算 Sora发布表现亮眼&#xff0c;TransformerDiffusion架构或成为文生视频大模型新范式。据Sora技术报告&#xff0c;类似于LLM将不同文本数据统一为token&#xff0c;Sora可将不同类型的视频和图像等视觉数据统一为patches&#xff0c;具体…

<script> 标签中的type

typetext/javascript typeapplication/javascript 前者是比较早的版本&#xff0c;已经废弃&#xff0c;但是浏览器大都还支持 后者是最新的规范&#xff0c;但是会有兼容性问题&#xff0c;不兼容ie6-10 typeapplication/json 比较特殊&#xff0c;不常用 简单示例 <!DOCTY…

设计模式学习笔记 - 面向对象 - 7.为什么要多用组合少用继承?如何决定该用组合还是继承?

前言 在面向对象编程中&#xff0c;有一条非常经典的设计原则&#xff1a;组合优于继承&#xff0c;多用组合少用继承。 为什么不推荐使用继承&#xff1f; 组合比继承有哪些优势&#xff1f; 如何判断该用组合还是继承&#xff1f; 为什么不推荐使用继承&#xff1f; 继承…

如何在本地电脑部署HadSky论坛并发布至公网可远程访问【内网穿透】

文章目录 前言1. 网站搭建1.1 网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3 Cpolar稳定隧道&#xff08;本地设置&#xff09;2.4 公网访问测试 总结 前言 经过多年的基础…

uvloop,一个强大的 Python 异步IO编程库!

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站零基础入门的AI学习网站~。 目录 ​编辑 前言 什么是uvloop库&#xff1f; 安装uvloop库 使用uvloop库 uvloop库的功能特性 1. 更…

redis的缓存穿透,缓存并发,缓存雪崩,缓存问题及解决方案

缓存穿透 问题原因 解决方案 缓存并发 缓存雪崩 缓存失效时间设置一致导致的。 解决方案&#xff1a; 1&#xff09;方案一 2&#xff09;方案二 如何设计一个缓存策略&#xff0c;缓存热点数据&#xff1f;

自动化部署证书 acme.sh 使用教程

简介 acme.sh 是一个开源的 ACME 协议的客户端工具&#xff0c;用于自动化申请、更新和部署 SSL/TLS 证书。通过使用 acme.sh&#xff0c;用户可以轻松地在服务器上设置 HTTPS 加密连接&#xff0c;而无需手动操作。它支持多种 DNS 接口和证书颁发机构&#xff0c;可以与各种 …

多进程完成文件拷贝:2024/2/20(已修改)

作业1&#xff1a;使用多进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;父进程回收子进程的资源 代码&#xff1a; #include<myhead.h>//定义获取文件长度的函数 int get_file_len(const char *srcfile, const char *de…