247道CSS面试八股文（答案、分析和深入提问）整理

最新推荐文章于 2024-11-11 23:45:17 发布
最新推荐文章于 2024-11-11 23:45:17 发布
阅读量968 收藏 11
点赞数 21
分类专栏： 面试题 文章标签： css 面试 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ocean2103/article/details/142679159
版权

1. 如何理解CSS的层叠（Cascading）和继承（Inheritance）规则？

回答

CSS中的层叠（Cascading）和继承（Inheritance）是两个重要的概念，它们决定了样式如何应用于HTML元素。

1. 层叠（Cascading）

层叠是指在同一元素上应用多个样式规则时，哪一个样式终究生效的规则。这些规则的优先级通常由三个因素决定：

  • 来源：样式可以来自多个来源，例如浏览器的默认样式、用户的样式、作者的样式等。优先级从低到高为：

    • 浏览器样式（User Agent Style）
    • 用户样式（User Styles）
    • 作者样式（Author Styles）

  • 选择器的优先级：在相同来源的情况下，选择器的优先级决定了哪个规则生效。一般来说，优先级越高，越可能生效。优先级可以通过以下方式计算：

    • 内联样式（最高）
    • ID选择器
    • 类选择器、伪类、属性选择器
    • 标签选择器和伪元素（最低）

  • 重要性（!important）：使用!important标记的样式会覆盖所有其他样式，除非另一个样式也使用了!important，这时再比较其优先级。

2. 继承（Inheritance）

继承是指某些CSS属性会从父元素传递给子元素。如果一个元素没有自己指定的样式，它会使用从父元素继承的样式。通常能继承的属性包括字体、颜色、文本对齐等，而某些布局属性（如margin、padding、border等）则不会继承。

继承的属性示例：
  • 颜色（color）
  • 字体系列（font-family）
  • 行高（line-height）
非继承的属性示例：
  • 尺寸（width、height）
  • 边距（margin）
  • 填充（padding）

总结

在设计CSS时，理解层叠和继承规则有助于更有效地管理样式。通过掌握这些基础知识，你可以更灵活地控制样式的应用，避免样式冲突和不必要的复杂性。通常，合理结构化你的CSS代码，并使用类选择器和 ID 选择器，可以帮助你更好地控制层叠和继承效果。

注意点和建议：

在回答关于CSS的层叠和继承规则时，有几个方面可以帮助面试者更清晰地表达观点，同时避免常见误区：

  1. 定义清晰：建议先明确区分“层叠”和“继承”这两个概念。层叠涉及到多个规则之间的优先级，而继承则关注父元素如何影响其子元素的样式。

  2. 举例说明：使用具体的代码示例来阐明这些概念会更具说服力。例如，展示一段包含多个选择器的CSS代码，然后分析哪一条规则最终生效，以及为什么某些属性会被继承。

  3. 重视优先级：层叠的优先级规则（如选择器的特异性、源顺序与重要性）往往容易被忽略。确保解释这些优先级是如何工作的，以及如何影响最终渲染的样式。

  4. 注意错误的理解：提醒面试者避免将继承和层叠混淆，或者认为所有CSS属性都是可继承的。实际上，并非所有属性都会被继承，也不是所有规则都会按照源顺序应用。

  5. 考虑实践应用：可以讨论在实际开发中，如何利用这些概念来解决样式冲突或优化代码。这样能够展示出面试者对理论的理解和实际应用能力。

  6. 准备扩展问题：面试者可以考虑在回答中预想到一些可能的后续问题，并为此做好准备，比如如何处理特定的样式问题，或者在特定框架下的CSS层叠和继承情况。

通过关注上述点，面试者可以更全面而准确地回答相关问题，彰显出他们的专业能力和对基本概念的深刻理解。

面试官可能的深入提问：

面试官可能会进一步问：

  1. 请解释一下CSS层叠的优先级（specificity）是如何计算的？

    • 提示：考虑不同选择器类型的权重，如元素选择器、类选择器和ID选择器的影响。

  2. 如何处理样式冲突，特别是在使用多个CSS文件时？

    • 提示：考虑使用!important，以及如何组织样式表来减少冲突。

  3. 能否举例说明继承的具体应用场景，例如在字体或颜色样式中？

    • 提示：想想常见的元素如body与它的子元素之间的关系。

  4. 在CSS中，使用inherit、initial和unset的区别是什么？

    • 提示：考察你对这些属性值的理解及其效果。

  5. 在实际项目中，你如何优化CSS以提高加载性能？

    • 提示：想一想CSS文件的结构和加载顺序。

  6. 如果我们在使用CSS预处理器（如Sass或LESS）的情况下，层叠和继承规则是否会有所不同？

    • 提示：考虑嵌套、变量和混合宏的影响。

  7. 能谈谈CSS变量在继承和层叠中的作用吗？

    • 提示：思考CSS变量如何影响样式的维护及其在层叠中的优先级。

  8. 在响应式设计中，如何处理不同媒体查询下的样式层叠？

    • 提示：考虑视口大小变化对 CSS 规则的影响。

  9. 你如何调试CSS层叠和继承问题？

    • 提示：考虑使用浏览器开发者工具等调试工具的技巧。

  10. 在团队合作中，怎样避免样式之间的干扰？

    • 提示：思考CSS命名规范、模块化设计或BEM的方法。

2. display:none和visibility:hidden的区别是 ？

回答

display: none 和 visibility: hidden 是两种常用的 CSS 属性，它们的主要区别在于如何处理元素的显示和占用空间：

  1. display: none：

    • 该属性会完全移除元素，既不在页面上可见，也不占据任何空间。
    • 对应元素的所有子元素也会被隐藏。
    • 页面布局会重新计算，后面的元素会自动填补这个被移除的空间。

    示例：

    .hidden {
    display: none;
}

  2. visibility: hidden：

    • 该属性会使元素不可见，但仍然保留其在页面中的位置和空间。
    • 对应元素的子元素仍然可以占据空间，但是它们同样是不可见的。

    示例：

    .invisible {
    visibility: hidden;
}

总结

  • 使用 display: none 时，元素不参与布局，不占空间。
  • 使用 visibility: hidden 时，元素在页面上不可见，但仍然占据布局空间。

选择使用哪种属性，通常取决于你希望如何影响页面的布局和用户体验。

注意点和建议：

在回答“display: none”和“visibility: hidden”的区别这个问题时，有几个建议可以帮助面试者更加清晰和准确地表达自己的理解：

  1. 明确定义：确保首先明确这两个属性的基本定义。可以提到，display: none会完全移除元素，导致它不再占据任何空间，而visibility: hidden会让元素不可见，但仍然会占据原本的位置。

  2. 强调布局影响：要强调二者在布局上的不同影响。很多人容易忽略这点，因为这会影响到后续元素的排列顺序和布局。

  3. 使用案例：如果有可能，给出具体的例子或场景来说明何时使用其中一个属性更合适。这能展示你对实际应用的理解。

  4. 避免混淆：避免混淆这两个属性与其他相关属性，比如opacity，这可能会导致概念上的混乱。

  5. 讨论性能：在某些情况下，讨论这两者在性能上的差异（如重新渲染、重排等）也可以展示更深入的理解，但要避免过于复杂的技术细节。

  6. 简洁明了：尽量保持回答简洁，不要赘述，可以加一些总结性的陈述，强化关键点。

  7. 开放性：如果面试时间允许，可以问面试官学到的内容或者是否有进一步的问题，这样能表现出积极的学习态度。

总之，清晰、结构合理并能展示你对实际应用的理解是回答这个问题的关键。避免跑题或过于复杂的解释，确保你的回答能被理解并直观地展示出概念之间的不同。

面试官可能的深入提问：

面试官可能会进一步问：

  1. CSS的布局模型
    提示：请解释一下盒模型是如何工作的，以及它如何影响元素的布局。

  2. z-index的使用
    提示：如何控制元素的堆叠顺序，z-index在什么情况下会失效？

  3. 定位类型
    提示：请描述不同的定位属性（static, relative, absolute, fixed, sticky）以及它们的应用场景。

  4. 媒体查询
    提示：如何利用媒体查询实现响应式设计？给一个具体的例子。

  5. Flexbox与Grid
    提示：请比较Flexbox和CSS Grid布局的不同之处，分别适合用在哪些布局场景？

  6. 伪类与伪元素
    提示：请解释伪类和伪元素的区别，并给出它们的常见使用案例。

  7. CSS预处理器
    提示：你是否使用过Sass或Less？它们在哪些方面增强了CSS的功能？

  8. CSS性能优化
    提示：有哪些方法可以优化CSS的加载和渲染性能？

  9. 跨浏览器兼容性
    提示：在开发时你是如何处理CSS的跨浏览器兼容性问题的？

  10. CSS变量
    提示：请解释CSS变量的用法以及它们在项目中的优势。

3. 如何使用CSS中的关键路径渲染（Critical CSS）？

回答

关键路径渲染（Critical CSS）是指在页面加载时优先加载并渲染对首次内容绘制（FCP）和视觉稳定性最重要的 CSS。这可以提升页面的加载速度和用户体验。下面是使用关键路径渲染的步骤：

1. 确定关键 CSS

  • 分析页面：识别在初始视图中加载的最重要的 CSS 规则。
  • 使用工具：可使用工具如 Critical、PurgeCSS 或 Chrome DevTools 中的性能分析功能来帮助识别关键 CSS。

2. 生成关键 CSS

  • 手动提取：可以手动提取和整理关键 CSS，也可以使用脚本或工具来自动化这一过程。

  • 工具生成：使用 Critical 工具可以自动提取重要的 CSS。示例命令：

    npx critical --base ./ --src index.html --dest index-critical.html --inline --css styles.css

3. 嵌入关键 CSS

  • 将生成的关键 CSS 直接嵌入到 HTML 文档的 <head> 部分中：
    <style>
  /* 嵌入的关键 CSS */
</style>

4. 其他 CSS 的延后加载

  • 其他不那么重要的 CSS 可以通过 link 标签的 rel="preload" 或 rel="stylesheet" 的 media="print" 属性来异步加载：
    <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

5. 测试和优化

  • 监控页面性能：使用网页性能监控工具（如 Google PageSpeed Insights）查看优化效果。
  • 逐步改进：根据监控的数据来调整和优化关键 CSS 的选择和加载方式。

6. 开发工具支持

  • 在开发环境中，可以使用构建工具（如 Webpack、Gulp）自动化关键 CSS 的生成和嵌入。

小结

关键路径渲染能够显著改善网页的加载速度和用户体验，通过提取和优化关键 CSS 来实现。在实施过程中，注意监测和调整以找到最适合特定网站的解决方案。

注意点和建议：

在回答关于关键路径渲染（Critical CSS）的问题时，有几个方面需要特别注意，以确保你的回答既全面又精准。以下是一些建议和应该避免的常见误区：

  1. 理解关键路径渲染的概念：确保理解什么是关键路径渲染，为什么它对于提升页面加载速度和用户体验至关重要。关注CSS在首次渲染中的作用。

  2. 避免过于复杂的技术术语：尽量用简洁易懂的语言解释，避免使用过多专业术语，尤其是那些面试官可能不会熟悉的。

  3. 提及具体的实现方法：可以具体提及如何提取和内联关键CSS，比如使用工具（如 Critical 或 PurgeCSS）或者手动提取。讨论如何识别哪些CSS是关键的，而哪些可以延后加载。

  4. 不忽视性能监测：在讨论关键CSS的同时，也要提到性能监测的重要性。如使用工具（如 Google PageSpeed Insights）评估和调整关键CSS的效果。

  5. 考虑不同的浏览器和设备：强调要考虑不同设备和浏览器的渲染差异，可能会影响关键CSS的效果。

  6. 避免绝对化的观点：关键CSS并不是万灵药，并不是所有情况下都适用。有时候过度使用可能导致维护困难或者问题，因此可以提到适度使用的良好实践。

  7. 关注SEO和可访问性：提到关键CSS的优化对SEO的潜在影响，以及如何确保可访问性不受影响，这可以展示你全面的考虑问题的能力。

  8. 给出实际案例或经验：如果你有相关经验，可以分享具体案例，展示你如何成功实现关键CSS的优化，并取得什么样的效果。

  9. 对未来趋势的关注：可以提到一些新兴的优化方法或者框架（如 CSS-in-JS），以及它们对关键CSS的影响，这是展现你的前瞻性思维的好机会。

总的来说，展示你对关键路径渲染的理解、具体实现方法、注意事项和全面的思考能力，会让你的回答更加出色。

面试官可能的深入提问：

面试官可能会进一步问：

  1. 关键路径渲染的优点和缺点是什么？
    提示：考虑加载性能、用户体验和维护复杂性。

  2. 如何确定哪些CSS是关键路径CSS？
    提示：可以提及工具或方法，比如使用Chrome DevTools进行分析。

  3. 在什么情况下不使用关键路径CSS？
    提示：考虑项目规模、维护频率和复杂度。

  4. 你如何在构建过程中自动提取关键路径CSS？
    提示：讨论一些构建工具，比如Webpack或Gulp，以及相应的插件。

  5. 如何处理动态内容的关键路径CSS？
    提示：考虑异步加载的内容和它们的样式需求。

  6. 如何避免关键路径CSS与非关键CSS之间的冲突？
    提示：讨论样式隔离和优先级问题。

  7. 除了CSS，还有哪些资源可以采用关键路径渲染的策略？
    提示：考虑JavaScript和图片加载的方式。

  8. 你怎么看待关键路径CSS与体积优化之间的关系？
    提示：考虑文件大小对加载速度的影响，以及如何平衡两者。

  9. 在使用关键路径CSS时，有没有需要注意的安全性问题？
    提示：关注样式注入和XSS等安全问题。

  10. 有没有什么工具或库来帮助生成和优化关键路径CSS？
    提示：提到一些流行的开源工具或服务。

4. 如何实现一个响应式布局？

回答

实现响应式布局的关键是使用灵活的布局单位、媒体查询和现代CSS特性。以下是一些常用的方法和技巧：

1. 使用Flexbox

Flexbox是一个强大的布局工具，可以轻松创建响应式布局。

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 300px; /* 允许元素缩小和扩展，最小宽度为300px */
}

2. 使用Grid布局

CSS Grid可以创建更复杂的响应式布局。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

3. 媒体查询

通过媒体查询可以根据不同的屏幕尺寸定义不同的样式。

@media (max-width: 600px) {
    .item {
        flex-basis: 100%; /* 小屏幕上每个元素占满100%宽度 */
    }
}

4. 使用相对单位

使用百分比、vw（视口宽度百分比）和vh（视口高度百分比）等相对单位，可以提升布局的灵活性。

.container {
    width: 90%; /* 容器宽度为视口宽度的90% */
    margin: 0 auto; /* 居中 */
}

5. 媒体特性

可以根据设备的特性进行调节，如方向（portrait/landscape）等。

@media (orientation: landscape) {
    .item {
        flex-basis: 45%; /* 横屏时每个元素占45%宽度 */
    }
}

6. 流式布局

设置的最大和最小宽度可以帮助保持元素在不同屏幕上的视觉效果。

.item {
    max-width: 500px;
    min-width: 200px;
    width: 100%; /* 使元素充满父容器 */
}

7. 使用框架

考虑使用一些CSS框架如Bootstrap、Tailwind CSS等，它们已经实现了许多响应式设计的原理，使用起来非常方便。

示例：

这是一个基于Flexbox和媒体查询的简单响应式布局示例：

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

<style>
.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 200px; /* 安排元素 */
    margin: 10px;
    padding: 20px;
    background: lightblue;
    text-align: center;
}

@media (max-width: 600px) {
    .item {
        flex-basis: 100%; /* 小屏幕上每个元素占满100%宽度 */
    }
}
</style>

通过这些方法，你可以创建一个灵活且适应不同屏幕尺寸的响应式布局。

注意点和建议：

在回答如何实现响应式布局时，有几个要点需要注意，以确保你的回答既全面又清晰。

  1. 基础概念清晰：确保你首先阐明什么是响应式布局，以及为什么它重要。这能帮助面试官理解你对问题的整体把握。

  2. 多个技术和方法：讨论多个实现响应式布局的方法，比如使用媒体查询、弹性盒子（Flexbox）、网格布局（CSS Grid）以及流式布局等。体现出你对不同技术的熟悉程度，不要只关注一种解决方案。

  3. 实际示例：如果可能，提供代码示例或者具体的应用场景，展示你如何将理论转化为实践。这不仅能让你的回答更加生动，也能表现出你的实际操作能力。

  4. 设计原则：提及一些设计原则，比如移动优先（Mobile First）和优雅降级（Graceful Degradation），这会显示你对用户体验的考虑。

  5. 避免过度细节：在阐述的过程中，注意不要陷入过于技术细节的讨论而失去重点。聚焦关键概念，保持回答的流畅和条理清晰。

  6. 解决常见误区：在思考过程中，要避免一些常见误区，比如：

    • 认为响应式布局只需要媒体查询；实际上，需要综合考虑设计和排版。
    • 忽视不同设备和屏幕尺寸带来的用户体验差异，确保你提到考虑多种设备的必要性。
    • 不提及性能优化（例如，图片响应式处理）可能会被视为疏忽。

  7. 保持开放的态度：如果面试官有进一步的问题或者追问，展现出你愿意深入探讨的态度，表现出对学习的热情和对技术的好奇心。

通过以上几点，你的回答将更为全面和深刻，能够更好地展现你的能力和专业素养。

面试官可能的深入提问：

面试官可能会进一步问：

  1. Flexbox与Grid的区别是什么？
    提示：比较这两者在布局方面的优势和使用场景。

  2. 如何使用媒体查询实现复杂的响应式设计？
    提示：讨论如何根据不同设备尺寸或特性来调整样式。

  3. 在响应式布局中，如何处理图片和其他媒体内容的自适应？
    提示：引导讨论max-width、object-fit等属性的使用。

  4. 如何确保在不同浏览器上的一致性？
    提示：提及CSS重置样式或兼容性的CSS属性。

  5. 描述一种方法来实现移动优先的设计原则。
    提示：探讨如何先为小屏设备设置样式，再为大屏添加样式。

  6. 在CSS中，什么是“流式布局”，如何实现？
    提示：讲解相对单位如%和vw/vh的使用。

  7. 如何优化响应式网页的性能？
    提示：讨论图片懒加载、CSS文件拆分等策略。

  8. 讨论CSS变量在响应式设计中的作用。
    提示：考虑变量如何提高维护性和灵活性。

  9. 在响应式设计中，如何处理字体和排版？
    提示：引导到em、rem以及Viewport单位的使用。

  10. 如何使用JavaScript辅助实现响应式布局？
    提示：讨论可能用到的事件监听和动态样式更新。

5. CSS规则由哪几部分组成？

回答

CSS（层叠样式表）规则主要由以下几个部分组成：

  1. 选择器（Selector）：用于指定要应用样式的HTML元素。选择器可以是标签名、类名、ID，或者更复杂的组合，如子元素选择器、后代选择器等。

  2. 声明块（Declaration Block）：包含一个或多个声明，每个声明由属性和对应的值组成。声明块被大括号 {} 包围。

  3. 声明（Declaration）：由属性和数值组成，例如 color: red;。每个声明以分号 ; 结束。

  4. 属性（Property）：描述样式的特征，如 color、font-size、margin 等。

  5. 值（Value）：指定属性的具体样式值，例如 red、16px、10px 等。

示例

h1 {                 /* 选择器 */
    color: red;     /* 声明 */
    font-size: 20px; /* 声明 */
}

在这个例子中：

  • h1 是选择器。
  • { color: red; font-size: 20px; } 是声明块，里面包含两个声明。

这些部分共同构成了一条完整的CSS规则。

注意点和建议：

回答这个问题时，有几个方面需要注意，以下是一些建议和常见的误区：

  1. 结构清晰：回答时可以将CSS规则的组成部分分成几类，比如选择器、属性和属性值等。这样可以让回答更加条理分明，容易理解。

  2. 避免模糊描述：不要使用模糊的术语或概念。如果不确定某个术语的确切含义，最好进行简单的解释，而不是直接使用可能引起误解的词汇。

  3. 注重细节：要注意用词的准确性。例如，选择器和声明块的定义要明确，避免将两者混淆。同时，属性和值的关系也要清晰说明。

  4. 示例加分：如果条件允许，可以通过举例来强化理解。例如，给出一个具体的CSS规则，展示选择器、属性和值如何组合，这样能更好地帮助面试官理解。

  5. 避免过度简化：虽然简洁的回答很重要，但也不要忽视关键点。例如，提到伪类和伪元素的区别有助于展现对CSS更深入的理解。

  6. 注意使用专业术语：在使用专业术语时，确保自己理解，并能准确解释。例如，提到“继承”或“优先级”的时候，最好能简要解释一下其含义和重要性。

  7. 保持开放态度：在结束回答时，如果有时间，可以问面试官是否需要进一步的解释，这样表现出对讨论的开放性。

  8. 避免一知半解：不要尝试回答不熟悉的部分，宁可选择承认不熟悉，而不是尝试给出错误的信息。

通过这些策略，可以充分展示对CSS样式规则的理解，同时也能让回答更加准确和深入。

面试官可能的深入提问：

面试官可能会进一步问：

  1. 选择器的优先级是如何计算的？

    • 提示：考虑不同类型选择器的权重，比如行内、ID、类和标签选择器。

  2. 可以给我解释一下盒模型吗？

    • 提示：讨论内容区域、内边距、边框和外边距的关系。

  3. 什么是CSS特性？能举几个常见的例子吗？

    • 提示：讨论颜色、布局、字体等属性。

  4. 谈谈CSS布局的几种方式，包括它们各自的优缺点。

    • 提示：提到块级布局、Flexbox、Grid等。

  5. CSS的响应式设计怎么实现？

    • 提示：讨论媒体查询和流式布局。

  6. 如何控制元素的层叠顺序？

    • 提示：提到z-index的使用以及不同定位属性对叠放顺序的影响。

  7. CSS中的BEM是什么？有什么用？

    • 提示：解释命名约定和代码可维护性。

  8. 你的CSS代码通常是如何组织的？

    • 提示：考虑模块化、可重用性和注释的使用。

  9. 什么是预处理器，常见的CSS预处理器有哪些？

    • 提示：提到LESS、Sass及其优势。

  10. 能否谈谈动画和过渡效果的实现方式？

    • 提示：讨论transition与animation的差异及应用场景。

6. CSS3中的动画（Animations）和过渡（Transitions）有什么区别？

回答

在CSS中，动画（Animations）和过渡（Transitions）都是用于创建视觉效果的技术，但它们有一些关键的区别：

过渡（Transitions）：

  1. 目的：过渡用于在元素的某个状态变化时，平滑地过渡到另一个状态。例如，当鼠标悬停在元素上时，可以实现颜色、大小等属性的平滑变化。

  2. 触发：过渡是由状态变化触发的，通常是通过伪类（如:hover、:focus）或 JavaScript 的操作来控制。例如：

    .box {
    background-color: blue;
    transition: background-color 0.5s;
}
.box:hover {
    background-color: red;
}

  3. 简单性：过渡相对简单，通常只涉及到两个状态之间的变化。

动画（Animations）：

  1. 目的：动画允许创建更复杂的视觉效果，可以通过关键帧（keyframes）定义多个状态和它们之间的变化。使用动画可以实现持续的、循环的或复杂的效果。

  2. 定义：动画通过 @keyframes 规则定义，可以在动画过程中设置多个关键帧的样式。例如：

    @keyframes example {
    from { background-color: blue; }
    to { background-color: red; }
}
.box {
    animation: example 2s infinite;
}

  3. 控制：动画提供了更大的灵活性，可以设置持续时间、延迟、迭代次数等属性。它们不依赖于状态变化，可以独立运行。

总结：

  • 过渡通常是用于状态变化的简单效果，适合短暂的变化和互动；
  • 动画则可以创建复杂的、多步骤的效果，并不依赖于元素的状态变化。

两者都可以结合使用，根据需求选择合适的方式来增强用户体验。

注意点和建议：

在回答CSS3中的动画和过渡的区别时，建议面试者注意以下几点：

  1. 定义清晰：先明确两者的定义。过渡是为了在状态变化时提供平滑的过渡效果，而动画则允许定义更复杂的状态变化，包含多个关键帧。

  2. 应用场景：提及过渡通常用于简单的状态改变（如:hover效果），而动画则适合需要更复杂、循环的效果。

  3. 属性完整性：确保涵盖各自需要的CSS属性，例如过渡需要的transition和动画所用的@keyframes。不要混淆这两个概念的属性和使用场合。

  4. 举例：可以通过简单的实例来支持自己的观点，比如展示一个元素在hover状态下的颜色变化（过渡），与一个元素在页面加载时逐渐出现（动画）的对比。

  5. 避免复杂化：在回答时不要引入过多不必要的技术细节或过于复杂的实现方式，保持回答简洁明了。

  6. 常见误区：

    • 不要将过渡和动画混为一谈，要清楚他们的独立性和各自的使用场合。
    • 避免在实际应用中不加区别的使用这两者，导致效果不理想。
    • 注意不要忽略对性能影响的讨论，尤其是在动画执行频率较高的情况下。

通过这些要点，面试者可以更清晰、准确地表达对CSS3动画和过渡之间区别的理解，提高面试表现。

面试官可能的深入提问：

面试官可能会进一步问：

  1. 请解释一下如何使用关键帧（@keyframes）定义动画。

    • 提示：要求面试者举例说明关键帧的构造和作用。

  2. 在实现复杂动画时，你会选择 CSS 动画还是 JavaScript 动画，为什么？

    • 提示：探讨性能、控制和可维护性等方面的理由。

  3. CSS 动画和过渡能够对响应式设计产生哪些影响？

    • 提示：讨论在不同屏幕尺寸和设备上的表现。

  4. 如何通过 CSS 变量（Custom Properties）优化动画和过渡的管理？

    • 提示：分析如何动态改变动画的参数。

  5. 在动画中，如何避免性能问题，比如卡顿或延迟？

    • 提示：可以提到使用 GPU 加速、避免频繁的重绘等。

  6. 在使用 CSS 动画时，你会如何管理动画的回调或事件？

    • 提示：讨论如何与 JavaScript 交互或使用 animationend 事件。

  7. 你能给出一些 CSS 动画和过渡的最佳实践吗？

    • 提示：涉及可访问性、使用频率和用户体验等。

  8. CSS 动画和过渡在不同浏览器中的兼容性如何处理？

    • 提示：讨论前缀，Polyfills 及注意事项。

  9. 在用户交互（如悬停、点击）中，你会如何选择使用过渡还是动画？

    • 提示：考虑交互的类型和用户体验。

  10. 你会如何调试 CSS 动画相关的问题？

    • 提示：提到工具、方法和常见错误的排查。

7. box-sizing属性的作用是什么？content-box和border-box的区别是什么？

回答

box-sizing 属性用于控制元素的宽度和高度的计算方式。它有两个主要的值：content-box 和 border-box。

box-sizing: content-box

  • 默认值：元素的宽度和高度仅包括内容区域，不包括内边距（padding）和边框（border）。
  • 计算：
    • 宽度: 宽度 = 内容宽度
    • 高度: 高度 = 内容高度
  • 这意味着，如果你设置了一个元素的 width 为 200px，并且它有 10px 的内边距和 5px 的边框，实际占用的宽度将是 200px（内容区域） + 10px（左内边距） + 10px（右内边距） + 5px（左边框） + 5px（右边框） = 230px。

box-sizing: border-box

  • 包括内边距和边框：元素的宽度和高度包括内容区域、内边距和边框的尺寸。
  • 计算：
    • 宽度: 宽度 = 内容宽度 + 内边距 + 边框
    • 高度: 高度 = 内容高度 + 内边距 + 边框
  • 这意味着，如果你设置了元素的 width 为 200px，且同样有 10px 的内边距和 5px 的边框，实际占用的宽度仍然是 200px。内容区域的实际宽度将是 200px - 10px - 10px - 5px - 5px = 170px。

总结

  • content-box：宽高只包括内容，不考虑内边距和边框。
  • border-box：宽高包括内容、内边距和边框，常用于更便于控制元素尺寸的布局。

通常情况下，使用 border-box 可以更容易管理元素的布局，尤其是在复杂布局中，因此许多开发者推荐在全局样式中设置为 border-box。可以使用以下 CSS 来为所有元素设置 border-box：

* {
  box-sizing: border-box;
}

注意点和建议：

在回答有关box-sizing属性的问题时，有几个方面要特别注意，以避免常见的误区和错误。

首先，建议明确box-sizing的主要作用，即它控制着元素的宽度和高度的计算方式。正确引入这个概念，有助于考官理解你对CSS布局的基础知识掌握程度。

在解释content-box和border-box的区别时，确保清楚这两者的计算方式：

  1. content-box（默认值）：元素的宽度和高度只包含内容区域，不包括内边距（padding）和边框（border）。例如，如果一个元素设置为200px宽，实际占用的空间会增加内边距和边框的宽度。

  2. border-box：元素的宽度和高度包括内容、内边距和边框。这样设置后，任何为元素定义的宽高都会是实际可见区域的总宽度和高度，避免计算时的复杂性。

在回答时，避免以下常见误区与错误：

  • 模糊不清：不要仅仅提到box-sizing的定义，而没有进一步阐述它的实际影响和具体例子，确保提供清晰易懂的解释。

  • 忽视实际应用：可以适当提及在实际开发中使用border-box的优势，比如更易于控制布局，这样展示了你对实践的理解，而不仅仅依赖理论。

  • 缺乏比较：避免只讨论一个值而不提及另一个，使得答案片面。比较两者时，可以考虑使用简单的示例或图示辅助理解。

  • 忽略浏览器兼容性：可以简要提及这一属性在不同浏览器中的支持情况，显示出你对前端开发环境的全面认识。

总的来说，结构清晰、逻辑明了的回答更容易赢得好评，适当的例子和应用场景也能展示你的实际经验。希望你在面试中表现出色！

面试官可能的深入提问：

面试官可能会进一步问：

  1. box-sizing属性在不同浏览器中的兼容性如何？

    • 提示：讨论如何处理兼容性问题以及使用现代CSS预处理器的经验。

  2. 除了box-sizing，还有哪些CSS属性会影响元素的盒子模型？

    • 提示：考虑margin、padding、border等属性。

  3. 如何使用box-sizing: border-box来简化布局设计？

    • 提示：举例说明在布局中避免计算的好处。

  4. 在响应式设计中，box-sizing如何发挥作用？

    • 提示：讨论如何处理不同屏幕尺寸下的布局问题。

  5. 你认为在实际项目中，使用border-box与content-box的取舍是什么？

    • 提示：分析实际应用场景及团队协作的考虑。

  6. 如何使用CSS变量与box-sizing结合来实现更灵活的布局？

    • 提示：讨论CSS变量的作用及其对样式维护的影响。

  7. 怎样通过CSS进行元素的外部和内部对齐，当使用border-box时？

    • 提示：考虑使用Flexbox或Grid布局。

  8. 是否可以使用JavaScript动态改变box-sizing的值？如果可以，怎么做？

    • 提示：讨论DOM操作与CSS重绘。

  9. 你在项目中最常遇到的与box-sizing相关的问题是什么？如何解决的？

    • 提示：分享实际案例和解决策略。

  10. box-sizing对网页加载性能有影响吗？为什么？

    • 提示：考虑重绘与回流的概念。

8. 如何使用CSS后处理器（如PostCSS）？

回答

使用CSS后处理器（如PostCSS）可以帮助你扩展CSS的功能，支持自动添加浏览器前缀、嵌套规则、CSS变量等功能。以下是使用PostCSS的基本步骤：

1. 安装PostCSS

首先，你需要在你的项目中安装PostCSS及其插件。你可以使用npm或yarn来安装。

npm install postcss postcss-cli autoprefixer --save-dev

2. 创建PostCSS配置文件

在项目根目录下创建一个名为 postcss.config.js 的文件，并在其中配置PostCSS和你需要的插件。例如，如果你想使用 autoprefixer 来自动添加浏览器前缀，可以这样配置：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

3. 使用PostCSS处理CSS文件

你可以通过命令行使用PostCSS处理CSS文件。可以在 package.json 的 scripts 中添加一个脚本，例如：

"scripts": {
  "build:css": "postcss src/styles.css -o dist/styles.css"
}

运行这个命令会将 src/styles.css 作为输入，处理后输出到 dist/styles.css。

4. 运行构建

在命令行中执行你刚刚添加的脚本：

npm run build:css

5. 在项目中使用Processed CSS

确保在你的HTML或其他页面中引用生成的CSS文件。

6. 使用其他PostCSS插件

PostCSS的魅力在于其丰富的插件生态系统。你可以根据需要安装并配置其他插件。例如：

  • postcss-nested：支持嵌套规则
  • postcss-import：允许在CSS中使用@import
  • postcss-custom-properties：支持CSS变量

在安装和配置这些插件时，可以像上面的autoprefixer一样在 postcss.config.js 中添加。

示例

以下是一个完整的示例 postcss.config.js，使用了多个插件：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('autoprefixer'),
    require('cssnano')() // 用于压缩CSS
  ]
};

总结

通过以上步骤，你可以轻松地在项目中集成PostCSS以及相关的插件，提升你的CSS开发效率和质量。希望这些信息对你有所帮助！

注意点和建议：

在回答关于CSS后处理器（如PostCSS）的使用时，有几个建议可以帮助展示出更深入的理解：

  1. 基础知识：确保对PostCSS的基本概念有清晰的理解，包括它的功能、为什么使用它，以及它与其他CSS预处理器的区别。

  2. 使用场景：提到具体的使用场景，比如如何通过PostCSS实现自动添加浏览器前缀，或是使用插件进行代码优化。

  3. 插件的理解：PostCSS依赖插件来扩展功能。可以提到一些常用的插件（如autoprefixer、cssnano等），并举例说明它们的使用。

  4. 工作流集成：讨论如何将PostCSS集成到开发流程中，例如通过Webpack、Gulp或Grunt等工具，展示对现代构建工具的了解。

在回答时，避免以下常见误区和错误：

  • 过于理论化：只讲解PostCSS的定义而没有具体的应用实例，可能会让人觉得缺乏实际操作的能力。

  • 忽视实践经验：如果只依赖书本知识而没有自己的实践经验，可能会让你的回答显得不够深入。

  • 不够清晰：避免使用过于复杂的术语或概念而不加解释，这样可能让面试官难以跟上你的思路。

  • 重复常识：如果你的回答与基本常识相似，可能无法突显你的独特见解或技能。

通过清晰、具体和实践结合的方式来回答问题，会让你的回答更具说服力。

面试官可能的深入提问：

面试官可能会进一步问：

  1. 后处理器的优势与劣势是什么？

    • 提示：考虑性能、浏览器兼容性等方面。

  2. 请解释PostCSS的插件系统是如何工作的？

    • 提示：强调插件的灵活性和如何通过配置文件进行管理。

  3. 你如何选择使用特定的PostCSS插件？

    • 提示：考虑项目需求、团队经验和维护成本。

  4. 与其他CSS预处理器（如Sass 或 LESS）相比，PostCSS的特点是什么？

    • 提示：比较灵活性、功能性和学习曲线。

  5. 能否描述一下如何配置PostCSS以支持未来CSS特性？

    • 提示：引入Autoprefixer和PostCSS-preset-env的例子。

  6. 怎样在大型项目中维护PostCSS的配置，确保一致性？

    • 提示：讨论团队合作、代码审核和共享配置。

  7. PostCSS与构建工具（如Webpack或Gulp）如何集成？

    • 提示：指出配置和使用的步骤。

  8. 实时更新PostCSS配置时如何确保不影响开发流程？

    • 提示：考虑热重载或使用监控工具的策略。

  9. 你在项目中遇到过PostCSS相关的挑战吗？如何解决的？

    • 提示：分享具体的问题和解决方案。

  10. 如何测试或验证PostCSS处理后的CSS代码的质量？

    • 提示：考虑使用Lint工具或自动化测试的方式。

9. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

回答

在 CSS 中，可以让文字在垂直和水平方向上重叠的两个主要属性是：

  1. position：通过设置元素的定位属性（如 absolute 或 relative），可以将元素在页面上任意位置放置，从而实现重叠。

  2. z-index：该属性允许您控制重叠元素的堆叠顺序。使用不同的 z-index 值可以使某个元素在另一个元素的上方或下方显示。

您可以结合这两个属性，将文本元素放置在想要的位置，并通过调整 z-index 来确定它们的重叠关系。以下是一个简单的例子：

<div class="container">
    <div class="text1">文本1</div>
    <div class="text2">文本2</div>
</div>

.container {
    position: relative;
    width: 200px;
    height: 100px;
}

.text1 {
    position: absolute;
    top: 20px;  /* 垂直位置 */
    left: 20px; /* 水平位置 */
    z-index: 1;
}

.text2 {
    position: absolute;
    top: 40px;  /* 垂直位置重叠 */
    left: 40px; /* 水平位置重叠 */
    z-index: 2; /* 使其在 text1 之上 */
}

在这个例子中，text1 和 text2 的位置会重叠。

注意点和建议：

在回答这个CSS问题时，有几个建议可以帮助面试者更好地展现他们的知识和理解：

  1. 明确基本概念：在回答之前，确保清楚这两个属性的用法和效果。可以先简单解释一下每个属性的功能，然后再说明它们是如何实现文字重叠的。

  2. 避免模糊不清的表达：尽量使用准确的术语和描述，确保表达清晰。例如，不要只说“控制位置”而不具体提到是通过什么方式来控制，比如使用绝对定位或变换。

  3. 切忌遗漏重要信息：在讨论重叠时，可能涉及到定位、层级、透明度等其他属性，建议在回答中提及这些相关的内容，展示对CSS的整体理解。

  4. 实践示例：如果可能，最好能给出简单的代码示例或场景，说明如何实际应用这两个属性，这样能够增加说服力。

  5. 避免自信过头：即便对这两个属性的知识很扎实，也要保持谦逊，承认自己可能还有不完全了解的地方。这种态度在面试中更受欢迎。

  6. 防止概念混淆：确保不要和其他CSS属性混淆，比如与Margin、Padding等有关的属性。要专注于怎样通过特定的属性实现重叠效果，避免引入不相关的概念。

  7. 注意浏览器兼容性：提及属性的兼容性和使用场景，如果相应的属性在某些浏览器中的表现或支持不一致，应当有所了解。

总之，展示出扎实的理论基础和实践经验，再加上良好的表达能力，将会对面试者有很大的帮助。

面试官可能的深入提问：

面试官可能会进一步问：

  1. 请解释一下 position 属性及其相关的值（如 absolute, relative, fixed, sticky）的区别。
    提示：考虑元素的定位和布局方式。

  2. 如何利用 Flexbox 实现水平和垂直居中？
    提示：考虑使用 display: flex; 的属性配置。

  3. 可以介绍一下 CSS 网格布局（Grid）的基本概念吗？
    提示：聚焦于网格布局的行列概念和相关属性。

  4. 在 CSS 中如何使用伪元素（如 ::before, ::after）创建重叠效果？
    提示：想想伪元素的用法和定位方式。

  5. 如何处理 CSS 中的重叠元素以及它们的 z-index？
    提示：理解层级关系和为什么 z-index 会影响元素的显示。

  6. 讲讲 transform 属性如何帮助实现重叠效果？
    提示：考虑平移、旋转和缩放对元素的影响。

  7. 如果需要在不同屏幕大小下保持重叠效果，如何实现响应式布局？
    提示：观察如何利用媒体查询或相对单位。

  8. 你能说说何时使用 line-height 来控制文本重叠或居中吗？
    提示：想想文本排版和行间距的概念。

  9. 有没有 CSS 技巧可以避免文本重叠带来的可读性问题？
    提示：考虑颜色对比、背景和字距等因素。

10. 如何在项目中组织CSS文件？

回答

在项目中组织CSS文件是确保代码可维护性、可扩展性和可读性的关键步骤。以下是一些常用的方法和最佳实践：

1. 核心结构

根据项目需求，可以考虑以下基本的文件结构：

/css
  ├── base/         # 基础样式（重置、全局样式等）
  ├── layout/       # 布局样式（网格、框架等）
  ├── components/   # 组件样式（按钮、卡片等）
  ├── pages/        # 页面特定样式
  ├── themes/       # 主题样式
  ├── utils/        # 工具类（如混合宏、变量等）
  └── main.css      # 主样式文件

2. 文件命名

  • 使用一致的命名约定，如 BEM（Block Element Modifier）命名法，这样可以提高可读性：
    .button { }
.button--primary { }
.button__icon { }

3. 预处理器 / 后处理器

  • 使用 SCSS、LESS 等 CSS 预处理器，可以提高代码的组织性：
    /scss
  ├── _variables.scss
  ├── _mixins.scss
  ├── base/
  ├── layout/
  ├── components/

4. 模块化

  • 按功能模块化 CSS，例如每个组件都有自己的样式文件，这样便于独立修改和重用。

5. 按页面划分

  • 对于大型项目，可以根据页面功能划分 CSS 文件，例如 home.css, about.css，以便更好地管理不同页面的样式。

6. 组合文件

  • 在生产环境中，可以使用构建工具（如 Webpack、Gulp等）将多个 CSS 文件合并，生成单一的 CSS 文件以减少请求次数。

7. 文档 / 注释

  • 添加必要的注释，使其他开发者理解 CSS 的结构和设计意图。

8. CSS 规范

  • 确保团队成员遵守统一的代码风格和规范，比如使用 Prettier 和 Stylelint 来格式化和检测错误。

9. 确保灵活性

  • 设计 CSS 时考虑响应式布局，根据设备类型和屏幕尺寸调整样式。

通过合理组织 CSS 文件，可以大大提高开发效率，减少维护难度，从而提升整体项目质量。

注意点和建议：

在回答关于如何在项目中组织CSS文件的问题时，有几个方面建议关注：

  1. 清晰的结构：建议面试者强调保持文件结构的清晰和一致性，比如使用模块化方法，按功能或组件来组织CSS文件，而不是简单地将所有样式放在一个文件中。

  2. 命名约定：面试者应提到命名约定的重要性，比如BEM（块、元素、修饰符）方法，以确保样式的可读性和可维护性。避免使用模糊或过于通用的类名。

  3. 减少重复：提醒面试者提到CSS的DRY（Don’t Repeat Yourself）原则，尽量避免样式的重复定义，可以使用混入或共享样式类的方式。

  4. 使用工具和预处理器：如果面试者提到使用工具（如Sass或LESS），可以展现他们对CSS预处理器的理解。避免直接将所有CSS写在同一个文件，而是利用工具的特性来组织。

  5. 版本控制和文档：建议面试者讲到版本控制，以及对CSS文件进行注释的重要性，以便日后更容易理解和修改。

常见的误区包括：

  • 过于依赖全局样式：面试者如果不能意识到全局样式对大型项目的潜在影响，可能导致命名冲突和样式混乱。

  • 忽视响应式设计：不提到如何组织CSS以支持响应式设计可能会使得回答不够全面。

  • 缺乏对性能的考虑：没有提到CSS文件的加载顺序或合并问题，可能表明对优化的忽视。

通过关注这些方面，可以帮助面试者给出更有深度和专业性的回答。

面试官可能的深入提问：

面试官可能会进一步问：

  1. 你通常使用哪种CSS预处理器？能否解释一下它们的优缺点？

    • 提示：比较Sass与Less的功能和使用场景。

  2. 在大型项目中，你如何处理CSS的命名规范？

    • 提示：讨论BEM、OOCSS等方法论。

  3. 如何确保CSS的可维护性和可复用性？

    • 提示：考虑模块化、组件化的设计思路。

  4. 你怎么处理CSS的浏览器兼容性问题？

    • 提示：讨论自动前缀、polyfill等工具。

  5. 怎样优化CSS的加载和性能？

    • 提示：涉及CSS压缩、按需加载等技术。

  6. 在设计响应式布局时，你会采用什么样的方法？

    • 提示：谈谈媒体查询、Flexbox、Grid等技术。

  7. 在项目中使用CSS Modules时，你遇到过什么挑战？

    • 提示：讨论样式冲突、命名的自动化等问题。

  8. 你如何进行样式的版本控制？

    • 提示：考虑团队协作中的版本管理策略。

  9. 能否分享一个你在CSS上做过的性能优化案例？

    • 提示：具体的项目背景和优化措施。

  10. 如何保证团队中的CSS风格一致性？

    • 提示：提到代码审查、lint工具等措施。

由于篇幅限制，查看全部题目，请访问：CSS面试题库

技术面 - 八股文整理
程序员阿甘的博客
11-13 1万+
八股文整理
49道PWA面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-03 976
通过以上步骤，你的 PWA 应用即可实现推送通知。记得在服务器端实现推送服务和 VAPID 身份验证。确保在 HTTPS 环境下使用 PWA 和推送通知功能，因为这些功能在不安全的环境下无法使用。渐进式Web应用程序（PWA）结合了Web和移动应用的优势，提供了一种高效、安全且用户友好的浏览体验。通过上述特性，PWA能显著提升用户满意度和留存率，适用于各种业务和服务。
31道WebDriverIO面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-03 1100
使用方法可以方便地模拟键盘事件，适用于各种测试场景。你可以通过组合键和特殊键高效地控制测试行为。确保你根据你的元素选择器和业务需求修改示例代码。关注的是元素是否可以交互（是否启用）。关注的是元素是否在页面上可见。在实际测试中，选择合适的方法取决于你的需求：如果你的操作需要元素可见和可用，可能需要同时使用这两个方法。如果你想自定义浏览器的更多启动选项，可以在中添加更多配置。},}],使用配置文件来设置要启动的浏览器。修改来更改浏览器设置。使用命令启动测试。
57道Protractor面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-03 1003
在 Protractor 中，Promise 是处理异步操作的核心。使用是处理 Promise 的新推荐方式，因为它使得代码更易于阅读和维护。或者，你也可以选择使用.then()和.catch()来处理 Promise。了解如何正确使用 Promise 对于编写稳定和可维护的自动化测试非常重要。
277道Selenium面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-03 1075
最直接有效的方法是使用clear()，这是推荐的做法。使用方法一般不常用，除非在特定情况下需要逐字删除文本。希望这些信息对你有所帮助！如果你确定页面上只会有一个符合条件的元素，使用方法。如果可能会有多个符合条件的元素，或你想处理所有匹配的元素，使用方法。这样可以确保在编写测试时更好地控制其行为，根据需要处理单个元素或多个元素的情况。使用对象存储库管理元素定位器是一种提升自动化测试可读性和可维护性的有效方式。
37道uni-app面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-06 1108
最后，可以简单总结一下调试的重要性，比如如何通过有效的调试提高开发效率和代码质量。总的来说，回答时要做到准确、全面，同时避免过于复杂或含糊的表述，这样才能给人留下深刻的印象。
65道jQuery面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-06 710
jQuery是一个基础库，专注于简化常见的JavaScript功能；jQuery UI是一个扩展库，提供额外的用户界面组件和功能。这使得jQuery和jQuery UI可以一起使用，构建出既有交互性又美观的网页应用。jQuery适合全面、兼容性强的项目，尤其是在需要支持老旧浏览器或使用多种插件的情况下。Zepto适合轻量级、现代移动Web应用，强调性能和响应速度。使用将数组转化为 JSON 字符串。使用将 JSON 字符串转换回数组。这两个方法简单易用，可以有效地进行数据格式转换。
234道性能测试面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-04 883
通过使用 JMeter 的 HTTP Cookie Manager，你可以轻松地管理 Cookies 和会话，能有效地模拟用户在 Web 应用程序中的行为，也能提高性能测试的准确性和真实感。希望这些信息对你有所帮助！如果你有其他具体问题，欢迎继续提问。采样器负责实际的请求执行和性能数据采集。线程组控制测试的用户行为，包括并发量和请求的生成方式。结合使用采样器和线程组，用户可以创建复杂的测试场景，以帮助分析和评估应用程序的性能表现。
12道Web前端测试面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-04 687
简单介绍一下各工具的特点和优势，比如实时测试、自动化测试、截图功能等。这能展示你对这些工具的理解。
113道前端工程化面试八股文（答案、分析和深入提问）整理
ocean2103的专栏
10-11 1086
有多种方法可以在 Webpack 中切换开发环境和生产环境，具体选择可以根据项目需求以及团队习惯来决定。使用不同的配置文件、环境变量或直接利用 Webpack 的--mode参数都是常用和灵活的解决方案。如果主要需求是服务器推送消息，且对实时性要求不是特别高，是一个简洁的选择。如果需要更复杂的双向通信，并且对实时性的需求非常高，WebSocket 则更为合适。AMD模块的定义是异步的，允许模块在不阻塞页面的情况下加载。使用define方法定义模块，使用require方法加载模块。
Java后端 面试秘笈！
m0_72533993的博客
07-07 607
不管是学生还是在职工作的，面试都需要辅导，单靠自己搞也是能搞，只是某些学习这种东西很多时候需要一个局外人帮忙把关，也就是所谓傍观者清当局者迷。学生时代面临就是校招，其中校招分秋招和春招。下面我们来聊聊校招：秋招的人数名额要多余春招，但是竞争更大，也就是难度更大了。秋招⼀般7⽉左右开始，⼤概⼀直持续到10⽉底。但是大厂（如BAT）都会早开始早结束，所以一定要把握好时间。春招最佳时间为3月份，次佳时间为4月份，进入5月份基本就不会再有春招了（金三银四）。大家一定要把握好秋招，春招基本上都是补秋招的，并且秋招含金
2021 Java面试真题集锦
热门推荐
GL1765852966的博客
12-26 8万+
目录 … 1 大厂面试的基本流程 17 字节跳动 17 阿里 17 腾讯 18 网易游戏 18 面试前需要准备： 18 面试中可以借鉴的套路 19 用简历争取到更多的面试机会 19 自我介绍时，立即全面抛出技术栈和亮点 20 先介绍项目背景，打消面试官疑问 21 通过说项目管理工具，说明你不仅会写代码 22 用 SPRING BOOT 项目举例，说明你的技术基本面 23 用实例说明你在内存调优方面的经验 24 展示你在数据库调优方面的经验 25 总结前文说辞 26 准备项目说辞时，更可以准备后继面试官的问
【校招分享】Java非科班自学指南
slw213106的博客
11-24 1471
作者：一星如月看多时 链接：【校招干货】Java非科班自学指南V1.0_招聘信息_牛客网 来源：牛客网 本文针对应届校招生，面向大厂面试学习，讲究打牢基础的同时追求速成，适合还有一年以上时间参加校招的在校同学，时间较少的同学也可以参考，针对性学习。 本文针对非科班，从0开始，带你成为一名大厂校招Java工程师。 非科班学习途径无外乎网课+图书，所以本文会大量推荐网课，有些是免费的，有些是付费的，由于牛客限制，付费视频都不贴链接，请自行搜索并根据个人经济条件判断是否购买。 .
博客项目知识点的总结和拓展
weixin_69803940的博客
07-07 501
整体架构 后台目录： 本项目后台是由SpringBoot框架为基础进行开发的一款Java项目。 通过上述目录图，大致能分为三层： 控制层：获取前端来的请求。 服务层：对控制层的一些请求进行相对应的逻辑处理。 DAO层：对数据库数据的增删改查。 当然除了大致三层还有一些工具类、配置、缓存和aop等技术的加持。 数据表的分析 article表： DROP TABLE IF EXISTS `article`; CREATE TA...
CSS的定位（文档流，相对定位，绝对定位，固定定位）
2301_82005922的博客
11-11 626
讲述了CSS的定位中文档流，相对定位，绝对定位，固定定位的定义和如何在HTML5文档中应用
第8章 利用CSS制作导航菜单.
w_wx8866的博客
11-11 353
我们在浏览网页的时候可以看见许多位于顶部的导航栏，供我们点击跳转。
24.11.10 css
最新发布
2401_87910368的博客
11-11 212
属性用于创建浮动框，允许元素向左或向右浮动，使其脱离常规的文档流。浮动元素会移动到包含块的左端或右端，直到它的外边缘接触到包含块或另一个浮动元素的边缘。​ 行内块() 从走到右排列 宽高有效 图片 表单元素(输入框 选择框 按钮.....)div+css布局 实际上就是在页面中画格子 大格子中套小格子。​ 行内(inline) 从左到右排列 宽高无效。​ 块 (block) 从上到下排列 宽高有效。伪类选择器 (选取元素的交互状态)1,2 后加载的覆盖先加载的。选择器组合方式 (了解即可)
css中的变量使用
qq505751223的博客
11-11 94
在 CSS 中，变量使用--前缀来定义。通常在:root选择器中定义全局变量，以便在整个文档中使用。:root {定义变量：使用--前缀在 CSS 中定义变量。使用变量：使用var()函数引用变量。全局变量：在:root选择器中定义，可在整个文档中使用。局部变量：在特定的选择器中定义，只在该选择器及其子选择器中有效。动态更新：可以通过 JavaScript 动态更新 CSS 变量，实现动态样式变化。CSS 变量可以在任何选择器中定义，不一定要写在:root里面。:root。
vue2项目启用tailwindcss - 开启class=“w-[190px] mr-[20px]“ - 修复tailwindcss无效的问题
Rudon滨海渔村的博客
11-11 297
Tailwind CSS是utility-first(功能类优先)的CSS框架，功能类优先是指在一组受约束的原始功能类的基础上构建复杂的组件，Tailwind CSS内置了很多CSS类，直接放在HTML class属性中，以代替CSS。 项目中安装配置Tailwind CSS很简单，这里不再赘述，看官网文档即可。使用Tailwind CSS后，我们不再去写内联样式或者css文件，而是在html标签的class属性中写一连串类名就行了。
web前端面试八股文pdf
06-26
"Web前端面试八股文PDF"可能是指一份汇总了这些常见面试问题和答案的资料，用于帮助求职者准备面试。 1. 面试中可能会问到的基础知识有哪些？例如：HTML标签的作用、CSS选择器的类型等。 2. JavaScript ES6新特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值