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

Python武器库开发-前端篇之CSS元素(三十二)

news 2026/4/19 17:52:27

前端篇之CSS元素(三十二)

CSS 元素是一个网页中的 HTML 元素，包括标签、类和 ID。它们可以通过 CSS 选择器选中并设置样式属性，以使网页呈现具有吸引力和良好的可读性。常见的 HTML 元素包括 div、p、h1、h2、span 等，它们可以使用 CSS 设置字体、颜色、背景、边框等样式属性，从而实现网页的美化。除了 HTML 标准元素，CSS 还支持自定义元素，可以使用伪元素来设置样式，实现更加灵活多样化的网页设计效果。

块元素

CSS 块元素是指在 HTML 中被定义为块级元素的标签（如 div、p、h1-h6 等），它们默认情况下会在页面上单独占据一行，并且可以设置宽度、高度、边距、填充以及背景等属性。这些元素会独占一行，并且可以设置其宽度、高度、内边距、外边距、边框等属性。块级元素总是从新行开始，它们可以包含内联元素和其他块级元素，而且可以控制它们的显示方式。它们的宽度默认为父元素的 100%，所以我们可以使用 CSS 设置块级元素的宽度和高度，并且可以使用 margin 和 padding 实现元素间的距离和内部空间的调整。

常见的块元素包括：

  • <div>：用于划分页面区块的通用容器。

  • <h1>-<h6>：用于表示标题的文本标签。

  • <p>：用于表示段落文本的标签。

  • <ul> 和 <ol>：用于表示无序列表和有序列表的标签。

  • <li>：用于表示列表项的标签。

  • <table>：用于表示表格的标签。

块元素可以设置 display 属性为 inline 或 inline-block，以改变其默认的块级展示方式。

以下是使用块元素的一个实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body{margin: 0;}div{background-color: aquamarine;width: 388px;}p{background-color: deeppink;/* width: 88px; */}</style>
<body><div>这是一个块元素的实列</div><div>这是一个块元素的实列<p>这是一个块元素的实列</p></div><p>biubiubiu</p></body>
</html>

浏览器最终的输出结果如下所示：

在这里插入图片描述

内联元素

CSS 内联元素是指在 HTML 中默认排列在同一行内的元素，如 <a>、<span>、<img>、<em>、<strong> 等标签。内联元素不会独占一行，而是在同一行内根据内容大小排列，并且只能容纳文本或其他内联元素。内联元素可以使用 CSS 属性 display: inline 显示为内联元素。

内联元素具有以下特点：

  1. 默认情况下不会强制换行，如果一行放不下，会自动换行。

  2. 宽度和高度只能由内容决定，无法设置固定的宽度和高度。

  3. margin 和 padding 在水平方向上起作用，但在垂直方向上不起作用。

  4. 可以设置 line-height 属性，用于控制行高。

通过 CSS 可以改变内联元素的字体、颜色、背景色等样式。使用 display 属性可以将内联元素转换为块级元素，或者将块级元素转换为内联元素。

常见的 CSS 内联元素有：

  • <a>：超链接

  • <span>：小段文字

  • <img>：图像

  • <em>：强调文本

  • <strong>：加重语气的文本

  • <input>：表单元素

  • <label>：表单标签

  • <button>：按钮元素

以下是使用内联元素的一个实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div{width: 500px;height: 300px;background-color: tomato;    }a{width: 666px;color:whitesmoke;margin-top: 88px;font-size: 50px;}    
</style>
<body><div><a href="">这是一个a标签</a><a href="">这是二个a标签</a></div></body>
</html>

浏览器最终的输出结果如下所示：

在这里插入图片描述

内联块元素

CSS 内联块元素指的是在 HTML 文档中以内联方式显示的块级元素。这些元素可以被视为是行内元素和块级元素的混合体，它们类似于块级元素，但是默认情况下不会产生换行，而是将所占用的空间合并在一起，因此可以看作是一组内联元素的集合。

常见的 CSS 内联块元素包括：

  1. <img>：显示图片

  2. <input>：输入框

  3. <button>：按钮

  4. <select>：下拉菜单

  5. <textarea>：文本输入框

  6. <label>：标签

  7. <iframe>：内嵌框架

  8. <audio>：音频播放器

  9. <video>：视频播放器

  10. <canvas>：画布元素

对于 CSS 内联块元素，可以通过 CSS 样式来设置它们的宽度、高度、边距、内边距等属性。此外，它们也可以使用 CSS 的浮动（float）属性来调整它们的位置。

以下是使用内联块元素的一个实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.con,.con2{width: 500px;height: 300px;background-color: tomato;border: 5px solid maroon;}.con a{background-color: blanchedalmond;height: 180px;width: 170px;margin-top: 30px;padding: 30px 20px;display: inline-block;}
</style>
<body><div class="con"><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a></div><div></div class="con2">
</body>
</html>

浏览器最终的输出结果如下所示：

在这里插入图片描述

相关文章：

Python武器库开发-前端篇之CSS元素(三十二)

前端篇之CSS元素(三十二) CSS 元素是一个网页中的 HTML 元素&#xff0c;包括标签、类和 ID。它们可以通过 CSS 选择器选中并设置样式属性&#xff0c;以使网页呈现具有吸引力和良好的可读性。常见的 HTML 元素包括 div、p、h1、h2、span 等&#xff0c;它们可以使用 CSS 设置…...

编程日记 2023/11/25 23:54:29

作为Java初学者，如何快速学好Java？

作为Java初学者&#xff0c;如何快速学好Java&#xff1f; 开始的一些话 对于初学者来说&#xff0c;编程的学习曲线可能相对陡峭。这是正常现象&#xff0c;不要感到沮丧。逐步学习&#xff0c;循序渐进。 编程是一门实践性的技能&#xff0c;多写代码是提高的唯一途径。尽量…...

编程日记 2023/11/25 23:53:28

LuatOS-SOC接口文档(air780E)--pwm - PWM模块

pwm.open(channel, period, pulse, pnum, precision) 开启指定的PWM通道 参数 传入值类型 解释 int PWM通道 int 频率, 1-1000000hz int 占空比 0-分频精度 int 输出周期 0为持续输出, 1为单次输出, 其他为指定脉冲数输出 int 分频精度, 100/256/1000, 默认为100,…...

编程日记 2023/11/25 23:52:27

基于51单片机的人体追踪可控的电风扇系统

**单片机设计介绍&#xff0c; 基于51单片机超声波测距汽车避障系统 文章目录 一 概要概述硬件组成工作原理优势应用场景总结 二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 基于51单片机的人体追踪可控的电风扇系统介绍 概述 该系统是基于51…...

编程日记 2023/11/25 23:51:26

使用数据集对SegFormer模型进行微调以改进自动驾驶车辆的车道检测-附源码下载

SegFormer：细分严重影响了高级驾驶辅助系统的开发。它在自动驾驶汽车技术的快速发展中发挥了关键作用。它由多个复杂的组件组成。对于任何在道路上行驶的车辆来说，车道检测至关重要。车道是道路上的标记，有助于区分道路上的可行驶区域和不可行驶区域。当前一代有多种车道检测…...

编程日记 2023/11/25 23:50:25

【微服务专题】SpringBoot自动配置简单源码解析

目录 前言阅读对象阅读导航前置知识什么是自动配置0.1 基本概念0.2 SpringBoot中的【约定大于配置】0.3 从SpringMVC看【约定大于配置】0.4 从Redis看【约定大于配置】0.5 小结 笔记正文一、EnableAutoConfiguration源码解析二、SpringBoot常用条件注解源码解析2.1 自定义条件注…...

编程日记 2023/11/25 23:49:24

分布式数据恢复-hbase+hive分布式存储误删除如何恢复数据？

hbasehive分布式存储数据恢复环境&#xff1a; 16台某品牌R730XD服务器节点&#xff0c;每台物理服务器节点上有数台虚拟机&#xff0c;虚拟机上配置的分布式&#xff0c;上层部署hbase数据库hive数据仓库。 hbasehive分布式存储故障&初检&#xff1a; 数据库文件被误删除…...

编程日记 2023/11/25 23:46:21

安卓系统修图软件（一）

平时我们会不时在朋友圈发自己的自拍照&#xff0c;或者是风景图等&#xff0c;许多小伙伴们此时会对照片进行一定的修理&#xff0c;比如添加滤镜等操作。在电脑上用ps修图比较繁琐&#xff0c;日常中大可不必用这把宰牛刀&#xff1b;而手机自带的编辑器&#xff0c;或者是QQ…...

编程日记 2023/11/25 23:45:20

截图转HTML代码，支持预览，前端不用浪费时间写html和css了

截图转代码 试用地址&#xff1a;https://picoapps.xyz/free-tools/screenshot-to-code 这个简单的应用可以将截图转换为HTML/Tailwind CSS代码。它使用GPT-4 Vision来生成代码&#xff0c;并使用DALL-E 3来生成类似的图像。现在你也可以输入一个URL来克隆一个现有的网站&#…...

编程日记 2023/11/25 23:44:19

Vite CSS Module 优雅的处理样式隔离

今天介绍的是我写的一个vite插件vite-plugin-oneof-css-module&#xff0c;该插件主要处理scss module&#xff0c;那它适用于什么场景呢&#xff1f; 1. 最大的特点就是使用scss module 可以不用写 .module.scss 了 2. 可以根据不同的文件夹或文件分别进行不同的处理&#x…...

编程日记 2023/11/25 23:43:19

基于Springboot+Vue选课系统

选课系统要求 (1)数据库表&#xff1a;教师信息表、学生信息表、课程表、选课表 其中&#xff0c;教师信息表、学生信息表和选课表的数据需要提前设置&#xff0c;本题主要操作课程表 (2) 技术架构&#xff1a; 后台使用springboot 前端使用vue-admin-template (3) 考试时间&…...

编程日记 2023/11/25 23:42:18

智能汽车十大网络安全攻击场景-《智能汽车网络安全权威指南》

引言 大家都很熟悉OWASP Top 10风险报告&#xff0c;这个报告不但总结了Web应用程序最可能、最常见、最危险的10大安全隐患&#xff0c;还包括了如何消除这些隐患的建议&#xff0c;这个“OWASP Top 10“差不多每隔三年更新一次。目前汽车网络安全攻击威胁隐患繁多&#xff0c…...

编程日记 2023/11/25 23:41:17

递归方法来计算二叉树的双分支节点个数

1.递归方法来计算二叉树的双分支节点个数 首先&#xff0c;你需要定义二叉树的节点结构&#xff0c;然后编写递归函数 #include <stdio.h> #include <stdlib.h>// 定义二叉树的节点结构 struct TreeNode {int value;struct TreeNode* left;struct TreeNode* righ…...

编程日记 2023/11/25 23:40:16

INFLOW：用于检测隐藏服务器的反向网络流水印

文章信息 论文题目&#xff1a;INFLOW: Inverse Network Flow Watermarking for Detecting Hidden Servers 期刊&#xff08;会议&#xff09;&#xff1a;IEEE INFOCOM 2018 - IEEE Conference on Computer Communications 时间&#xff1a;2018 级别&#xff1a;CCF A 文章链…...

编程日记 2023/11/25 23:38:15

社区物联网云服务架构设计

文章目录 1 摘要2 架构图2.1 社区物联网云服务网络拓扑图2.2 社区物联网云服务通讯流程图2.3 社区远程开锁功能流程图 3 应用场景 1 摘要 随着社区管理越来越智能化&#xff0c;社区物联网升级与改造的市场空间也越来越大。社区物联网包含楼宇对讲、门禁门锁、通道闸等等设备系…...

编程日记 2023/11/25 23:37:14

Linux - 文件系统 - 理解目录 - 理解 软/硬链接

前言 在上篇博客当中&#xff0c;我们对 文件系统 和 inode 做了初步了解&#xff0c;本博客将在上篇博客的基础之上&#xff0c;对于 文件系统当中的目录进行进步一阐述。 Linux - 进一步理解 文件系统 - inode - 机械硬盘-CSDN博客 目录 一个文件有一个 inode&#xff0c;…...

编程日记 2023/11/25 23:36:13

Springboot websocket前端无法访问到，Websocket因AOP代理 前端无法请求到

Springboot websocket前端无法访问到&#xff0c;Websocket因AOP代理 前端无法请求到 问题出现 在我后端springboot启动后&#xff0c;前端无法请求websocket请求连接到我们websocket服务器。 想要的效果 在我后端springboot启动后&#xff0c;前端可以请求到我们websocket…...

编程日记 2023/11/25 23:35:12

基于高质量训练数据，GPT-4 Turbo更出色更强大

11月7日消息&#xff0c;OpenAI在首届开发者大会上正式推出了GPT-4 Turbo。 与GPT-4相比&#xff0c;GPT-4 Turbo主要有6方面的提升&#xff1a; 1、扩展下文对话长度&#xff1a;GPT4最大只能支持8k的上下文长度&#xff08;约等于6000个单词&#xff09;&#xff0c;而GPT-4…...

编程日记 2023/11/25 23:34:10

jenkins + gitlab 自动部署(webhook)

Jenkins是一个流行的开源CI/CD工具&#xff0c;可以与Git等版本控制系统集成&#xff0c;实现自动构建、测试和部署。Webhook是一种机制&#xff0c;可以在Git仓库中设置&#xff0c;在代码提交或合并请求时触发Jenkins构建任务&#xff0c;以完成自动化部署。 实操 设备信息 …...

编程日记 2023/11/25 23:33:09

【数据集】全网最全的常见已公开医学影像数据集

目录 一&#xff0c;极市医学数据集汇总 1.CT 医学图像 ​编辑 2.恶性与良性皮肤癌 3.白内障数据集 4.胸部 X 光图像&#xff08;肺炎&#xff09; 5.用于图像增强的内窥镜真实合成曝光过度和曝光不足帧 6.医学家 7.乳房组织病理学图像 8.皮肤癌 MNIST&#xff1a;HA…...

编程日记 2023/11/25 23:31:07

Rust 枚举与模式匹配的高级用法

Rust 枚举与模式匹配的高级用法 Rust 的枚举&#xff08;Enum&#xff09;和模式匹配&#xff08;Pattern Matching&#xff09;是其强大类型系统的核心特性之一&#xff0c;不仅能够简洁地表达复杂的数据结构&#xff0c;还能通过模式匹配实现精准的逻辑控制。对于已经掌握基…...

编程新知 2026/4/19 17:17:11

别再瞎调了！Cartographer 2D建图参数保姆级调试指南（附室内实测避坑清单）

Cartographer 2D建图参数调试实战手册&#xff1a;从入门到精通的避坑指南 当第一次打开Cartographer的配置文件时&#xff0c;大多数开发者都会有种面对瑞士军刀却不知从何下手的困惑。这个由Google开源的SLAM算法以其强大的建图能力著称&#xff0c;但海量的参数配置也让不少…...

编程新知 2026/4/19 15:01:06

SystemVerilog task避坑指南：自动存储、时序控制和多返回值的最佳实践

SystemVerilog task避坑指南&#xff1a;自动存储、时序控制和多返回值的最佳实践 SystemVerilog中的task是硬件描述和验证工程师日常工作中不可或缺的工具。它不仅能封装复杂的行为逻辑&#xff0c;还能通过参数化、递归调用等特性大幅提升代码复用率。然而&#xff0c;在实际…...

编程新知 2026/4/19 13:46:22

用MATLAB手把手复现：EKF如何让导弹在三维空间里“看”得更准？（附完整代码与误差分析）

三维制导系统中的EKF实战&#xff1a;从MATLAB代码解析到误差优化 导弹在三维空间中的精确制导一直是航空航天领域的核心挑战。传统方法在面对复杂环境干扰时往往力不从心&#xff0c;而扩展卡尔曼滤波(EKF)技术则为这一难题提供了优雅的解决方案。本文将带您深入EKF在三维制导…...

编程新知 2026/4/19 13:03:45

java面试必问14：MySQL 索引类型：从基础到优化，面试官给你点赞

MySQL 索引类型&#xff1a;从基础到优化&#xff0c;一篇讲透面试官&#xff1a;“MySQL 有哪些索引类型&#xff1f;” 你&#xff1a;“主键索引、唯一索引、普通索引、复合索引、全文索引。索引能大大加快查询速度&#xff0c;但会降低增删改的性能。” 面试官&#xff1a;…...

编程新知 2026/4/19 12:49:15

从医院急诊到服务器宕机：泊松分布如何帮你预测那些‘随机’发生的麻烦事？

从医院急诊到服务器宕机&#xff1a;泊松分布如何帮你预测那些‘随机’发生的麻烦事&#xff1f; 凌晨三点的医院急诊室&#xff0c;值班医生刚处理完一个突发心梗患者&#xff0c;护士站的呼叫铃突然密集响起——三辆救护车同时抵达。同一时刻&#xff0c;某电商平台的服务器监…...

编程新知 2026/4/19 12:35:44

AT32F403A/STM32F103内部Flash读写避坑指南：从扇区擦除到数据校验的实战经验

AT32F403A/STM32F103内部Flash读写避坑指南&#xff1a;从扇区擦除到数据校验的实战经验 在嵌入式开发中&#xff0c;内部Flash的可靠读写往往是产品稳定性的关键所在。许多开发者按照基础教程完成功能后&#xff0c;却在量产阶段遭遇数据丢失、写入失败等棘手问题。本文将深入…...

编程新知 2026/4/19 12:27:34

Qwen2.5-7B-Instruct效果展示：复杂嵌套JSON Schema生成+字段类型校验

Qwen2.5-7B-Instruct效果展示&#xff1a;复杂嵌套JSON Schema生成字段类型校验 1. 模型能力概览 Qwen2.5-7B-Instruct是通义千问最新发布的7B参数规模指令调优模型&#xff0c;在结构化数据生成方面展现出卓越能力。本次展示聚焦其两大核心能力&#xff1a; 复杂嵌套JSON S…...

编程新知 2026/4/19 11:24:12

STM32 IAP升级避坑指南：Ymodem协议实战中那些容易忽略的细节（附代码）

STM32 IAP升级避坑指南&#xff1a;Ymodem协议实战中那些容易忽略的细节&#xff08;附代码&#xff09; 在嵌入式开发领域&#xff0c;IAP&#xff08;In-Application Programming&#xff09;技术为产品固件升级提供了极大便利&#xff0c;而Ymodem协议因其高效可靠的特点成为…...

编程新知 2026/4/19 11:05:27

从扫地机器人到AGV：拆解双轮差速模型在CoppeliaSim中的ROS实战配置

从扫地机器人到AGV&#xff1a;双轮差速模型在CoppeliaSim中的ROS实战指南 当你在电商平台下单的扫地机器人完成一次完美的弓字形路径清扫时&#xff0c;背后是一套精密的双轮差速控制系统在发挥作用。这种看似简单的运动机制&#xff0c;实际上支撑着从家用清洁设备到工业AGV的…...

编程新知 2026/4/19 10:47:01