濮阳做网站的公司全球十大搜索引擎排名
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 触发方式 需用户交互或属性变化触发 可自动触发或手动控制 状态控制 仅初始态和结束态 支持多关键帧中间状态 循环能力 默认单次运行 支持无限循环 控制复杂度 简单（时长、延迟、缓动） 复杂（方向、填充模式、迭代次数） 适用场景 简单属性过渡（颜色、尺寸） 复杂动画（序列、循环） 7.为什么有时候人们用translate来改变位置而不是定位如absolute或relative？
性能更优，GPU 加速，避免重排 。
- translate ：通过 transform：translate() 移动元素时，浏览器仅会触发合成（composite），利用 GPU 加速操作图层，跳过布局和绘制阶段，性能更优。
- GPU 加速 ：translate 的变换由 GPU 处理，适合高频次动画（如滚动、平移）
- 消除