做网站的标准,网站开发不用mvc行不行,做网站敲代码的图片,wordpress中visitor1. CSS 选择器的优先级 (Specificity)
面试官通常会问你如何计算 CSS 选择器的优先级#xff0c;这对于避免样式冲突、提高代码可维护性很重要。
优先级计算规则#xff1a;
!important 优先级最高。内联样式#xff08;例如#xff1a;div stylecolor: red;这对于避免样式冲突、提高代码可维护性很重要。
优先级计算规则
!important 优先级最高。内联样式例如div stylecolor: red;优先级最高优先级值为 1000。ID 选择器的优先级为 100。类选择器、伪类选择器例如:hover优先级为 10。元素选择器、伪元素选择器例如::before优先级为 1。通配选择器*、组合符号、、~优先级为 0。
例子
#id 的优先级为 100。.class 的优先级为 10。div 的优先级为 1。
常见面试题
面试官可能会给你多个 CSS 选择器让你判断哪个选择器最终会生效或者让你优化选择器避免使用 !important。
2. 盒模型 (Box Model)
了解 CSS 盒模型是前端的基础。面试官可能会考察你对标准盒模型和怪异盒模型border-box的理解。
标准盒模型
元素的总宽度 content-width padding border margin。如果你给一个元素设置了 width: 100px那么这个 width 仅指内容的宽度外加 padding、border 会让元素的总宽度增大。
怪异盒模型box-sizing: border-box
元素的总宽度等于你设置的 widthpadding 和 border 会在内部被计算。
常见面试题
如何使多个盒子在浏览器中完美对齐且不超过指定的容器宽度解释 box-sizing: border-box 如何影响布局。
3. Flexbox 布局
Flexbox 是现代 CSS 布局的重要工具尤其适用于一维布局。
关键属性
display: flex: 将元素变为 Flex 容器其子元素称为 Flex 项目。justify-content: 控制主轴上的对齐方式例如flex-start, center, space-between。align-items: 控制交叉轴上的对齐方式例如flex-start, center。flex-grow, flex-shrink, flex-basis: 控制子元素如何伸缩。
常见面试题
如何用 Flexbox 实现元素的水平、垂直居中用 Flexbox 实现一个两列布局左侧固定宽度右侧自适应。flex-grow 和 flex-shrink 的具体作用是什么如何控制元素在不同屏幕大小下的比例分配
4. Grid 布局
Grid 是用于二维布局的强大工具面试时可能会让你通过它实现复杂的布局。
关键属性
display: grid: 将元素变为 Grid 容器。grid-template-columns 和 grid-template-rows: 定义列和行的模板。grid-column 和 grid-row: 控制单元格的跨行和跨列。gap: 设置网格之间的间距。
常见面试题
如何用 Grid 布局实现一个 3x3 的网格每个格子占据的空间相等用 Grid 实现响应式布局例如在较小屏幕下变成一列显示。
5. 响应式设计与媒体查询 (Media Queries)
响应式设计是为了适配不同设备屏幕大小的重要技术。媒体查询允许我们根据设备的屏幕尺寸调整样式。
常见的媒体查询
media (max-width: 768px) {/* 针对小于等于 768px 的设备的样式 */
}常见面试题
解释移动优先设计Mobile-First Design概念。使用媒体查询让网站在不同屏幕尺寸下布局不同。如何让图片在移动端自适应宽度并保持纵横比
6. CSS 性能优化
面试官常常会关注 CSS 在大规模项目中的性能表现。
优化方法
避免使用低效的选择器例如 div p a尽量使用类选择器。减少 CSS 重绘和重排Repaint 和 Reflow。例如避免频繁改变元素的 width、height 等属性最好使用 transform 或 opacity。尽量使用 will-change 预告即将发生的动画变化浏览器可以提前优化渲染。使用 CSS Sprite 减少 HTTP 请求。使用 Preload、Preconnect 优化资源加载。
常见面试题
如何优化 CSS 选择器的性能如何通过 CSS 动画实现高性能的动画效果如何避免页面加载时的闪烁FOUC
7. CSS 动画与过渡 (Animation and Transition)
面试中可能会考察你对 CSS 动画的理解和应用。
关键属性
transition: 设置元素状态变化时的过渡效果例如颜色、位置变化等。animation: 控制动画的播放包括 keyframes 定义动画帧。
常见面试题
如何实现一个元素从左侧移动到右侧的动画transition 和 animation 有什么区别何时使用如何通过 CSS 实现平滑的渐变效果
8. 伪类与伪元素
伪类Pseudo-classes和伪元素Pseudo-elements用于增强 CSS 选择器的功能常用于特定状态下的样式。
常见的伪类
:hover: 鼠标悬停时触发。:nth-child: 根据元素位置选择特定的子元素。
常见的伪元素
::before 和 ::after: 用于在元素内容前后插入内容。
常见面试题
使用伪元素 ::before 和 ::after 如何实现一个三角形效果:nth-child(2n) 选择了哪些元素如何理解 nth-child 选择器的使用
9. CSS 预处理器 (Sass/SCSS/Less)
大型项目中通常会用到 CSS 预处理器如 Sass 或 Less 来增强 CSS 的功能。
常见功能
嵌套规则Nested Rules。变量Variables和混合Mixins。运算Operations和继承Inheritance。
常见面试题
Sass 中的 mixin 和 include 有什么作用如何在 Sass 中使用循环生成一组类如何使用变量和嵌套简化复杂的 CSS
10. BEM 命名规范
BEMBlock Element Modifier是一种 CSS 命名规范能够提升样式的可读性和可维护性特别是在大型项目中。
BEM 规则
Block代表独立的功能模块例如 header。Element表示模块的组成部分用双下划线表示例如 header__logo。Modifier表示模块或元素的变体用双破折号表示例如 header__logo--large。
常见面试题
如何在项目中使用 BEM 命名规范使用 BEM 命名规范重构一个复杂的 CSS 样式。
11. CSS 深度与继承问题
继承性
某些 CSS 属性如字体 font-family、颜色 color是可以继承的而像 padding、margin 这些属性是不可继承的。inherit 关键字可以强制某个属性从父元素继承值。
常见面试题
哪些 CSS 属性是可以继承的如何强制某个属性继承父元素的值如何通过 CSS 让所有段落p元素的字体和父级一样
12. CSS 变量 (Custom Properties)
CSS 变量又称自定义属性是现代 CSS 中的重要功能允许你在样式中定义变量并在不同地方复用。
定义和使用
:root {--main-color: #3498db;
}div {color: var(--main-color);
}常见面试题
解释什么是 CSS 变量与预处理器如 Sass的变量有何区别如何使用 CSS 变量实现暗黑模式与亮模式切换
13. CSS 中的排列方式 (Float、Clear 和 Position)
在布局和定位中传统的 float 和 position 属性依然有一定应用场景。
常见的定位模式
float: 将元素浮动在一侧常用于早期的布局方式。clear: 用于清除浮动避免元素被浮动元素覆盖。position: absolute: 绝对定位元素相对于最近的有定位属性的父元素定位。position: fixed: 固定定位元素相对于浏览器窗口定位。position: sticky: 粘性定位元素在达到某个滚动位置后“粘”住直到其父元素的边界。
常见面试题
解释 position: absolute 和 position: relative 的区别。如何使用 float 和 clear 创建一个浮动布局解释 position: sticky 的工作原理和适用场景。
14. CSS 的层叠上下文与 z-index
z-index 是决定元素叠放顺序的重要属性但它的行为依赖于“层叠上下文Stacking Context”。
层叠上下文的规则
层叠上下文由特定条件触发如 position: relative/absolute/fixed并且 z-index 值不为 auto。层叠上下文决定元素的 z-index 计算顺序无法跨层叠上下文影响元素的顺序。
常见面试题
解释什么是层叠上下文以及 z-index 如何在层叠上下文中工作如何解决一个 z-index 不生效的问题
15. 隐藏元素的多种方式
CSS 提供了多种方式隐藏元素每种方式都有不同的效果和适用场景。
常见隐藏方法
display: none: 元素从文档流中完全移除不占据空间。visibility: hidden: 元素仍占据空间但不可见。opacity: 0: 元素完全透明但仍占据空间并可交互。position: absolute; left: -9999px: 将元素移出视口仍占据空间。clip-path: 可以裁剪部分或全部元素。
常见面试题
display: none 和 visibility: hidden 有什么区别它们各自的应用场景是什么如何通过 CSS 让元素不可见但保留其占据的空间
16. CSS 兼容性问题及前缀处理
不同浏览器对某些 CSS 新特性的支持可能存在差异通常需要添加浏览器前缀。
常见前缀
-webkit-用于 WebKit 引擎浏览器如 Chrome、Safari。-moz-用于 Firefox。-o-用于 Opera。
常见面试题
如何处理 CSS 新特性的浏览器兼容性问题如何使用 Autoprefixer 这样的工具自动添加前缀
17. 现代 CSS 布局技巧多列布局、视口单位
现代 CSS 布局不仅仅依赖于 flexbox 和 grid还包括一些新的视口单位viewport units和多列布局等技术。
视口单位
vwviewport width基于视口宽度的百分比。vhviewport height基于视口高度的百分比。vmin 和 vmax基于视口最小或最大维度。
多列布局
column-count 和 column-gap 可以创建多列布局。
常见面试题
使用视口单位实现一个全屏背景图片的布局。使用 CSS 实现报纸风格的多列文本布局。
18. CSS 中的图像处理
CSS 提供了许多处理图像的方法尤其是在响应式设计中如何有效加载和展示图片是常见的问题。
常见技术
background-size: cover/contain控制背景图片的缩放方式。object-fit: 控制替换元素如 img内容的填充方式。使用 srcset 和 sizes 属性加载不同分辨率的图片以适应不同设备。
常见面试题
如何使用 object-fit 让图片在容器内自适应但不变形解释 srcset 和 sizes 在响应式图片加载中的作用。
19. CSS 分层与结构化
在大型项目中CSS 的模块化和分层管理显得尤为重要。面试时面试官可能会关心你如何组织 CSS 文件如何保证代码的可维护性和可扩展性。
常见技术
CSS Modules通过作用域限制类名避免全局污染。CSS-in-JS在现代前端框架中通过 JavaScript 动态生成 CSS如 styled-components。ITCSSInverted Triangle CSS一种 CSS 架构方法层次清晰分为全局样式、组件样式、对象样式等。
常见面试题
解释 CSS Modules 的工作原理以及它如何避免样式冲突。如何在大型项目中组织 CSS避免样式冲突和复杂性
20. 浏览器回流与重绘 (Reflow Repaint)
面试时面试官可能会考察你对 CSS 性能的理解特别是在浏览器的渲染机制中如何避免回流和重绘以提高页面性能。
回流Reflow
当元素的几何属性如宽高、位置等发生变化时会导致回流重新计算布局。
重绘Repaint
当元素的外观如颜色、阴影发生变化时会导致重绘重新渲染外观。
常见面试题
什么是回流和重绘如何通过优化 CSS 避免它们哪些 CSS 属性会导致回流如何减少回流的频率 21. CSS Reset 与 Normalize
CSS Reset 和 Normalize.css 是解决不同浏览器对元素默认样式处理不一致的重要方法。
CSS Reset
将浏览器的所有默认样式去除提供一个干净的起点。
Normalize.css
对各浏览器的默认样式进行标准化确保跨浏览器的一致性而不是完全清除样式。
常见面试题
解释 CSS Reset 和 Normalize.css 的区别与作用。在项目中是否使用过 CSS Reset 或 Normalize如何选择使用
22. 优雅降级与渐进增强 (Graceful Degradation Progressive Enhancement)
这两个理念在开发具有广泛兼容性的网站时非常重要。面试时面试官可能会询问你如何在不同的设备和浏览器下保证良好的用户体验。
渐进增强
从基础功能入手为低版本浏览器提供基本体验然后为支持现代功能的浏览器提供增强的用户体验。
优雅降级
首先实现完整的现代功能体验然后通过兼容处理使功能在老旧浏览器上也能够正常工作。
常见面试题
什么是渐进增强与优雅降级如何在项目中应用它们如何为不支持 flexbox 或 grid 的老旧浏览器提供兼容的布局方案
23. CSS Sprites
CSS Sprites 是一种通过合并多个小图标为一张图像的技术减少 HTTP 请求次数优化网站性能。
实现步骤
将多个小图标合并成一张大图然后使用 background-position 来显示图像的不同部分。
常见面试题
什么是 CSS Sprites它如何帮助优化性能如何使用 CSS Sprites 实现一个图标的切换效果如按钮的 hover 效果
24. 视差滚动效果 (Parallax Scrolling)
视差滚动是一种常见的视觉效果使前景和背景以不同的速度滚动创造出一种 3D 深度感。
实现方式
使用 CSS background-attachment: fixed 或结合 JavaScript 监听滚动事件动态改变元素的位置。
常见面试题
如何使用纯 CSS 实现简单的视差滚动效果在实现视差效果时需要注意哪些性能优化问题
25. 滤镜 (CSS Filters)
CSS Filters 是一种对元素进行图像处理的技术例如模糊、灰度、亮度调整等效果。
常见滤镜
blur(): 模糊效果。brightness(): 调整亮度。grayscale(): 灰度效果。
常见面试题
如何使用 filter 属性为图片添加模糊效果使用 CSS 滤镜实现一个图片灰度切换为彩色的 hover 效果。
26. 阴影效果 (Box Shadow Text Shadow)
阴影效果是增强视觉层次感的常见手段。
关键属性
box-shadow: 为元素盒子添加阴影。text-shadow: 为文本添加阴影效果。
常见面试题
如何使用 box-shadow 实现卡片式设计的悬浮效果实现一个带有多重阴影效果的按钮。
27. 线性渐变与径向渐变 (Linear Gradient Radial Gradient)
渐变是创建平滑颜色过渡的常见技术适用于背景、边框等。
线性渐变
background: linear-gradient(to right, red, blue);径向渐变
background: radial-gradient(circle, red, blue);常见面试题
如何使用 linear-gradient 创建一个从左到右的颜色渐变使用径向渐变制作一个模拟按钮的光泽效果。
28. CSS 计数器 (CSS Counters)
CSS Counters 是一个非常实用的功能可以让开发者轻松生成自动递增的内容例如列表编号。
实现步骤
使用 counter-reset 初始化计数器。使用 counter-increment 增加计数器。使用 content 属性插入计数器的值。
常见面试题
如何使用 CSS 计数器为列表项自动编号使用 CSS 计数器创建一个带有章节编号的文章目录。
29. 首屏加载优化 (Critical CSS)
在现代 Web 开发中首屏加载时间至关重要优化 CSS 以确保首屏内容的快速渲染是性能优化的重点。
关键技术
提取关键 CSSCritical CSS将首屏相关的样式直接内嵌到 HTML 中。延迟加载非关键 CSS避免阻塞渲染。
常见面试题
什么是关键 CSS如何提取并优化首屏加载时间如何通过 CSS 和 JavaScript 优化页面的渲染性能
30. 跨浏览器兼容性问题 (Cross-Browser Compatibility)
浏览器对 CSS 的支持情况各不相同特别是某些新的 CSS 特性兼容性问题常常成为开发中遇到的挑战。
常见的解决方案
使用工具如 Can I Use 查询 CSS 特性的浏览器支持情况。使用 Polyfill 或 Graceful degradation 技术确保在不支持某特性的浏览器中有可用的替代方案。
常见面试题
你在项目中如何处理 CSS 的跨浏览器兼容性问题解释你曾经遇到的某个兼容性问题以及如何解决它。
31. 伪类选择器 (Pseudo-classes) 的高级应用
伪类选择器如 :nth-child能帮助你选择 DOM 中特定条件下的元素面试时可能会涉及到更复杂的用法。
常见伪类选择器
:nth-child(n): 选择第 n 个子元素。:nth-of-type(n): 选择第 n 个特定类型的子元素。
常见面试题
如何使用 :nth-child() 选择所有奇数行的列表项如何用 :nth-of-type 实现一个表格隔行变色的效果
32. CSS Logical Properties 和 Writing Modes
CSS Logical Properties 是现代 CSS 中用于处理不同语言书写方向如从右到左或垂直书写的重要工具。
关键属性
margin-inline-start, margin-block-end: 逻辑属性替代传统 margin-left、margin-top 等自动适应书写模式。
常见面试题
什么是 CSS 逻辑属性如何处理从右到左语言的样式如何使用 CSS 逻辑属性实现一个支持国际化的布局
33. Viewport Meta 标签与移动端优化
移动端优化常常涉及到使用 viewport 元标签控制页面在移动设备上的缩放行为。
常见用法
meta nameviewport contentwidthdevice-width, initial-scale1常见面试题
viewport 标签在移动端开发中的作用是什么如何使用 CSS 和 viewport 标签实现移动端响应式设计
34. 混合模式 (Mix-blend-mode 和 Background-blend-mode)
混合模式 允许你控制两个元素或背景图像是如何相互混合的常用于图像与背景的复杂视觉效果。
常见用法
mix-blend-mode: 控制元素与父元素背景或相邻元素之间的混合效果。background-blend-mode: 控制多个背景图片之间的混合效果。
常见面试题
解释 mix-blend-mode 和 background-blend-mode 的区别如何使用 mix
