必看

2. Css

6 min
两个子元素 content 10px，padding 10px，margin 10px, 父元素总高度为多少

CSS 几种解决方案的对比

  1. css module 是一种作用域隔离的 CSS 方案，它允许 CSS 代码在组件内部使用，而不会影响其他组件的样式
  2. css in js 主流的有 Styled Component, Emotion; 样式定义嵌入到 JavaScript，它允许在 JavaScript 代码中动态生成和管理样式。这个方案特别适用于组件化开发，它将样式与组件的逻辑、状态紧密结合，但他完全是运行时的
  3. tailwindcss 主打 utility classes 原子类的设计理念，目前应用广泛
  4. 预处理器（ SASS、LESS 和 Stylus）为 CSS 提供了编程语言的特性，使得 CSS 的编写更具模块化和可维护性，可用变量/嵌套/mixin 等特性
  5. postcss CSS 后处理工具 构建过程中对 CSS 进行转换、优化、增强，支持各种功能，比如自动添加浏览器前缀、CSS 嵌套、自动优化代码等
  • 运行时的方案有：styled-components、Emotion 的默认模式、TailwindCSS 的 JIT 模式。
  • 非运行时：传统 CSS、SCSS、LESS、CSS Modules、Tailwind CSS 的非 JIT 模式、静态生成的 CSS-in-JS，Emotion 支持在构建阶段提取样式为静态 CSS 文件。

flex: 1 是什么意思？

全写为 flex: 1 1 0，这个元素要把父容器里剩下的空间尽可能“占满”，和其它也设置了 flex: 1 的元素平分空间。

  • flex-grow: 1: 如果父容器中有多余空间，这个元素会按比例分配这些空间。多个元素设置 flex-grow: 1，它们会平分可用空间。
  • flex-shrink: 1: 空间不足时，元素会按比例缩小。
  • flex-basic: 初始的主轴尺寸为 0，也就是说元素初始不占空间，完全依赖 flex-grow 来扩展

简述 BFC，用以解决什么问题，如何触发

BFC 是块级格式化上下文，是浏览器的一种布局机制。它使元素形成一个独立的布局区域，内部元素不会影响外部布局。常用于清除浮动、避免 margin 合并、解决高度塌陷等问题。 可以理解 BFC 是一个封闭的大箱子，箱子内部的元素无论如何变化都不会影响外面的元素

如何触发 BFC：

  • float: left/right; 元素浮动即触发 BFC
  • position: absolute/fixed 绝对/固定定位会触发 BFC
  • display: inline-block;,display: table-cell;,display: flow-root;
  • overflow: hidden/auto/scroll; 常用于清除浮动，注意 visible 无效
  • contain: layout;

特性及应用：

  1. 父子块级元素上下相邻时，margin 会塌陷，变成最大值。父元素设置 BFC（如 overflow: hidden）可阻止塌陷发生。
  2. BFC 可以包含浮动的元素（清除浮动）, 子元素浮动后，父元素高度塌陷怎么办？设置父元素为 BFC；
  3. BFC 可以阻止元素被浮动元素覆盖

两个子元素 content 10px，padding 10px，margin 10px, 父元素总高度为多少

70px；

发生了三次 margin 塌陷：

  • 第一次：第一个子元素的 margin-top，其实会变成父元素的 margin-top；
  • 第二次： 第一个子元素的 margin-bottom 和 第二个子元素是 margin-top 会重叠为 10px；
  • 第三次： 第二个子元素的 margin-bottom 实际也会变为 父元素的 margin-bottom 不计入高度

元素显隐的方案对比

  • display none
    • 完全从文档流中移除元素元素不占空间，可能触发回流，
    • 不可点击，在事件响应上无法获取焦点，无法响应任何事件
  • visibility hidden
    • 只会触发重绘，是继承属性，
    • 元素不可见，但仍然占据空间，
    • 用户仍然可以与其交互，可以在冒泡阶段响应事件
  • opacity 0
    • 只是透明度为 0，
    • 可以获得焦点，可以响应事件；
  • ansolute zindex -9999，
  • hidden 属性

介绍一下 css 样式优先级

CSS 样式优先级是由选择器的权重决定的，

  1. 内联样式优先级最高，1000
  2. 其次是 ID 选择器，100
  3. 再次是类选择器、属性选择器和伪类选择器，10
  4. 最后是元素选择器和伪元素选择器。1

权重通过累加计算，例如 #id .class div 的权重是 100 + 10 + 1 = 111。如果权重相同，后定义的样式会覆盖前面的样式。此外，!important 的样式优先级最高，但应谨慎使用以避免影响样式的维护性。

介绍下盒模型

box-sizing: content-box | border-box

  • content-box（默认，标准盒模型）元素总体宽度（offersetWidth） = 设置的 width + padding + border，简单记忆（设置的 width 属性表示的是 content width， 总宽度还要加上其他的）
  • border-box 元素总体宽度（offersetWidth）= 设置的 width，padding 和 border 会被向内挤压

介绍下 shadcn-ui

shadcn-ui 一个基于 tailwindcss 的组件库，但严格意义上不算是组件库，而是可重复使用的组件的集合，以 radix 为基础，利用了 radix 原子级组件逻辑，无样式的特性；轻量化，追求高度定制；

init 的时候

  1. 生成 shadcn.config.json, 存储主要配置
  2. 安装必要的依赖，比如 radix，lucide icon，CVA
  3. 更新 tailwind config，

add 的时候

  1. 检查输入的组件名称，无效就提示错误
  2. 下载组件模板
  3. 将组件代码复制到项目中