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

CSS - CSS One-Line

news 来源：原创 2025/7/18 13:52:33

1. aspect-ratio

描述: 用于定义元素的宽高比，简化了以往使用“填充黑客”的方法。只需指定一个比率，浏览器会自动调整元素的尺寸

案例:

.aspect-ratio-hd {aspect-ratio: 16/9; 
}
.aspect-ratio-square {aspect-ratio: 1; /* 正方形 */
}

2. object-fit

描述: 控制替换元素（如图像）的内容如何适应其容器，常用值包括 cover 和 scale-down

案例:

.image {object-fit: cover; /* 图像覆盖容器 */aspect-ratio: 1; /* 可选：约束图像大小 */max-block-size: 250px; /* 最大高度 */
}

3. margin-inline

描述: 用于设置元素的左右边距，简化了以往的 margin-left 和 margin-right 设置

案例:

.container {margin-inline: auto; /* 水平居中 */
}

4. text-underline-offset

描述: 控制文本基线与下划线之间的距离，改善可读性

案例:

a:not([class]) {text-underline-offset: 0.25em; /* 下划线偏移量 */
}

5. outline-offset

描述: 设置轮廓与元素之间的距离，提升焦点可见性

案例:

.outline-offset {outline: 2px dashed blue; /* 蓝色虚线轮廓 */outline-offset: .5em; /* 偏移量 */
}

6. scroll-margin-top/bottom

描述: 在滚动到锚点时增加偏移量，避免导航条覆盖内容

案例:

[id] {scroll-margin-top: 2rem; /* 向上增加空间 */
}

7. color-scheme

描述: 定义浏览器 UI 元素（如表单控件和滚动条）的颜色方案，以适应深色或浅色主题

案例:

:root {color-scheme: dark light; /* 优先使用深色主题 */
}

8. accent-color

描述: 修改复选框和单选按钮等表单控件的颜色，提高主题管理能力

案例:

:root {accent-color: mediumvioletred; /* 自定义控件颜色 */
}

9. width: fit-content

描述: 自动调整元素宽度以适应内容，类似于 inline-block

案例:

.fit-content {width: fit-content; /* 根据内容调整宽度 */
}

10. overscroll-behavior

描述: 控制滚动区域的行为，防止滚动超出边界影响父页面

案例:

.sidebar, .article {overscroll-behavior: contain; /* 限制滚动行为 */
}

11. text-wrap

描述: 改善文本排版，防止孤立词和不平衡行

案例（平衡文本）:

:is(h1, h2, h3, h4, .text-balance) {text-wrap: balance; /* 平衡文本行 */max-inline-size: 25ch;
}

12. scrollbar-gutter

描述: 为滚动条预留空间，避免因滚动条出现或消失而导致布局偏移

案例:

.container {scrollbar-gutter: stable; /* 保持滚动条空间 */
}

CSS - CSS One-Line

1. aspect-ratio 描述: 用于定义元素的宽高比，简化了以往使用“填充黑客”的方法。只需指定一个比率，浏览器会自动调整元素的尺寸案例: .aspect-ratio-hd {aspect-ratio: 16/9; } .aspect-ratio-square {aspect-ratio: 1; /* 正方形 */ }2. object-…...

编程日记 2025/7/18 13:52:33

【AIGC】如何准确引导ChatGPT，实现精细化GPTs指令生成

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | 提示词Prompt应用实例文章目录 💯前言💯准确引导ChatGPT创建爆款小红书文案GPTs指令案例💯 高效开发GPTs应用的核心原则明确应用场景和目标受众构建多样化风格模板提问与引…...

编程日记 2025/7/14 15:24:53

Redis主从架构

Redis（Remote Dictionary Server）是一个开源的、高性能的键值对存储系统，广泛应用于缓存、消息队列、实时分析等场景。为了提高系统的可用性、可靠性和读写性能，Redis提供了主从复制（Master-Slave Replication&#xf…...

编程日记 2025/7/18 13:48:23

无人机探测：光电侦测核心技术算法详解！

核心技术双光谱探测跟踪： 可见光成像技术：利用无人机表面反射的自然光或主动光源照射下的反射光，通过高灵敏度相机捕捉图像。该技术适用于日间晴朗天气下的无人机探测，具有直观、易于识别目标的特点。红外成像技术&#xff1…...

编程日记 2025/7/18 13:51:37

34 基于单片机的指纹打卡系统

目录一、主要功能二、硬件资源三、程序编程四、实现现象一、主要功能基于STC89C52RC，采用两个按键替代指纹，一个按键按下，LCD12864显示比对成功，则采用ULN2003驱动步进电机转动，表示开门，另一个…...

编程日记 2025/7/8 13:23:23

Day 26

进入贪心算法基础理论 1、什么是贪心？ 贪心的本质是选择每一阶段的局部最优，从而达到全局最优。 Eg：一堆钞票，你可以拿走 10 张，想达到最大金额，要怎么拿？ –》指定每一次拿最大的&#xff0…...

编程日记 2025/7/13 19:12:18

11.25c++继承、多态

练习： 编写一个武器类 class Weapon{int atk; }编写3个武器派生类：短剑，斧头，长剑 class knife{int spd; }class axe{int hp; }class sword{int def; }编写一个英雄类 class Hero{int atk;int def;int spd;int hp; public:所有的…...

编程日记 2025/7/18 1:11:41

ThinkPad t61p 作SMB服务器，打印服务器，pc ,android ,ipad利用此服务器互传文件

1.在t61p上安装win7 2,配置好smb 服务 3.再安装好打印驱动程序 4.pc与win7利用系统的网络互相发现,映射为硬盘使用。 5.android，ipad安装ES文件浏览器访问win7 共享文件夹，互传文件。 6.android手机安装FE文件浏览器，可以利用花生壳外网…...

编程日记 2025/7/14 21:24:43

数据结构单链表，顺序表，广义表，多重链表，堆栈的学习

单链表比如一个多项式，主要包括x的系数，x的指数，那么可以创建一个一维数组来存储它的系数和指数，用数组下标来表示。它的系数可以用数组下标对应的数组元素来储存。可是这样储存会浪费空间所以采用单链表形式来存储。即创建一…...

编程日记 2025/7/13 8:06:59

uniapp内嵌的webview H5与应用通信

H5端： 1、找到index.html引入依赖 <script type"text/javascript" src"https://unpkg.com/dcloudio/uni-webview-js0.0.3/index.js"></script> 2、在需要通讯处发送消息 uni.postMessage({data:{code:200,msg:"处理完成&q…...

编程日记 2025/7/18 4:48:17

黄仁勋：人形机器人在内，仅有三种机器人有望实现大规模生产

11月23日，芯片巨头、AI时代“卖铲人”和最大受益者、全球市值最高【英伟达】创始人兼CEO黄仁勋在香港科技大学被授予工程学荣誉博士学位；并与香港科技大学校董会主席沈向洋展开深刻对话，涉及人工智能（AI）、计算力、领导…...

编程日记 2025/7/14 15:26:55

Docker--harbor私有仓库部署与管理

目录一、Harbor 简介 1.1 什么是Harbor 1.2 Harbor的特性 1.3 Harbor的构成二、Harbor 部署 2.1 部署 Docker-Compose 服务 2.2 部署 Harbor 服务 （1）下载或上传 Harbor 安装程序 （2）修改harbor安装的配置文件 2.3 启…...

编程日记 2025/7/15 1:21:41

35 基于单片机的精确电压表DA-AD转换

目录一、主要功能二、硬件资源三、程序编程四、实现现象一、主要功能基于51单片机，采用DAC0832和ADC0832检测电压，0到8.5V，设计复位电路 LED管显示实际稳压值，初始电压0 二、硬件资源基于KEIL5编写C代码&#xff0c…...

编程日记 2025/7/2 5:03:56

Windows系统下安装Triton 3.0.0预编译Triton 2.1.0

Triton是一个用于编写高效自定义深度学习原语的语言和编译器。它旨在提供一个开源环境，使得编写代码的速度比CUDA更快，同时比其他现有的DSLs（领域特定语言）更灵活。在开始安装之前，请确保您的系统满足以下要求&#x…...

编程日记 2025/7/13 11:36:25

Easyexcel（7-自定义样式）

相关文章链接 Easyexcel（1-注解使用）Easyexcel（2-文件读取）Easyexcel（3-文件导出）Easyexcel（4-模板文件）Easyexcel（5-自定义列宽）Easyexcel（6-单…...

编程日记 2025/7/15 12:53:58

ubuntu搭建k8s环境详细教程

在Ubuntu上搭建Kubernetes（K8s）环境可以通过多种方式实现，下面是一个详细的教程，使用kubeadm工具来搭建Kubernetes集群。这个教程将涵盖从准备工作到安装和配置Kubernetes的所有步骤。环境准备操作系统：确保你使用的…...

编程日记 2025/7/16 1:38:14

spark 写入mysql 中文数据显示?? 或者乱码

目录前言 Spark报错： 解决办法： 总结一下： 报错： 解决： 前言用spark写入mysql中，查看中文数据显示?? 或者乱码 Spark报错： Sat Nov 23 19:15:59 CST 2024 WARN: Establishing SSL…...

编程日记 2025/7/16 1:38:50

Python中的简单爬虫

文章目录一. 基于FastAPI之Web站点开发1. 基于FastAPI搭建Web服务器2. Web服务器和浏览器的通讯流程3. 浏览器访问Web服务器的通讯流程4. 加载图片资源代码二. 基于Web请求的FastAPI通用配置1. 目前Web服务器存在问题2. 基于Web请求的FastAPI通用配置三. Python爬虫介绍1. 什…...

编程日记 2025/7/9 1:24:41

网络安全原理与技术思考题/简答题

作业1（第1章、第2章、第8章） 1. 网络安全的基本属性有哪些？简单解释每个基本属性的含义。网络安全的扩展属性包括哪些？ 基本属性： 1.机密性(Confidentiality)： 含义：确保信息不被未授权的用户…...

编程日记 2025/7/8 19:18:55

技术周刊｜前端真的凉了吗？2024 前端趋势解读

大家好，我是童欧巴。见字如面，万事胜意。小雪已过，大家勿忘添衣御寒，欢迎来到第 135 期周刊。大厨推荐 2024 前端趋势 The Software House 公司发布的前端状态调查报告，本版是迄今为止最全面的调查，共…...

编程日记 2025/7/15 16:17:31

Qt常用控件之按钮类控件

目录 QPushButton 添加图标添加快捷键 QRadioButton 关于toggled 模拟点餐功能 QCheckBox 刚刚 QWidget 中涉及到的各种属性/函数/使用方法，针对接下来要介绍的 Qt 的各种控件都是有效的，因为各种控件都是继承自 QWidget 的接下来本篇博客就学…...

编程日记 2025/7/17 9:05:03

Wonder3D本地部署到算家云搭建详细教程

Wonder3D简介 Wonder3D仅需2至3分钟即可从单视图图像中重建出高度详细的纹理网格。Wonder3D首先通过跨域扩散模型生成一致的多视图法线图与相应的彩色图像，然后利用一种新颖的法线融合方法实现快速且高质量的重建。本文详细介绍了在算家云搭建Wonder3D的流程以及…...

编程日记 2025/7/15 1:32:43

景联文科技：高质量数据采集标注服务引领AI革新

在当今这个数字化时代，数据已经成为推动社会进步和产业升级的关键资源。特别是在人工智能领域，高质量的数据是训练出高效、精准的AI模型的基础。景联文科技是一家专业的数据采集与标注公司，致力于为客户提供高质量的数据处理服务，…...

编程日记 2025/7/13 5:31:56

企业面试真题----阿里巴巴

1.HashMap为什么不是线程安全的？ 首先hashmap就是为单线程设计的，并不适合于多线程环境，而hashmap的线程不安全原因主主要是以下两个原因： 死循环死循环问题发生在jdk1.8之前（不包含1.8），造…...

编程日记 2025/7/15 23:43:12

极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【四】

GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版，专门为中国程序员服务。可以一键式部署极狐GitLab。学习极狐GitLab 的相关资料： 极狐GitLab 官网极狐…...

编程日记 2025/7/14 20:29:16

【C++知识总结2】C++里面的小配角cout和cin

一、引入第一个关于输入输出的C代码 #include<iostream> // std是C标准库的命名空间名，C将标准库的定义实现都放到这个命名空间中 using namespace std; int main() {cout<<"Hello world!!!"<<endl;return 0; } 1. 使用cout标准输出…...

编程日记 2025/7/16 14:14:56

门控循环单元（GRU）与时间序列预测应用

一、GRU简介门控循环单元（Gated Recurrent Unit，简称GRU）是一种简化版的LSTM（长短期记忆网络），专门用于解决长序列中的梯度消失问题。与LSTM相比，GRU具有更简单的结构和较少的参数&#xff0c…...

编程日记 2025/7/15 6:45:54

Spring Boot 3 集成 Spring Security（2）授权

文章目录授权配置 SecurityFilterChain基于注解的授权控制自定义权限决策在《Spring Boot 3 集成 Spring Security（1）》中，我们简单实现了 Spring Security 的认证功能，通过实现用户身份验证来确保系统的安全性。Spring Securit…...

编程日记 2025/7/15 3:12:04

互联网摸鱼日报(2024-11-22)

互联网摸鱼日报(2024-11-22) 36氪新闻学习马斯克不丢人，脸书也开始改造自己了旅游行业趋势变了，增长还能从哪里寻找？ 大厂入局后，小型小游戏团队能否继续喝一口汤？ 一拥而上的“跨界咖啡”，是“走心”…...

编程日记 2025/7/15 19:06:13

RNN并行化——《Were RNNs All We Needed?》论文解读

InfoPaperhttps://arxiv.org/abs/2410.01201GitHubhttps://github.com/lucidrains/minGRU-pytorch个人博客地址http://myhz0606.com/article/mini_rnn 最近在看并行RNN相关的paper，发现很多都利用了Parallel Scanning算法。本文将从Parallel Scanning算法开始&…...

编程日记 2025/7/14 4:41:37

机器学习周志华学习笔记-第6章＜支持向量机＞

机器学习周志华学习笔记-第6章<支持向量机> 卷王，请看目录 6支持向量机6.1 函数间隔与几何间隔6.1.1 函数间隔6.1.2 几何间隔 6.2 最大间隔与支持向量6.3 对偶问题6.4 核函数6.5 软间隔支持向量机6.6 支持向量机6.7核方法 6支持向量机支持向量机是一种经典…...

编程日记 2025/7/16 21:51:03

IP反向追踪技术，了解一下？

DOSS（拒绝服务）攻击是现在比较常见的网络攻击手段。想象一下，有某个恶意分子想要搞垮某个网站，他就会使用DOSS攻击。这种攻击常常使用的方式是IP欺骗。他会伪装成正常的IP地址，让网络服务器以为有很多平常的请求&#…...

编程日记 2025/7/12 12:05:00

2025蓝桥杯（单片机）备赛--扩展外设之UART1的原理与应用（十二）

一、串口1的实现原理 a.查看STC15F2K60S2数据手册: 串口一在590页，此款单片机有两个串口。串口1相关寄存器： SCON:串行控制寄存器（可位寻址） SCON寄存器说明： 需要PCON寄存器的SMOD0/PCON.6为0，使SM0和SM…...

编程日记 2025/7/17 13:36:27

Linux 使用gdb调试core文件

core文件和gdb调试什么是 core 文件？产生core文件的原因？core 文件的控制和生成路径gdb 调试core 文件引用和拓展什么是 core 文件？ 当程序运行过程中出现Segmentation fault (core dumped)错误时，程序停止运行，并产…...

编程日记 2025/7/12 2:13:30

Python后端flask框架接收zip压缩包方法

一、用base64编码发送，以及接收 import base64 import io import zipfile from flask import request, jsonifydef unzip_and_find_png(zip_data):# 使用 BytesIO 在内存中处理 zip 数据with zipfile.ZipFile(io.BytesIO(zip_data), r) as zip_ref:extracted_paths…...

编程日记 2025/7/17 12:03:34

【21-30期】Java技术深度剖析：从分库分表到微服务的核心问题解析

🚀 作者 ：“码上有前” 🚀 文章简介 ：Java 🚀 欢迎小伙伴们点赞👍、收藏⭐、留言💬 文章题目：Java技术深度剖析：从分库分表到微服务的核心问题解析摘要： 本…...

编程日记 2025/7/15 9:08:24

Linux 中 find 命令使用详解

目录一：基本语法二：搜索路径1、限制递归层级2、排除指定路径三：匹配条件1、按照文件名搜索2、按文件类型搜索3、按文件大小搜索4、按文件权限搜索5、按文件所有者或所属组搜索6、按文件修改时间搜索四：执行操作1、输出满足条件…...

编程日记 2025/7/14 13:04:52

云服务器部署WebSocket项目

WebSocket是一种在单个TCP连接上进行全双工通信的协议，其设计的目的是在Web浏览器和Web服务器之间进行实时通信（实时Web） WebSocket协议的优点包括： 1. 更高效的网络利用率：与HTTP相比，WebSocket的握手只…...

编程日记 2025/7/17 5:33:05

林业产品智能推荐引擎：Spring Boot篇

1 绪论 1.1 选题背景网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。计算机软件可以针对不同行业的营业特点以及管理需求，设置不同的功能&…...

编程日记 2025/7/14 5:05:04

【C++】LeetCode：LCR 077. 排序链表

题干 LCR 077. 排序链表给定链表的头结点 head ，请将其按升序排列并返回排序后的链表。解法：归并排序 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(null…...

编程日记 2025/7/14 23:28:34

git教程

文章目录简介：使用教程：（1）安装git：（2）设置用户名和邮箱作为标识符：（3）建立本地仓库：本地仓库作用：（1）将文件…...

编程日记 2025/7/17 10:51:12

报表工具功能对比：免费易上手的山海鲸报表 vs 庞大用户群体的Tableau

在数据报表与分析领域，随着大数据技术的不断发展和企业数字化转型的深入，市面上涌现出了众多报表工具，为用户提供多元化的选择。对于企业数据分析师、IT人员及管理层来说，选择一款适合自己的报表工具至关重要。本文将从多个角度对…...

编程日记 2025/7/18 10:58:31

鸿蒙原生应用开发及部署：首选华为云，开启HarmonyOS NEXT App新纪元

目录前言 HarmonyOS NEXT：下一代操作系统的愿景 1、核心特性和优势 2、如何推动应用生态的发展 3、对开发者和用户的影响华为云服务在鸿蒙原生应用开发中的作用 1、华为云ECS C系列实例 （1）全维度性能升级 （2&#xff…...

编程日记 2025/7/13 5:04:50

CSS之3D转换

三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴:水平向右注意:x右边是正值，左边是负值 y轴:垂直向下注意:y下面是正值，上面是负值 z轴:垂直屏幕注意:往外面是正值，往里面是负值 3D移动 translat…...

编程日记 2025/7/16 8:32:29

uni-app初学笔记：文件路径与作用

components:可复用的组件pages:页面（可见/不可见）static:静态资源，存放图片视频等 （相当于vue项目的 assets）mainjs:Vue初始化入口文件App.vue:应用配置，用来配置App全局样式以及监听pages.json :配置页面路…...

编程日记 2025/7/15 14:30:24

子组件中$emit和update更新传递变量

vue2.6之后才可以使用update更新，vue2.6以下版本使用input和v-model 需求描述：蒙层上展示弹窗，弹窗点击关闭，需要向父传递关闭的信息方法1，简便直接传递变量visible（或者不改名isModalVisible也是可以的…...

编程日记 2025/7/17 20:41:55

浅谈Python库之lxml

一、基本介绍 lxml 是一个用 Python 编写的库，它提供了对 XML 和 HTML 文档的解析和操作功能。它使用 C 语言编写的 libxml2 和 libxslt 库作为后端，因此解析速度非常快，并且能够处理大型文档。lxml 支持 XPath 和 XSLT，这使得它在…...

编程日记 2025/7/16 6:06:20

spring boot框架漏洞复现

spring - java开源框架有五种 Spring MVC、SpringBoot、SpringFramework、SpringSecurity、SpringCloud spring boot版本版本1：直接就在根下 / 版本2：根下的必须目录 /actuator/ 端口：9093 spring boot搭建 1：直接下载源码打包 2：运行编译好的jar包：actuator-testb…...

编程日记 2025/7/13 12:54:51

IDEA插件CamelCase,快速转变命名格式

在IDEA上大小写转换的快捷键是 CtrlshitU 其它的格式转换的快捷键是 shitaltu 安装方法： file-settings-plugins-在marketplace搜索“CamelCase”-点击安装。安装成功设置后，重新打开idea 下载完成后点击 Apply 和OK 此刻就可以选中命名并使用快捷…...

编程日记 2025/7/15 23:28:01

Elasticsearch中的节点（比如共20个），其中的10个选了一个master，另外10个选了另一个master，怎么办？

大家好，我是锋哥。今天分享关于【Elasticsearch中的节点（比如共20个），其中的10个选了一个master，另外10个选了另一个master，怎么办？】面试题。希望对大家有帮助； Elasticsearch中的节…...

编程日记 2025/7/15 23:53:17