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

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

news 2026/5/17 1:42:12

文章目录

一、标签显示模式 ( 块级元素 | 行内元素 )
二、块级元素
- 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. 思路为了使结果更精确，我们直接使用linux下命令统计hive仓库目录下的每个表对应的文件夹目录占用空间的大小。 3. 解决方法这里建立三层表结构 ods: 原始…...

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

官方文档教程 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” 去除，小程序的新…...

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

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

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

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

8.装饰者模式

目录简介角色组成实现步骤 1. 新建 Log.class，添加如下代码 2. 新建 Log4j.class，继承 Log.class，并实现 record() 方法 3. 新建 Decorator.class，继承 Log.class 4. 新建 Log4jDecorator.class，继承 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年，各大车企又展开了新一轮的“竞速”。尽管1月份汽车整体销量出现了“阴跌”，但从各路车企发布的销量目标来看，车企对于2023依旧保持着较高的信心和预期。在一众车企中，以“蔚小理”为代表的新势力们…...

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

【NLP相关】attention的代码实现

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

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

凌恩生物资讯

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

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

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

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

编程日记 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接口的可变数组的实现。实现了所有可选列表操作，并允许包括 null 在内的所有元素。每个 Array…...

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

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

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

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

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

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

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

【c++】指针的学习

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

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

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

编程日记 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新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串： let str1 早起的年轻人\n喜欢经常跳步;let str2 早起的年轻人喜欢经常跳步;console.log(str1);// 早起的年轻人…...

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

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

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

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

MCP2221+Blinka+Jupyter：桌面Python直连I2C传感器实时可视化

1. 项目概述：当桌面电脑“学会”与传感器对话作为一名在嵌入式开发和数据可视化领域摸爬滚打了十多年的老手，我见过太多为了读取一个温度传感器的数据，而不得不先折腾Arduino固件、再折腾串口通信、最后还要自己写个上位机软件的复杂流程。整…...

编程新知 2026/5/17 1:37:20

影刀RPA跨境店群运营架构：多账号环境隔离与 Python 高并发调度系统实战

关于我一个曾经死磕底层算法、痴迷于压榨软硬件性能、满脑子分布式高可用架构的资深开发者，最后跑去给跨境工作室的“Boss”写店群底层自动化调度系统这件事。很多以前在技术圈里混的同行，或者是看着我一路从 ImageTransPro 图像处理软件 1.0 重构做到…...

编程新知 2026/5/17 0:48:12

企业采购必读：ElevenLabs合同中6处关键条款陷阱（含地域限制、转授权失效、审计权模糊等），法务已验证

更多请点击： https://intelliparadigm.com 第一章：企业采购必读：ElevenLabs合同中6处关键条款陷阱（含地域限制、转授权失效、审计权模糊等），法务已验证地域限制条款的隐性封锁效应 ElevenLabs服务协议第…...

编程新知 2026/5/17 0:32:42

2026年十大最佳地区搜索排名优化工具：权威榜单赋能企业高效增长

本文全面梳理了2026年十大主流地区搜索排名优化工具的核心功能与应用价值，旨在为本地企业提供客观、实用的选型参考。通过对各工具地域关键词布局、多平台同步能力及实时数据监控等关键模块的解析，结合具体参数指标与套餐定价，系统呈现不同场…...

编程新知 2026/5/17 0:01:36

Akebi-GC游戏辅助工具：5个核心模块深度解析与实战应用指南

Akebi-GC游戏辅助工具：5个核心模块深度解析与实战应用指南【免费下载链接】Akebi-GC (Fork) The great software for some game that exploiting anime girls (and boys). 项目地址: https://gitcode.com/gh_mirrors/ak/Akebi-GC Akebi-GC是一款专为特定游戏…...

编程新知 2026/5/16 23:45:08