!important > 行内样式 > id选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器、伪元素选择器

选择器权重相同时，后声明的样式会覆盖前面的样式 继承的样式不受优先级的影响，其权重值为0

CSS中的垂直水平居中有哪些方法

• Flex布局

  • 父元素设置display: flex;。
  • 水平居中：justify-content: center;。
  • 垂直居中：align-items: center;。

• 定位+transform

  • 子元素绝对定位：position: absolute; top: 50%; left: 50%;。
  • 使用transform: translate(-50%, -50%);进行偏移。

• Flex+auto

  • 父元素设置display: flex;。
  • 子元素设置margin: auto;，利用auto margin实现居中。

行内元素和块级元素分别有哪些

行内元素（Inline Elements）

行内元素不会在前后开始新的一行，并且只占自己所需宽度。它们通常用于包裹或者标记文本中的某些部分：

• <a>：定义超链接。
• <span>：无语义的容器标签，常用于应用样式或JavaScript操作。
• <strong> 和 <b>：加粗显示文本，前者带有强调含义，后者仅改变外观。
• <em> 和 <i>：斜体显示文本，前者用于强调，后者用于技术性或非语言目的。
• <img>：插入图像。
• <input>：创建交互控件以接受用户输入。
• <label>：为表单控件定义标注。
• <button>：可点击的按钮。
• <textarea>：多行文本输入框。
• <select>：下拉列表选择框。

块级元素（Block-Level Elements）

块级元素会在新行上开始，并且会尽可能地扩展其宽度来填充父容器的宽度。它们通常用于构建网站的结构：

• <div>：无语义的容器标签，常用于布局。
• <h1> 到 <h6>：标题标签，其中<h1>是最高级别的标题，重要性依次递减。
• <p>：定义段落。
• <form>：包含交互控件的表单。
• <header>：定义文档或节的页眉。
• <footer>：定义文档或节的页脚。
• <nav>：定义导航链接的部分。
• <article>：定义文章内容。
• <section>：定义文档中的节。
• <aside>：定义页面内容之外的内容，比如侧边栏。
• <table>：表格数据。
• <ul>, <ol>, <li>：无序列表、有序列表及其列表项。

CSS提供了display属性，允许你改变元素的默认显示类型。例如，使用display: inline;可以使块级元素表现得像行内元素，而使用display: block;可以让行内元素表现得像块级元素。

有了解过哪些样式实现方案，为什么AI产品都选择TailwindCSS作为样式方案

1. 原生css和css预处理器

css、less、sass

这是最直接的方式。开发者手动编写.css文件，并通过link标签引l入。

缺点 随着项目变大，很快就会面临命名冲突、代码冗余、缺乏逻辑组织、难以维护等问题，即：CSS 全局命名空间污染。

解决方案：

1. CSS预处理器（Sass/Less)：引I入了变量、嵌套、混入(Mixin)、继承等编程概念，增强了CSS 的组织性和可复用性，但并未从根本上解决命名和全局污染问题。
2. CSS命名规范（BEM)：通过严格的命名约定（如Block__Element--Modifier）来约束作用域，增强代码的可读性和可维护性。BEM是一个非常优秀的规范，但它依赖于开发者的自觉性，且类名会变得很长。

2. CSS in JS

Emotion、Styled-components（已停止维护）

核心思想： 将CSS样式直接写在JavaScript文件中，为每个组件生成唯一的、带哈希值的类名，从而实现“作用域化样式”，彻底解决了全局污染问题。

优点

1. 组件化：样式与组件逻辑内聚，方便复用和维护
2. 动态样式：可以方便地基于组件的props或state动态改变样式。

缺点：

1. 运行时开销：需要在运行时解析JS并生成CSS，带来一定的性能损耗。
2. 心智负担：在JS和CSS之间切换语法，并且需要学习特定库的API。

3. 原子化css

TailwindCSS、UnoCSS

这是一种与传统“语义化CSS”截然不同的思路，它提供了一系列高度可组合的、功能单一的“原子类”

核心思想： 不再为组件编写专门的CSS类，而是直接在HTML中组合这些原子类来构建样式。

优势：

1. 无需思考命名：从根本上消除了为 class 命名的烦恼。
2. 无需切换文件：样式和结构在一起，开发心流不被打断。
3. 极致的性能：通过PurgeCSS 等工具，在构建时扫描你的文件，只将用到的原子类打包到最终的CSS 文件中，体积通常只有几KB。
4. 约束与一致性：所有样式都来自预设的 design tokens（在tailwind.config.js中定义），保证了整个项目视觉上的一致性。

架构师视角下TailwindCSS的核心优势

从架构层面看，TailwindCSS解决的不仅仅是样式编写效率问题，更是大型、长期项目中CSS维护的根本性难题。

1. 约束即自由： 强制性的设计系统。在大型团队中，最大的敌人是“熵增”一一即系统的混乱度会随时间和人员的增加而不断提高。在CSS领域，这表现为颜色的滥用、间距的随意、字体的混乱。 架构优势：Tailwind通过其配置文件（tailwind.config·js或v4的插件配置）强制实现了一个代码化的设计系统（Design Systemas Code)。颜色、间距、字体等设计令牌（DesignTokens）被集中管理，开发者只能在这些受约束的选项内进行选择。这从根本上杜绝了“魔术数字”和个人偏好，保证了整个应用视觉层面的高度一致性和可预测性。

2. 杜绝CSS熵增： 可预测的样式维护。传统CSS最大的痛点是全局污染和样式覆盖。修改一个全局的.card类，你无法确定会影响到多少个不相关的页面，导致“牵一发而动全身”，最终没人敢删除旧代码，CSS文件无限膨胀。 架构优势：Tailwind将样式与HTML结构绑定，实现了真正的样式本地化。一个组件的样式完全内聚于其模板中。当你删除一个组件时，与之相关的所有样式定义（即HTML中的类名）也一并被移除了。重构和删除代码变得前所未有的安全，彻底解决了“CSS废代码”的累积问题。

3. 极致性能： 与项目规模解耦的最终产物。无论你的项目有10个组件还是1000个组件，最终生成的CSS文件大小只与你实际用到的原子类数量有关。 架构优势：这种按需生成机制确保了最终产物的体积始终保持在最小。对于需要极致加载性能的大型应用（如电商、在线文档）来说，这是一个决定性的优势。应用规模可以无限扩展，而CSS的性能开销几乎是恒定的。

4. 降低心智负担，提升团队速度 传统开发中，开发者需要花费大量时间在“BEM命名”、“文件组织结构”、“防止样式冲突”上。 架构优势：Tailwind提供了一套标准化的、通用的样式“语言”。新成员加入团队，无需学习项目内部复杂的CSS架构，只需了解Tailwind的语法即可快速上手。这极大地降低了团队的沟通成本和新成员的融入成本，让整个团队能更专注于业务逻辑的实现。

贡献者

pinkdopeybug

版权所有

版权归属：PinkDopeyBug

许可证：署名 4.0 国际 (CC-BY-4.0)