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

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

news 2026/2/9 3:35:10

文章目录

  • 一、标签显示模式 ( 块级元素 | 行内元素 )
  • 二、块级元素
    • 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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/8 15:03:14

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/2/7 19:53:11

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2026/2/6 4:24:06

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2026/2/7 23:29:43

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据（33个指标）

旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据&#xff01;该数据集源自2025年4月发表于《地理学报》的论文成果…...

编程新知 2026/2/8 6:41:24

聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

编程新知 2026/2/3 2:04:52