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

CSS：背景样式、盒子模型与文本样式

news 来源：原创 2025/5/8 23:58:56

背景样式

背景样式用于设置网页元素的背景，包括颜色、图片等。

背景颜色

使用 background-color 属性设置背景颜色，支持多种格式（颜色英文、十六进制、RGB等）。

div {background-color: lightblue;
}

格式	示例
十六进制	`#ff5733`
RGB	`rgb(255, 87, 51)`
颜色英文	`lightblue`

背景图片

通过 background-image 属性为元素添加背景图片。

div {background-image: url('background.jpg');background-repeat: no-repeat;background-size: cover;
}

属性	描述
`background-repeat`	控制图片是否重复
`background-size`	设置图片尺寸（`cover`, `contain`, 或具体数值）
`background-position`	设置图片的位置（`center`, `top`, 等）

多重背景

使用逗号分隔多个背景值，为元素添加多层背景。

div {background-image: url('layer1.png'), url('layer2.png');background-size: contain, cover;
}

盒子模型

CSS 的盒子模型是网页布局的核心，它描述了每个元素由哪些部分组成。

盒子模型结构

部分	描述
内容（Content）	元素的实际内容区域
内边距（Padding）	内容与边框之间的间距
边框（Border）	围绕内边距和内容的边线
外边距（Margin）	元素与其他元素之间的距离

设置盒子模型属性

div {width: 200px;height: 100px;padding: 10px;border: 2px solid black;margin: 20px;
}

属性	描述
`padding`	设置内边距，可以分别指定上下左右的值
`border`	定义边框的宽度、样式和颜色
`margin`	设置外边距，可使用 `auto` 实现居中对齐

盒子模型类型

标准盒模型：width 和 height 只包括内容区域。
替代盒模型：通过 box-sizing: border-box，width 和 height 包括内容、内边距和边框。

div {box-sizing: border-box;
}

文本样式

文本样式定义了文字的外观和排列方式。

字体样式

属性	描述
`font-family`	设置字体族，如 `Arial`, `serif` 等
`font-size`	设置字体大小（单位：`px`, `%`, `em` 等）
`font-style`	设置字体样式（`normal`, `italic`, `oblique`）
`font-weight`	设置字体粗细（`normal`, `bold`, 或数值 100-900）

p {font-family: Arial, sans-serif;font-size: 16px;font-style: italic;font-weight: bold;
}

文本对齐与修饰

属性	描述
`text-align`	对齐方式（`left`, `right`, `center`, `justify`）
`text-decoration`	设置文字装饰（`none`, `underline`, `line-through`）
`line-height`	设置行高，调整行间距
`letter-spacing`	设置字母间距
`word-spacing`	设置单词间距

p {text-align: justify;text-decoration: underline;line-height: 1.5;letter-spacing: 2px;
}

文本阴影

text-shadow 属性用于为文字添加阴影效果。

h1 {text-shadow: 2px 2px 4px gray;
}

属性	描述
偏移值（x, y）	控制阴影在水平方向和垂直方向的偏移
模糊半径	控制阴影的模糊程度
阴影颜色	设置阴影的颜色

凡是过去，皆为序章；凡是未来，皆有可期。

CSS：背景样式、盒子模型与文本样式

背景样式背景样式用于设置网页元素的背景，包括颜色、图片等。背景颜色使用 background-color 属性设置背景颜色，支持多种格式（颜色英文、十六进制、RGB等）。 div {background-color: lightblue; }格式示例十六进制#ff5733R…...

编程日记 2025/5/8 23:58:56

学英语学压测：02jmeter组件-测试计划和线程组ramp-up参数的作用

📢📢📢：先看关键单词，再看英文，最后看中文总结，再回头看一遍英文原文，效果更佳！！ 关键词 Functional Testing功能测试[ˈfʌŋkʃənəl ˈtɛstɪŋ]Sample样…...

编程日记 2025/5/8 22:52:25

环动科技平均售价波动下滑：大客户依赖明显，应收账款周转率骤降

《港湾商业观察》施子夫 2024年12月18日，浙江环动机器人关节科技股份有限公司（以下简称，环动科技）的上市审核状态变更为“已问询”，公司在11月25日科创板IPO获上交所受理，独家保荐机构为广发证券。此次环…...

编程日记 2025/5/4 22:13:48

目录一、什么是LinkedList？ 二、LinkedList的模拟实现 1、display()方法 2、addFirst(int data)方法 3、addLast(int data)方法 4、addIndex(int index,int data)方法 5、contains(int key)方法 6、remove(int key)方法 7、removeAllKey(int key)方法 8、…...

编程日记 2025/5/8 19:46:05

『SQLite』解释执行（Explain）

摘要：本节主要讲解SQL的解释执行：Explain。在 sqlite 语句之前，可以使用 “EXPLAIN” 关键字或 “EXPLAIN QUERY PLAN” 短语，用于描述表查询的细节。基本语法 EXPLAIN 语法： EXPLAIN [SQLite Query]EXPLAIN QUER…...

编程日记 2025/5/8 22:37:52

计算机网络之---物理层的基本概念

物理层简介物理层（Physical Layer） 是 OSI（开放系统互联）模型中的第 1 层，它主要负责数据在物理媒介上的传输，确保原始比特（0 和 1）的传输不受干扰地从一个设备传送到另一个设备。…...

编程日记 2025/5/8 22:49:20

Elasticsearch：优化的标量量化 - 更好的二进制量化

作者：来自 Elastic Benjamin Trent 在这里，我们解释了 Elasticsearch 中的优化标量量化以及如何使用它来改进更好的二进制量化 (Better Binary Quantization - BBQ)。我们的全新改进版二进制量化 (Better Binary Quantization - BBQ) 索引现在变得更强大…...

编程日记 2025/5/3 9:19:14

KBQA前沿技术

文章目录 KBQA面临的挑战基于模板的方法基于语义解析的方法基于深度学习的传统问答基于深度学习的端到端问答模型KBQA面临的挑战目前还存在两个很大的困难阻碍着KBQA系统被广泛应用。一个困难是现有的自然语言理解技术在处理自然语言的歧义性和复杂性方面还显得比较薄弱。例如…...

编程日记 2025/5/8 23:57:10

patchwork++地面分割学习笔记

参考资料：古月居 - ROS机器人知识分享社区 https://zhuanlan.zhihu.com/p/644297447 patchwork算法一共包含四部分内容：提出了以下四个部分：RNR、RVPF、A-GLE 和 TGR。 1）基于 3D LiDAR 反射模型的反射噪声消除 (RNR)&#xff…...

编程日记 2025/5/8 22:58:03

OSPF浅析

一、预习： 1、介绍： 是一种基于接口的典型的链路状态路由协议，协议号89，把大型网络分隔为多个较小、可管理的单元：Area，管理距离110；OSPF基于IP，使用了LSAck包来保证包数据的可靠性&…...

编程日记 2025/5/8 23:48:09

批量写入数据到数据库，卡顿怎么解决

在批量写入数据到数据库时，遇到卡顿或性能瓶颈是比较常见的问题。以下是一些可能的解决方案和优化策略，帮助你提高批量写入的性能： ### 1. **批量大小优化** - **调整批量大小**：尝试调整批量写入的数据量，找到一个平衡点。过大或过小的批量大小都可能影响性能。通常，批…...

编程日记 2025/5/8 23:03:19

Residency 与 Internship 的区别及用法解析

Residency 与 Internship 的区别及用法解析在英文中，“residency” 和 “internship” 都与职业培训相关，但它们的使用场景和具体含义存在显著差异。本文将详细解析这两个词的区别，以及它们在不同语境下的应用。 Residency 的定义及使用场景…...

编程日记 2025/5/8 23:42:24

【数据结构-堆】力扣2530. 执行 K 次操作后的最大分数

给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。你的起始分数为 0 。在一步操作中： 选出一个满足 0 < i < nums.length 的下标 i ， 将你的分数增加 nums[i] ，并且将 nums[i] 替换为 ceil(nums[i] / 3) 。返回在恰好…...

编程日记 2025/5/8 23:54:38

基于生成式对抗网络（GAN）的前沿研究与应用

引言人工智能（AI）领域在过去几年中经历了快速的发展，尤其是深度学习的兴起带来了许多变革。其中，生成式对抗网络（Generative Adversarial Network, GAN）因其强大的生成能力成为了研究热点。自2014年Ian G…...

编程日记 2025/5/8 23:36:46

stm32 移植RTL8201F（正点原子例程为例）

最近在工作中需要使用RTL8201F，在网上找了很多帖子，没有找到合适的，自己翻资料移植了一个。模板工程使用的是正点原子的f407探索版的例程，原子使用的是LAN8720,需要把他的驱动修改成为我们自己用的RTL8201F。 1.将PHY_TYPE改成我…...

编程日记 2025/5/8 22:15:08

QT-TCP-server

为了实现高性能的TCP通讯，以下是一个基于Qt的示例，展示如何利用多个线程、非阻塞I/O、数据分块和自定义协议进行优化。该示例以TCP服务器和客户端的形式展示，能够承受高负载并实现快速数据传输。高性能TCP Server示例 #include <QTcpSe…...

编程日记 2025/5/8 22:32:15

第 24 章网络请求与远程资源

第 24 章网络请求与远程资源 24.1 XMLHttpRequest 对象所有现代浏览器都通过 XMLHttpRequest 构造函数原生支持 XHR 对象： let xhr new XMLHttpRequest()24.1.1 使用 XHR 使用 XHR 对象首先要调用 open()方法，这个方法接收 3 个参数：请…...

编程日记 2025/5/5 15:51:30

k8s dashboard离线部署步骤

确定k8s版本，以1.23为例。部署metrics-server服务，最好用v0.5.2。用v0.6.0，可能会报以下错误： nodekubemaster:~/Desktop/metric$ kubectl top nodes Error from server (ServiceUnavailable): the server is currently unabl…...

编程日记 2025/5/8 14:46:16

热备份路由HSRP及配置案例

✍作者：柒烨带你飞 💪格言：生活的情况越艰难，我越感到自己更坚强；我这个人走得很慢，但我从不后退。 📜系列专栏：网路安全入门系列目录一，HSRP的相关概念二，…...

编程日记 2025/5/4 23:03:17

【文本分类】bert二分类

import os import torch from torch.utils.data import DataLoader, Dataset from transformers import BertTokenizer, BertForSequenceClassification, AdamW from sklearn.metrics import accuracy_score, classification_report from tqdm import tqdm# 自定义数据集 class…...

编程日记 2025/5/5 2:44:38

计算机网络（30）多协议标签交换MPLS

前言多协议标签交换（Multi-Protocol Label Switching，MPLS）是一种在开放的通信网上利用标签引导数据高速、高效传输的新技术。一、基本概念 MPLS是一种第三代网络架构技术，旨在提供高速、可靠的IP骨干网络交换。它通过将IP地址映…...

编程日记 2025/5/8 23:33:43

【Springer斯普林格出版，Ei稳定，往届快速见刊检索】第四届电子信息工程、大数据与计算机技术国际学术会议（EIBDCT 2025）

第四届电子信息工程、大数据与计算机技术国际学术会议（EIBDCT 2025）将于2025年2月21-23日在中国青岛举行。该会议主要围绕电子信息工程、大数据、计算机技术等研究领域展开讨论。会议旨在为从事相关科研领域的专家学者、工程技术人员、技术研发人员提供一…...

编程日记 2025/5/8 23:08:51

C# 修改项目类型应用程序程序改类库

初级代码游戏的专栏介绍与文章目录-CSDN博客我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。这些代码大部分以Linux为目标但部分代码是纯C的，可以在任何平台上使用。源码指引：github源…...

编程日记 2025/5/1 2:42:40

[开源]自动化定位建图系统

系统状态机： 效果展示： 1、机器人建图定位系统-基础重定位，定位功能演示 2、机器人建图定位系统-增量地图构建，手动回环检测演示 3、… 开源链接： https://gitee.com/li-wenhao-lwh/lifelong-backend Qt人机交互…...

编程日记 2025/5/8 22:32:15

OSPF使能配置

OSPF路由协议是用于网际协议（ip）网络的链路状态的路由协议。该协议使用链路状态路由算法的内部网关协议（IGP），在单一自治系统（AS）内部工作。适用于IPV4的OSPFv2协议定义于RFC 2328，R…...

编程日记 2025/5/5 5:39:15

ES_如何设置ElasticSearch 8.0版本的匿名访问以及https_http模式的互相切换

总结： 设置匿名访问，只需要设置xpack.security.authc.anonymous.username和xpack.security.authc.anonymous.roles参数就行，设置好后，可以匿名访问也可以非匿名访问，但是非匿名访问的情况下必须保证用户名和密码正确取…...

编程日记 2025/5/8 11:16:40

web移动端UI框架

文章目录 Vant简介主要特点和功能适用场景和用户评价 Mint UI简介主要特点和功能 cube-ui简介特性 iView Weapp简介 uni-app简介 Vant 使用vue3版本官网：https://vant-ui.github.io/vant/#/zh-CN/ 适用vue2版本官网：https://vant-ui.github.io/vant/v2/…...

编程日记 2025/5/8 22:58:04

数据库高安全—角色权限：权限管理权限检查

目录 3.3 权限管理 3.4 权限检查书接上文数据库高安全—角色权限：角色创建角色管理，从角色创建和角色管理两方面对高斯数据库的角色权限进行了介绍，本篇将从权限管理和权限检查方面继续解读高斯数据库的角色权限。 3.3 权限管理 &#x…...

编程日记 2025/5/8 22:24:32

spring boot controller放到那一层

在 Spring Boot 应用程序中，Controller 层通常被放置在应用程序的表示层（Presentation Layer） 或用户界面层（UI Layer） 中。Controller 层的主要职责是处理用户的 HTTP 请求，并将请求转发给服务层进行业务…...

编程日记 2025/5/8 23:56:00

报错 - cannot import name ‘ExportOptions‘ from ‘torch.onnx._internal.exporter‘

调用库时出现错误： ImportError: cannot import name ‘ExportOptions’ from ‘torch.onnx._internal.exporter’ 尝试更新 onnx， onnxscript，diffusers 均没有解决问题将 torch 升级（从 2.1.0 到 2.5.1）后解决了具…...

编程日记 2025/5/8 17:03:15

恒压恒流原边反馈控制芯片 CRE6289F

CRE6289F 系列产品是一款内置高压 MOS 功率开关管的高性能多模式原边控制的开关电源芯片。较少的外围元器件、较低的系统成本设计出高性能的交直流转换开关电源。CRE6289F 系列产品提供了极为全面和性能优异的智能化保护功能，包括逐周期过流保护、软启动、芯片过温保…...

编程日记 2025/5/8 23:23:45

ffmpeg视频抽帧和合成

FFMPEG 抽取视频场景转换帧 ffmpeg -i input.mp4 -vf "selectgt(scene,0.4),showinfo" -vsync vfr output_%04d.jpg ffmpeg -i input.mp4 -vf "selectgt(scene,0.4),scale1280:720" -vsync vfr output_%03d.jpg # -vsync 已经弃用，最新版本不…...

编程日记 2025/5/5 7:23:05

七、Hadoop环境搭建之安装JDK

文章目录一、卸载自带JDK二、传输jdk到服务器中三、解压四、配置JDK环境变量一、卸载自带JDK 注意：安装JDK前，一定确保提前删除了虚拟机自带的JDK。以下操作，请切换至root权限进行操作输入：rpm -qa | grep jdk 会查询出系统…...

编程日记 2025/5/8 23:15:00

RocketMQ消息积压问题如何解决?

大家好，我是锋哥。今天分享关于【RocketMQ消息积压问题如何解决?】面试题。希望对大家有帮助； RocketMQ消息积压问题如何解决? 1000道互联网大厂Java工程师精选面试题-Java资源分享网 RocketMQ 消息积压问题通常是指消息队列中的消息堆积过多&…...

编程日记 2025/5/6 5:45:33

【Java基础】进程与线程的关系、Tread类；讲解基本线程安全、网络编程内容；JSON序列化与反序列化

1. 进程和线程 1.1 进程几乎所有的操作系统都支持进程的概念，所有运行中的任务通常对应一个进程（Process）。当一个程序进入内存运行时，即变成一个进程。进程是处于运行过程中的程序，并且具有一定的独立功能&…...

编程日记 2025/5/6 5:30:29

CDN防御如何保护我们的网络安全？

在当今数字化时代，网络安全成为了一个至关重要的议题。随着网络攻击的日益频繁和复杂化，企业和个人都面临着前所未有的安全威胁。内容分发网络（CDN）作为一种分布式网络架构，不仅能够提高网站的访问速度和用户体验&…...

编程日记 2025/5/6 7:56:37

深度学习驱动的蛋白质设计技术与实践

通过设计特定的蛋白质结构，可以实现预期的生物功能，如催化特定化学反应、识别和结合特定分子、调控生物信号传导等，为生物医学、药物研发、生物技术等领域提供重要工具和解决方案。传统的蛋白质设计方法主要依赖于已知蛋白质结构的同源建模、…...

编程日记 2025/5/8 23:56:00

Centos7使用yum工具出现 Could not resolve host: mirrorlist.centos.org

在 CentOS 7 中使用 yum 工具时，出现 "Could not resolve host: mirrorlist.centos.org" 的错误，一般情况是因为默认的镜像源无法访问。以下是一些常用的解决方法： 检查网络连接：首先使用 ping 命令测试网络连接是否…...

编程日记 2025/5/4 5:13:44

iOS - 原子操作

在 Objective-C 运行时中，原子操作主要通过以下几种方式实现： 1. 基本原子操作 // 原子操作的基本实现 #if __has_feature(c_atomic)#define OSAtomicIncrement32(p) __c11_atomic_add((_Atomic(int32_t) *)(p), 1, __ATOMIC_RELAXED) #define …...

编程日记 2025/5/8 22:34:57

PHP二维数组去除重复值

Date: 2025.01.07 20:45:01 author: lijianzhan PHP二维数组内根据ID或者名称去除重复值代码示例如下： // 假设 data数组如下 $data [[id > 1, name > Type A],[id > 2, name > Type B],[id > 1, name > Type A] // 重复项 ];// 去重方法 $dat…...

编程日记 2025/5/8 23:03:19

【Flink部署】-- 部署 flink 1.19.1 standalone 集群

目录 1、环境准备 2、部署步骤 2.1、下载 flink 二进制包 2.2、配置全局环境变量 2.3、验证 flink 版本 2.4、配置 config.yaml 2.5、启动和停止本地 standalone 集群 2.6、提交测试作业 2.7、查询作业 3、参考 1、环境准备 jdk 11apache flink 1.19.1 安装包2、部署…...

编程日记 2025/5/8 23:16:40

关于物联网的基础知识（二）——物联网体系结构分层

成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】今日分享关于物联网的基础知识（二&a…...

编程日记 2025/5/8 22:37:52

使用Paddledetection进行模型训练【Part2：数据准备+模型训练】

目录写在前面数据准备模型优化 1. 使用自定义数据 2. 加载预训练模型 3. 启动训练写在前面在目标检测算法产业落地过程中，常常会出现需要额外训练以满足实际使用的要求，项目迭代过程中也会出先需要修改类别的情况。本文档详细介绍如何使用Pa…...

编程日记 2025/5/3 21:36:27

使用最广泛的FastAPI项目结构推荐，命名规范等

使用最广泛的FastAPI项目结构推荐，命名规范等一、FastAPI项目结构如下：二、组件管理：使用依赖注入三、命名约定四、建议分层架构的设计五、文档和测试六、版本控制和持续集成七、环境和配置管理工具八、性能优化与权限安全一、FastAPI项目结…...

编程日记 2025/5/8 11:49:35

【JAVA】java中将一个list进行拆解重新组装

一、使用场景 1、当需要对一个list中的元素属性进行重新赋值，比如一个list中存储了订单数据，我们需要改变list中每个订单的id，然后再重新输出订单list if(CollectionUtils.isNotEmpty(orderList)){ orderList.forEach(p->{ …...

编程日记 2025/5/7 15:25:52

怎样修改el-table主题样式

起因：el-table有主题样式，部分需要单独设置环境：ideanodejs插件谷歌浏览器第一步：找到scss文件： 谷歌浏览器打开表格页面，ctrlshifti打开开发者工具，点击后鼠标移动到表格单元格上单击一下…...

编程日记 2025/5/7 17:15:06

【Docker项目实战】使用Docker部署gallery轻量级图片管理系统

【Docker项目实战】使用Docker部署gallery轻量级图片管理系统一、SFPG介绍1.1 应用简介1.2 主要特点1.3 主要使用场景二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、下载gallery…...

编程日记 2025/5/5 1:56:50

缓存-Redis-常见问题-缓存击穿-永不过期+逻辑过期（全面易理解）

缓存击穿（Cache Breakdown） 是在高并发场景下，当某个热点数据在缓存中失效或不存在时，瞬间大量请求同时击中数据库，导致数据库压力骤增甚至崩溃的现象。为了解决这一问题，“永不过期” “逻辑过期” 的策略…...

编程日记 2025/5/3 15:37:38

【0x006D】HCI_Write_LE_Host_Support命令详解

目录一、命令概述二、命令格式及参数说明 2.1. HCI_Write_LE_Host_Support命令格式 2.2. LE_Supported_Host 三、生成事件及参数 3.1. HCI_Command_Complete 事件 3.2. Status 四、命令执行流程 4.1. 命令发起阶段（主机端） 4.2. 命令处理阶段…...

编程日记 2025/5/8 14:17:41

尚硅谷· vue3+ts 知识点学习整理 |14h的课程（持续更ing）

vue3 主要内容核心：ref、reactive、computed、watch、生命周期常用：hooks、自定义ref、路由、pinia、miit 面试：组件通信、响应式相关api ----> 笔记：ts快速梳理；vue3快速上手.pdf 笔记及大纲如下&#xff…...

编程日记 2025/5/6 21:50:10