CSS:背景样式、盒子模型与文本样式
背景样式
背景样式用于设置网页元素的背景,包括颜色、图片等。
背景颜色
使用 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…...
算法:线性查找
线性查找算法是一种简单的查找算法,用于在一个数组或列表中查找一个特定的元素。它从数组的第一个元素开始,逐个检查每个元素,直到找到所需的元素或搜索完整个数组。线性查找的时间复杂度为O(n),其中n是数组中的元素数量。 实现原理 从列表的第一个元素开始,逐个检查每个…...
【计算机网络】什么是网关(Gateway)?
网上冲浪多了,你可以听到过网关(Gateway)这个词,但是却不太清楚网关(Gateway)到底是干什么的、负责网络当中的什么任务,本篇文字将会为你介绍网关(Gateway)的作用&#x…...
20250106面试
rabbitmq如何保证消息不丢失 my: 持久化,包括消息持久化和队列持久化,重启不丢失。持久化到磁盘中的。 消息确认 死信队列:消费失败(业务异常/未确认,重试后,会放死信队列)&…...
Java 分布式锁:Redisson、Zookeeper、Spring 提供的 Redis 分布式锁封装详解
📚 Java 分布式锁:Redisson、Zookeeper、Spring 提供的 Redis 分布式锁封装详解 在分布式系统中,分布式锁 用于解决多个服务实例同时访问共享资源时的 数据一致性 问题。Java 生态中,有多种成熟的框架可以实现分布式锁࿰…...
智能汽车的数字钥匙安全
数字钥匙作为汽车智能化变革下的一项创新技术,利用蓝牙定位、NFC等近场通信技术进行钥匙与汽车的匹配继而开锁,可以让车主通过智能手机、可穿戴设备等解锁汽车,并对汽车实施相关的操作,提升用车便利性,受到越来越多车企…...
YangQG 面试题汇总
一、交叉链表 问题: 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。 解题思想: 双指针 备注:不是快慢指针,如果两个长度相…...
急速了解什么是GPU服务器
GPU服务器是一种专门配置了高性能图形处理器(GPU)的服务器,旨在提供高性能计算、深度学习、科学计算等多种场景的计算服务。与传统的CPU服务器相比,GPU服务器在处理并行密集型计算任务时具有显著优势。本文将详细介绍GPU服务器的定…...
用 Python 绘制可爱的招财猫
✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 招财猫,也被称为“幸运猫”,是一种象征财富和好运的吉祥物,经常…...
Linux 获取文本部分内容
Linux获取文本部分内容 前言场景获取前几行内容获取末尾几行内容获取中间内容head 命令 tail 命令 结合sed 命令awk 命令 前言 test.log 文本内容如下: (注意:内容 a1004和a1005之间有一空行) [rootgaussdb002 tmp]# cat test.…...
01-51单片机LED与独立按键
一、单片机概述 注意:个人学习笔记,里面涉及到的C语言和进程转换相关的知识在C语言部分已经写了,这里是默认都会的状态学习单片机。 1.什么是单片机 单片机,英文Micro Controller Unit,简称MCU。其内部集成了CPU、R…...
【微服务】SpringBoot 整合Redis实现延时任务处理使用详解
目录 一、前言 二、延迟任务的高频使用场景 三、延迟任务常用解决方案 3.1 Quartz 3.2 DelayQueue 3.2.1 Timer + TimerTask 3.2.2 ScheduledExecutorService 3.3 Redis sorted set 3.4 RabbitMQ 四、Redis实现延时队列操作实战 4.1 Redis Sorted Set 概述 4.1.1 Re…...
【Java项目】基于SpringBoot的【校园交友系统】
【Java项目】基于SpringBoot的【校园交友系统】 技术简介:系统软件架构选择B/S模式、SpringBoot框架、java技术和MySQL数据库等,总体功能模块运用自顶向下的分层思想。 系统简介:系统主要包括管理员和用户。 (a) 管理员的功能主要有首页、个人…...
Elasticsearch学习(1) : 简介、索引库操作、文档操作、RestAPI、RestClient操作
目录 1.elasticsearch简介1.1.了解es1.2.倒排索引正向索引和倒排索引 1.3.es的一些概念:文档和字段;索引和映射;Mysql与ES1.4.安装es、kibana部署单点es部署kibanaIK分词器安装IK分词器与测试扩展与停用词词典总结 部署es集群 2.索引库操作2.1.mapping映…...
ls指令详讲
🏝️专栏:https://blog.csdn.net/2301_81831423/category_12872319.html 🌅主页:猫咪-9527-CSDN博客 “欲穷千里目,更上一层楼。会当凌绝顶,一览众山小。” 目录 基本语法 常用选项详解 1. 基本选项 …...
【前端】【CSS3】基础入门知识
目录 如何学习CSS 1.1什么是CSS编辑 1.2发展史 1.三种导入方式 1.1、行内样式 1.2、外部样式 1.3、嵌入方式 2.选择器 2.1、基本选择器 (1)元素选择器 (2)类选择器 (3)id选择器:必…...
计算机网络之---RIP协议
RIP协议的作用 RIP (Routing Information Protocol) 协议是一个基于距离矢量的路由协议,它在网络中用来动态地交换路由信息。RIP 是最早的路由协议之一,通常用于小型和中型网络中。它的工作原理简单,易于实现,但在一些大型网络中效…...
【LeetCode Hot100 贪心算法】 买卖股票的最佳时机、跳跃游戏、划分字母区间
贪心算法 买卖股票的最佳时机买卖股票的最佳时机II跳跃游戏跳跃游戏II划分字母区间 买卖股票的最佳时机 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的…...
互联网架构变迁:从 TCP/IP “呼叫” 到 NDN “内容分发” 的逐浪之旅
本文将给出关于互联网架构演进的一个不同视角。回顾一下互联网的核心理论基础产生的背景: 左边是典型的集中控制通信网络,很容易被摧毁,而右边的网络则没有单点问题,换句话说它很难被全部摧毁,与此同时,分…...
git相关操作笔记
git相关操作笔记 1. git init git init 是一个 Git 命令,用于初始化一个新的 Git 仓库。执行该命令后,Git 会在当前目录创建一个 .git 子目录,这是 Git 用来存储所有版本控制信息的地方。 使用方法如下: (1ÿ…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
