css 颗粒度

  1. 行内样式:样式全部写入行内。自由度最高,可定制化最强。但是不方便样式的复用,每次都要写完整的样式。
<div style="background-color: #ffffff; color: #333333;">我是一个div
</div>
  1. 原子化 CSS:每一个类名都代表了一个 css 属性。自由度依然很强,可定制化依然很高,也方便复用。但是大量的样式会造成大量的类名。
<div class="bg-white text-zinc-800">我是一个div</div>
  1. 传统形式:通过一个或几个具有语义化的 class 来描述一段 css 属性。封装性强,语义化强,自由度和可定制化性一般(比如 cart 就标记好了当前为一个卡片,通常边框、弧度、阴影、padding 也都一并规定好了)。但是大量的 html 需要取大量的语义化 class ,并且在 html 和 css 中需要来回的切换、查找。
<div class="container-box desc-container cart">我是一个div</div>
  1. 组件形式:在 组件库 中极为常见。封装性极强(不光封装了样式,也封装了功能),语义化强。但是自由度和可定制化性比较差。
<m-cart>我是一个div</m-cart>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS 多个输入框弹出键盘处理

开发中遇到这样一个场景&#xff0c;有多个输入框 而不同的输入框&#xff0c;需要页面向上偏移的距离不一样 这个时候&#xff0c;需要我们在获取到键盘弹出通知的时候&#xff0c;需要 知道我们开始进行编辑的是哪一个输入框&#xff0c;这个时候 需要我们知道一个技术点&…

如何与AI对话,写好Prompt

如何与AI对话&#xff0c;写好Prompt 在与人工智能的互动中&#xff0c;Prompt的作用就如同一把开启智慧之门的钥匙。你或许不知道&#xff0c;一个简单的指令就能引导AI为你创造出想要的结果。因此&#xff0c;理解Prompt的定义与重要性是你与AI对话的第一步。 Prompt的定义…

dolphinscheduler服务RPC框架源码解析(八)RPC提供者服务整合Spring框架实现

RPC提供者服务整合Spring框架实现 1.概述2.整合设计2.1.设计分析2.2.实现类关系设计3.整合实现3.1.WorkerServer启动3.2.WorkerRpcServer启动3.3.SpringServerMethodInvokerDiscovery类3.4.扫描注册RPC提供者的ServerMethodInvoker对象3.5.谁来执行扫描注册3.6. 注册ServerMeth…

GUI07-学工具栏,懂MVC

MVC模式&#xff0c;是天底下编写GUI程序最为经典、实效的一种软件架构模式。当一个人学完菜单栏、开始学习工具栏时&#xff0c;就是他的一生中&#xff0c;最适合开始认识 MVC 模式的好时机之一。这节将安排您学习&#xff1a; Model-View-Controller 模式如何创建工具栏以及…

spring实现发送邮件功能

获取邮箱授权码 打开POP3/SMTP服务 复制授权码 pom.xml导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId…

Vue+element 回车查询页面刷新

问题描述&#xff1a; form 表单出查询条件需要实现 input 输入完成后键盘回车查询&#xff1a;keyup.enter“handleQuery”&#xff0c;如果 form 里只有一个input&#xff0c;回车没有触发事件&#xff0c;而是刷新页面&#xff0c;放两个input就没问题 问题原因&#xff1…

如何编辑调试gradle,打印日志

在build.gradle.kts中输入 println("testxwg1 ") logger.lifecycle("testxwg2") logger.log(LogLevel.ERROR,"testxwg5") 点刷新就能看到打印日志了

基于Vue 3 简单自定义Table组件(乞丐版)

本技术文档介绍了如何使用 Vue 3 和 TypeScript 构建一个高度可定制的表格组件&#xff0c;并通过插槽支持自定义列内容。本文档将详细讲解表格组件的实现原理、结构、使用方法以及样式定制。 目录 组件概述组件结构使用案例 1. 组件概述 这个 Table 组件是一个高度可定制的…

jvm栈帧中的动态链接

“-Xss”这一名称并没有一个特定的“为什么”来解释其命名&#xff0c;它更多是JVM&#xff08;Java虚拟机&#xff09;配置参数中的一个约定俗成的标识。在JVM中&#xff0c;有多个配置参数用于调整和优化Java应用程序的性能&#xff0c;这些参数通常以一个短横线“-”开头&am…

怎么将pdf中的某一个提取出来?介绍几种提取PDF中页面的方法

怎么将pdf中的某一个提取出来&#xff1f;传统上&#xff0c;我们可能通过手动截取屏幕或使用PDF阅读器的复制功能来提取信息&#xff0c;但这种方法往往不够精确&#xff0c;且无法保留原文档的排版和格式。此外&#xff0c;很多时候我们需要提取的内容可能涉及多个页面、多个…

TCP常见问题

文章目录 一、两种状态图二、常见问题1、MSL是什么 3、为何等待2MSL3、为何三次握手&#xff0c;不握手、握手一次、两次行吗4、为何四次挥手&#xff0c;三次行吗&#xff0c;两次行吗 一、两种状态图 四次挥手 二、常见问题 1、MSL是什么 MSL是Maximum Segment Lifetime的英…

UG NX二次开发(C#)-机电概念设计-UIStyler中selection块选择信号等对象的过滤器设置

文章目录 1、前言2、创建机电概念设计的模型3、创建UIStyler4、在VS2022中创建NXOPEN CSHAP的工程5、设置信号与信号适配体的过滤器6、测试选择的对象1、前言 在UG NX二次开发过程中,经常会用到UIStyler中的Selection块,即是选择对象,选择对象由于其可以选择多种类型的对象…

线程知识总结(二)

本篇文章以线程同步的相关内容为主。线程的同步机制主要用来解决线程安全问题&#xff0c;主要方式有同步代码块、同步方法等。首先来了解何为线程安全问题。 1、线程安全问题 卖票示例&#xff0c;4 个窗口卖 100 张票&#xff1a; class Ticket implements Runnable {priv…

es 开启slowlog

在 Elasticsearch 中&#xff0c;slowlog&#xff08;慢日志&#xff09;是用来记录查询和索引操作的性能数据&#xff0c;帮助你诊断性能瓶颈。你可以为查询 (search slowlog) 和索引 (index slowlog) 配置慢日志。 数据准备 POST /products/_doc/1 {"product_name&quo…

前端yarn工具打包时网络连接问题排查与解决

最近线上前端打包时提示 “There appears to be trouble with your network connection”&#xff0c;以此文档记录下排查过程。 前端打包方式 docker启动临时容器打包&#xff0c;命令如下 docker run --rm -w /app -v pwd:/app alpine-node-common:v16.20-pro sh -c "…

基础数据结构---栈

顺序表实现 一、栈类的声明 栈是一种特殊的线性表&#xff0c;可以由顺序表来实现&#xff0c;也可以由链表来实现&#xff0c;这节课&#xff0c;我们采用顺序表来实现栈。 #include <iostream>#include <stdexcept>using namespace std;template<typename …

【YOLO 项目实战】(10)YOLO8 环境配置与推理检测

欢迎关注『youcans动手学模型』系列 本专栏内容和资源同步到 GitHub/youcans 【YOLO 项目实战】&#xff08;1&#xff09;YOLO5 环境配置与检测 【YOLO 项目实战】&#xff08;10&#xff09;YOLO8 环境配置与推理检测 【YOLO5 项目实战】&#xff08;10&#xff09;YOLO8 环境…

【蓝桥杯】43699-四平方和

四平方和 题目描述 四平方和定理&#xff0c;又称为拉格朗日定理&#xff1a; 每个正整数都可以表示为至多 4 个正整数的平方和。如果把 0 包括进去&#xff0c;就正好可以表示为 4 个数的平方和。 比如&#xff1a; 502021222 712121222; 对于一个给定的正整数&#xff0c;可…

基于语义的NLP任务去重:大语言模型应用与实践

引言 在自然语言处理&#xff08;NLP&#xff09;任务中&#xff0c;数据质量是模型性能的关键因素之一。重复或冗余的数据会导致模型过度拟合或浪费计算资源&#xff0c;特别是在大语言模型&#xff08;如 BERT、GPT 系列等&#xff09;训练和推理阶段。传统的基于字符匹配的…

【5G】5G 无线协议 Radio Protocols(一)

长期演进&#xff08;LTE&#xff09;无线电协议主要设计用于通过扁平架构提供PS服务&#xff0c;相比之前的代际&#xff0c;这代表了一个重大改进&#xff0c;它消除了支持电路交换&#xff08;CS&#xff09;服务和复杂架构中固有的复杂性。许多原始的LTE原则自第8版以来一直…