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

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

news 2025/11/6 8:08:57

文章目录

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/11/5 11:52:58

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/11/5 6:33:45

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/11/3 20:04:18

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/11/2 5:02:11

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/10/27 13:41:34

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/10/23 16:56:42

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/10/25 0:12:07

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/10/27 10:31:03