排序
面试题:怎么实现网页两栏布局?
两栏布局是前端开发中最基础且常见的布局模式,通常分为两种形式: 一栏固定,一栏自适应 两栏等宽或按比例分配 以下是 多种实现方式,从传统到现代,全面覆盖,适合在面试中展示技术深度。 一...
面试题:说说你对 Flex 布局的理解及其使用场景
一、对 Flex 布局的理解 Flexbox(Flexible Box Layout),即 弹性盒子布局,是 CSS3 提供的一种一维布局模型,专门用于在容器和子元素之间高效地分配空间,即使子元素尺寸未知或动态变化,也能...
面试题:有哪些 CSS 选择器?请分别介绍
CSS 选择器是用于“选中”HTML元素并为其应用样式的模式。掌握各种选择器是精准控制页面样式的前提。以下是 CSS 中主要的选择器类型及其详细介绍。 一、基础选择器 1. 元素选择器(Type Selecto...
面试题:为什么有时候用 translate 来改变位置而不是定位?
这是一个关于 CSS 性能优化和渲染机制 的核心问题。使用 transform: translate() 而不是传统的 position(如 top/left)来改变元素位置,主要是出于性能和渲染效率的考虑。 下面详细解释原因: ...
面试题:怎么实现网页三栏布局?
三栏布局是前端开发中常见的经典布局模式,通常指左右两栏固定宽度,中间一栏自适应(圣杯布局或双飞翼布局)。以下是多种实现方式,从传统到现代,全面覆盖。 一、什么是三栏布局? 左侧栏:固...
面试题:flex-shrink 和 flex-grow 的默认值是多少?作用是什么?
这是一个深入考察 CSS Flexbox 布局核心机制的面试题。理解 flex-grow 和 flex-shrink 的默认值及其作用,是掌握弹性布局的关键。 默认值 flex-grow 的默认值是 0。 flex-shrink 的默认值是 1。...
面试题:如何在浏览器可视区域画一个最大的正方形?
这是一个考察对 CSS 布局、视口单位和响应式设计理解的面试题。 目标是创建一个在任何屏幕尺寸下都尽可能大,且保持为正方形,并完全位于可视区域内的元素。 核心思路 要画一个“最大”的正方形...
面试题:说说你对 CSS 工程化的理解
CSS 工程化是指将 软件工程的思想和方法 应用于 CSS 开发中,以解决传统 CSS 开发中存在的维护困难、命名冲突、复用性差、性能问题和团队协作障碍等痛点。 其核心目标是提升 CSS 代码的 可维护...
面试题:CSS 预处理器 / 后处理器是什么?为什么要使用它们?
这是一个很好的前端工程化问题。下面是对 CSS 预处理器和后处理器的详细解释: 1. CSS 预处理器 (CSS Preprocessor) 是什么?CSS 预处理器是一种扩展 CSS 语法的工具,它允许你使用更强大、更灵...
面试题:说说你对 BFC 的理解,如何创建 BFC?
你对 BFC 的理解,以及如何创建 BFC? BFC(Block Formatting Context),即 块级格式化上下文,是 CSS 渲染中一个重要的概念。它是页面中的一块独立的渲染区域,规定了内部块级元素如何布局,...
