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

css 知识点整理

news 来源：原创 2025/5/19 15:53:34

1.css 层叠样式表中的 inherit、initial、unset

关键字	适用属性类型	行为逻辑	典型场景
inherit	所有属性	强制继承父级值	统一子元素样式
initial	所有属性	重置为规范初始值	清除自定义或继承样式
unset	所有属性	自动判断继承或重置	简化全局样式重置或覆盖

2. sass 常用语法

2.1、变量（Variables）


$primary-color: #3498db;
$font-size: 16px;

// 使用变量
.header {
  color: $primary-color;
  font-size: $font-size;
}

2.2 嵌套（Nesting）

.nav {
  padding: 1rem;
  // 子元素嵌套
  ul {
    margin: 0;
    
    // 父选择器 & 
    li {
      display: inline-block;
      &:hover {
        color: red;
      }
    }
  }
}
// 编译结果
.nav { padding: 1rem; }
.nav ul { margin: 0; }
.nav ul li { display: inline-block; }
.nav ul li:hover { color: red; }

2.3 混合指令（Mixins）

// 定义 Mixin
@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// 调用 Mixin
.container {
  @include flex-center(column);
}
// 编译结果
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

2.4 继承（Extend）

// 基础样式
%button-base {
  padding: 12px 24px;
  border-radius: 4px;
}

// 继承扩展
.primary-button {
  @extend %button-base;
  background-color: blue;
}

2.5 循环（Loops）

2.5.1 @each 遍历列表

$sizes: 40px, 60px, 80px;
@each $size in $sizes {
 .icon-#{$size} {
   width: $size;
   height: $size;
 }
}

2.5.2 @for 生成序列

@for $i from 1 through 3 {
 .mt-#{$i} { margin-top: 10px * $i; }
}

2.6 函数（Functions）

// 自定义函数
@function to-rem($px) {
 @return ($px / 16px) * 1rem;
}

// 使用函数
.text {
 font-size: to-rem(24px); // 输出 1.5rem
}

2.7 模块化（@use 和 @forward）

2.7.1 定义模块 _variables.scss

// 私有变量（加 - 前缀）
$-base-padding: 10px;

// 公开变量
$primary-color: #333 !default;

// 2.7.2 引入模块 main.scss
@use 'variables' as vars;

body {
  color: vars.$primary-color;
  padding: vars.$-base-padding; // 报错（无法访问私有变量）
}

2.8 条件语句（@if, @else）

@mixin theme($mode) {
  @if $mode == dark {
    background: #000;
    color: white;
  } @else {
    background: white;
    color: #000;
  }
}

2.9 插值语法（#{}）

$property: "margin";
$direction: "top";

.#{$property}-#{$direction} {
  #{$property}-#{$direction}: 20px;
}

2.10 运算符

$width: 100%; 

.sidebar {
  width: $width / 3 - 20px;  // 支持加减乘除
  padding: 10px + 5px;      // 15px
}

3. 对BFC的理解，如何创建BFC

BFC (Block Formatting Context) 块级格式上下文，是 CSS 中的一种布局机制，一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。【用于解决高度塌缩、边距折叠等】
如何触发：

根元素默认生成一个 BFC；
float 值非 none；
overflow值非 visible；
position 值为absoute、fixed；
display 值为 inline-block、table-cell、flex、grid、【新属性 flow-root】

4. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

HTML 空白字符渲染浏览器会将

标签间的换行、缩进等空白字符渲染成一个空格，类似于文本排版中的自然间隔。inline-block 的布局特性会保留块盒属性，同时像文本一样排列，因此空白字符会影响布局。
解决方法：

消除
- 的字符间隔 letter-spacing:-8px，不足：这也设置了
- 内的字符间隔，因此需要将
- 内的字符间隔设为默认letter-spacing:normal。
- 使用 flex 或者 grid 布局

5. link 和 import 区别

区别点	link	@import
从属关系	HTML 标签（属于 HTML 规范）	CSS 语法（属于 CSS2.1 规范）
语法	< link href=“style.css” rel=“stylesheet”>（写在 HTML 中）	@import url(“style.css”);（写在 CSS 文件或 < style> 标签内，且必须在顶部）
加载顺序	与 HTML 并行加载，不阻塞页面渲染	需等待 HTML 加载完成后再加载 CSS，可能导致 FOUC（短暂无样式）
兼容性	所有浏览器（包括 IE5+）	IE5+ 及现代浏览器（IE4 及更低不支持）
DOM 可控性	可通过 JS 动态插入、删除或修改（如切换主题）	无法通过 JS 动态操作，需直接修改 CSS 文件
权重与覆盖	优先级较高，后加载的样式覆盖先加载的	优先级较低，即使后加载也可能被样式覆盖
媒体查询支持	支持 media 属性（如 media=“print”）	支持在 @import 后加媒体条件（如 @import url(“print.css”) print;）
模块化与代码复用	需手动在 HTML 中引入多个文件	可在 CSS 文件中嵌套引入其他文件（如 @import “base.css”;）
预加载优化	支持 rel=“preload” 提前加载关键 CSS	不支持预加载
适用场景	主样式表、动态样式加载、需高性能的场景	CSS 模块化拆分、第三方基础样式库引入

6. transition 和 animation 的区别？

特性	transition	animation
触发方式	需用户交互或属性变化触发	可自动触发或手动控制
状态控制	仅初始态和结束态	支持多关键帧中间状态
循环能力	默认单次运行	支持无限循环
控制复杂度	简单（时长、延迟、缓动）	复杂（方向、填充模式、迭代次数）
适用场景	简单属性过渡（颜色、尺寸）	复杂动画（序列、循环）