当前位置： 首页 > news >正文

【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )

news 2026/2/8 15:31:28

文章目录

  • 一、标签显示模式 ( 块级元素 | 行内元素 )
  • 二、块级元素
    • 1、块级元素简介
    • 2、块级元素特点
    • 3、文字块级元素
    • 4、代码示例





一、标签显示模式 ( 块级元素 | 行内元素 )


标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ;

  • 块级元素 : div 标签 独占一行显示 , 对应 块标签 ;
  • 行内元素 : span 标签可以 在一行放置多个进行显示 , 对应 行内标签 ;




二、块级元素



1、块级元素简介


块级元素 可以 独占一行显示 , 常见的 块级元素 标签 :

  • 标题标签 : <h1> , <h2> , … , <h6> ;
  • 段落标签 : <p> ;
  • 块标签 : <div> ;
  • 列表标签 : <ul> , <ol> , <li> ;

上述标签都会 独占一行显示 ;


2、块级元素特点


块级元素 特点 :

  • 独占一行 : 块级元素 会 独占父容器 的一行 , 宽度默认充满父容器 ;
  • 大小可控 : 标签 的 高度 , 宽度 , 内边距 , 外边距 可以自定义设置 ;
  • 默认宽度 : 块级元素 默认 宽度 是 父容器 的 100% 宽度 ;
  • 容器特点 : 块级元素 作为 容器 , 可以在其中 放置 块级元素 和 行内元素 ;

3、文字块级元素


特殊的块级元素 : 存放文字内容的 块级元素 , 只能包含文字内容 , 不能包含其它块级元素 ;

  • 段落标签 : <p> 标签是特殊的 块级元素 , 其中不能包含 <div> 标签 , 只能放文字内容 ;
    • 如果在 p 标签内放置 块级元素 , 会显示错误效果 ;
  • 标题标签 : 标题标签中只能放置文字 , 不能包含 <div> 标签 , 只能放文字内容 ;

4、代码示例


代码示例 : 为 div 块级元素 设置 宽度 , 高度 , 上边距 , 背景颜色 , 文字颜色 ; 下面的代码中 ,

  • 为 div 标签设置了 200x100 像素大小 ,
  • 并设置了 2 像素的上边距 ,
  • 块级元素 整体背景设置为了黑色 ,
  • 文字颜色设置成了 绿色 ;
<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>块级元素</title><base target="_blank"/><style>div {/* 宽度 200 像素 */width: 200px;	/* 高度 100 像素 */height: 100px;/* 上边距 2 像素 */margin-top:2px;/* 背景黑色 */background-color: black;/* 文字绿色 */color:green;}</style>
</head>
<body><div>块级元素1</div><div>块级元素2</div><div><strong>文字</strong><h1>标题</h1></div>
</body>
</html>

显示效果 :

在这里插入图片描述

相关文章：

【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )

文章目录一、标签显示模式 ( 块级元素 | 行内元素 )二、块级元素1、块级元素简介2、块级元素特点3、文字块级元素4、代码示例一、标签显示模式 ( 块级元素 | 行内元素 ) 标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ; 块级元素 : …...

编程日记 2023/5/12 3:17:10

hive真实表空间大小统计

1. 问题 如果是采用hdfs上传加载的表、或者是flume直接写hdfs的表空间通常看hive的属性是不准确的。 2. 思路 为了使结果更精确&#xff0c;我们直接使用linux下命令统计hive仓库目录下的每个表对应的文件夹目录占用空间的大小。 3. 解决方法 这里建立三层表结构 ods: 原始…...

编程日记 2023/5/12 3:17:08

微信小程序引入Vant UI步骤

官方文档教程 1、通过 npm 安装 # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i vant-weapp -S --production2、修改 app.json 将 app.json 中的 “style”: “v2” 去除&#xff0c;小程序的新…...

编程日记 2023/5/10 5:04:46

【震撼发布】《致敬未来的攻城狮计划》| 文末赠书3本

《致敬未来的攻城狮计划》—— 文末有福利 摘要&#xff1a; 一个崭新的计划&#xff0c;寻找那群有志于向嵌入式发展的未来工程师&#xff01; 文章目录1 活动计划初衷2 活动计划形式3 活动计划收获4 活动计划要求5 活动计划时间6 活动计划致谢7 活动计划特别说明8 温馨提示9 …...

编程日记 2023/5/12 3:17:06

8.装饰者模式

目录 简介 角色组成 实现步骤 1. 新建 Log.class&#xff0c;添加如下代码 2. 新建 Log4j.class&#xff0c;继承 Log.class&#xff0c;并实现 record() 方法 3. 新建 Decorator.class&#xff0c;继承 Log.class 4. 新建 Log4jDecorator.class&#xff0c;继承 Decorat…...

编程日记 2023/5/12 3:17:04

GIT基础常用命令-1 GIT基础篇

git基础常用命令-1 GIT基础篇1.git简介及配置1.1 git简介1.2 git配置config1.2.1 查看配置git config1.2.2 配置设置1.2.3 获取帮助git help2 GIT基础常用命令2.1 获取镜像仓库2.1.1 git init2.1.2 git clone2.2 本地仓库常用命令2.2.1 git status2.2.2 git add2.2.3 git diff2…...

编程日记 2023/5/12 3:17:01

华为OD机试题，用 Java 解【数列描述】问题

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典使用说明 参加华为od机试，一定要注意不…...

编程日记 2023/5/12 3:16:59

2022掉队的“蔚小理”，按下了兔年加速键

配图来自Canva可画 进入2023年&#xff0c;各大车企又展开了新一轮的“竞速”。尽管1月份汽车整体销量出现了“阴跌”&#xff0c;但从各路车企发布的销量目标来看&#xff0c;车企对于2023依旧保持着较高的信心和预期。在一众车企中&#xff0c;以“蔚小理”为代表的新势力们…...

编程日记 2023/5/12 3:16:56

【NLP相关】attention的代码实现

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️&#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…...

编程日记 2023/5/12 3:16:52

凌恩生物资讯

凌恩生物转录组项目包含范围广&#xff0c;项目经验丰富&#xff0c;人均10年以上项目经验&#xff0c;其中全长转录组测序研究基因结构已经成为发文章的趋势&#xff0c;研究物种包括高粱、玉米、拟南芥、鸡、人和小鼠、毛竹、棉花等。凌恩生物提供专业的全长转录组测序及分析…...

编程日记 2023/5/11 16:00:37

Leetcode 148. 排序链表（二路归并）

题目&#xff1a;    给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 解法一&#xff1a;    递归解法&#xff0c;自顶向下    链表版二路归并排序&#xff08;升序&#xff0c;递归版&#xff09;&#xff0c;稳定排序    时间复杂度…...

编程日记 2023/5/11 16:00:34

记录Paint部分常用的方法

Paint部分常用的方法1、实例化之后Paint的基本配置2、shader 和 ShadowLayer3、pathEffect4、maskFilter5、colorFilter6、xfermode1、实例化之后Paint的基本配置 Paint.Align Align指定drawText如何将其文本相对于[x,y]坐标进行对齐。默认为LEFTPaint.Cap Cap指定了笔画线和路…...

编程日记 2023/5/12 3:16:48

ArrayList集合底层原理

ArrayList集合底层原理ArrayList集合底层原理1.介绍2.底层实现3.构造方法3.1集合的属性4.扩容机制5.其他方法6.总结ArrayList集合底层原理 1.介绍 ​ ArrayList是List接口的可变数组的实现。实现了所有可选列表操作&#xff0c;并允许包括 null 在 内的所有元素。 每个 Array…...

编程日记 2023/5/11 16:00:32

内网部署swagger快解析映射方案发布让外网访问

计算机业内人士对于swagger并不陌生&#xff0c; 不少人选择用swagger做为API接口文档管理。Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新文件的方法&#x…...

编程日记 2023/5/11 16:00:30

全网最全整理，自动化测试10种场景处理（超详细）解决方案都在这......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 自动化工作流程 自动…...

编程日记 2023/5/12 3:16:45

【c++】指针的学习

指针是C中非常重要的概念&#xff0c;理解指针的使用可以使程序更高效&#xff0c;并且可以处理更加复杂的数据结构。 指针是一个变量&#xff0c;它存储了另一个变量的地址。通过指针访问这个变量可以提高程序的效率&#xff0c;尤其是在处理大型数据结构时。 在C中&#xff0…...

编程日记 2023/5/11 16:00:27

华为OD机试题，用 Java 解【水仙花数】问题

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典使用说明 参加华为od机试，一定要注意不…...

编程日记 2023/5/11 16:00:25

【Linux】-- 基本指令

目录 用户管理 adduser passwd userdel pwd ls指令 -l -a -d -F -r -t -R -1 which alias ll ls -n cd cd - cd ~ touch -d stat mkdir -p rmdir rm -r -f man cp ​编辑 -r -f mv cat -n tac more less -N head tail | 管道 dat…...

编程日记 2023/5/11 16:00:23

JavaScript 中的 String 类型 模板字面量定义字符串

ECMAScript 6新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同&#xff0c;模板字面量保留换行字符&#xff0c;可以跨行定义字符串&#xff1a; let str1 早起的年轻人\n喜欢经常跳步;let str2 早起的年轻人喜欢经常跳步;console.log(str1);// 早起的年轻人…...

编程日记 2023/5/11 11:00:25

我国防疫数据报告，2022年广东花费711亿，北京人均支出第一

哈喽大家好&#xff0c;2023年已经过去一段时间了&#xff0c;随着防疫策略的调整&#xff0c;小伙伴们是不是开始到处旅行购物了呢&#xff1f;当然了&#xff0c;对于自身的健康情况小伙伴们还是要多多关注&#xff0c;不要松懈。随着春节过后有序复工复产&#xff0c;各地纷…...

编程日记 2023/5/11 11:00:00

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/26 21:56:38

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2026/1/31 12:27:36