最新前端面试题大全(css篇)

合集下载

前端开发工程师面试题及答案

前端开发工程师面试题及答案在前端开发领域，面试是选拔优秀人才的重要环节。

以下是一些常见的前端开发工程师面试题以及对应的参考答案。

一、HTML 和 CSS 相关问题1、解释一下盒模型以及它在布局中的作用。

答案：盒模型是 CSS 中用于布局的基本概念，它由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

在布局中，理解盒模型对于准确计算元素的尺寸和间距非常重要，能够帮助我们实现各种复杂的页面布局。

2、如何实现一个两栏布局，左边固定宽度，右边自适应？答案：可以使用多种方法实现。

一种常见的方式是使用浮动（float），将左边栏设置为固定宽度并向左浮动，右边栏不浮动，并设置其左边的外边距（marginleft）为左边栏的宽度。

也可以使用 flex 布局，将父容器设置为 display: flex; ，左边栏设置固定宽度，右边栏设置flex: 1; 以实现自适应。

3、说一说 CSS 选择器的种类和优先级。

答案：CSS 选择器包括元素选择器、类选择器、id 选择器、属性选择器、伪类选择器、伪元素选择器等。

选择器的优先级从高到低依次为：内联样式（通过 style 属性设置）＞ id 选择器＞类选择器、属性选择器、伪类选择器＞元素选择器、伪元素选择器。

二、JavaScript 相关问题1、谈谈你对 JavaScript 中作用域和闭包的理解。

答案：作用域决定了变量的可见性和可访问性。

在 JavaScript 中有全局作用域和函数作用域。

闭包是指有权访问另一个函数作用域中的变量的函数。

闭包可以让函数记住其创建时的环境，即使外部函数已经执行完毕，闭包仍能访问外部函数中的变量。

2、如何实现 JavaScript 的继承？答案：常见的实现方式有原型链继承、借用构造函数继承、组合继承、寄生组合继承等。

原型链继承通过将子类型的原型指向父类型的实例来实现继承；借用构造函数继承通过在子类型的构造函数中调用父类型的构造函数来继承属性；组合继承结合了原型链继承和借用构造函数继承的优点；寄生组合继承是一种优化的组合继承方式，避免了不必要的父类实例属性的重复创建。

前端工程化面试问题

前端工程化面试问题一、基础知识1. 请简述一下你对HTML5的理解？HTML5在前端开发中扮演了什么样的角色？2. 什么是CSS，它的主要作用是什么？3. JavaScript的主要特性和应用场景有哪些？4. 请谈谈你对前端框架（如React、Vue、Angular等）的理解。

你可以详细描述一下你熟悉的前端框架的主要特性和使用场景吗？5. 请解释一下什么是前端路由，以及它的实现原理。

6. 请简述一下你对前端工程化的理解，以及它的重要性。

7. 什么是模块化，如何实现前端模块化？8. 请解释一下什么是HTTP和HTTPS，以及他们的区别。

9. 请简述一下你对Webpack的理解，以及它的主要功能和使用场景。

10. 请解释一下什么是DOM，以及它的重要性。

二、进阶知识1. 请解释一下什么是虚拟DOM，以及它与真实DOM的区别和联系。

2. 请谈谈你对前端性能优化的理解，以及你通常采用的前端性能优化方法。

3. 请解释一下什么是CSS预处理器（如Sass、Less等），以及他们的特性和使用场景。

4. 请谈谈你对前端安全性的理解，以及你通常采用的前端安全措施。

5. 请解释一下什么是前端自动化，以及你熟悉的前端自动化工具和框架。

6. 请解释一下什么是前端响应式设计，以及它的实现原理。

7. 请谈谈你对前端组件化的理解，以及你通常采用的前端组件设计和开发方法。

8. 请解释一下什么是Service Worker，以及它的主要功能和使用场景。

9. 请谈谈你对前端模块热替换（Hot Module Replacement）的理解，以及它的主要优点和限制。

10. 请解释一下什么是前端路由懒加载，以及它的实现原理和优点。

三、实战经验1. 请描述一下你在过去的工作中遇到的最大的前端技术挑战，你是如何解决的？2. 请谈谈你在使用前端框架开发中的经验，以及你对其优缺点的理解。

3. 请描述一下你在前端工程化实践中遇到的问题和解决方法。

45道CSS基础面试题(附答案)

45道CSS 基础面试题（附答案）刘宁Leo1 介绍一下标准的CSS 的盒子模型？与低版本IE 的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content ）+ border + padding + margin低版本IE 盒子模型：宽度=内容宽度（content+border+padding ）+ margin2 boxsizing 属性？用来控制元素的盒子模型的解析模式，默认为contentboxcontextbox ：W3C 的标准盒子模型，设置元素的 height/width 属性指的是content 部分的高/宽borderbox ：IE 传统盒子模型。

设置元素的height/width 属性指的是border + padding + content 部分的高/宽3 CSS 选择器有哪些？哪些属性可以继承？CSS 选择符：id 选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li ）、后代选择器（li a ）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nthchild ）可继承的属性：fontsize, fontfamily, color不可继承的样式：border, padding, margin, width, height优先级（就近原则）：!important > [ id > class > tag ]!important 比内联优先级高4 CSS 优先级算法如何计算？元素选择符： 1class 选择符： 10id 选择符：100元素标签：10001. !important 声明的样式优先级最高，如果冲突再进行计算。

前端面试题--CSS篇

前端⾯试题--CSS篇1. ⾯试中，被问到关于flex布局中，flex-shirink的计算问题。

⽗元素宽度300px，display为flex, ⼦元素1宽度100px，flex-shirink为1，⼦元素2宽度300px，flex-shirink为2。

⼦元素1，⼦元素2的实际宽度是多少？如何计算？<div class="box"><div class="first">85.719</div><div class="second">214.281</div></div>.box{width: 300px;display: flex;}.first{background: red;width: 100px;flex-shrink: 1;}.second{background: yellow;width: 300px;flex-shrink: 2;}计算⽅法：需要收缩的空间：100+300-300=100每个⼦项⽬需要收缩的值：100n+300*2n=100; n=1/7first宽度：100-100*1/7=85.719second宽度：300-300*2*1/7 = 214.2812 实现⼀个div在不同分辨率下的⽔平垂直居中.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 1px solid pink;width: 200px;height: 200px;}3 左右固定，中间⾃适应样式<style>.box {display: flex;height: 200px;}.left {flex: 0 0 200px;background-color: pink;}.center {flex: 1;background-color: yellow;}.right {flex: 0 0 200px;background-color: skyblue;}</style></head><body><div class="box"><div class="left"></div><div class="center"></div><div class="right"></div></div></body>4 清除浮动的⼏种⽅式：//1. 在元素最后下加⼀个元素, 设置clear：both属性，缺点是会增加多余⽆⽤的html元素<div class="container"><div class="left">left浮动</div><div class="right">right浮动</div><div style="clear:both;"></div></div>//2. 使⽤after伪元素(给⽗元素添加after伪元素).container::after {content: ' ';display: block;clear: both;}//3. 给⽗级元素设置overflow:hidden, 缺点：不能和position配合使⽤5 box-sizing常⽤的属性有哪些？分别有什么作⽤？（1）content-box宽⾼是元素本⾝的宽⾼不包含border+padding（2）border-box元素的宽⾼已经包含了border+padding（3）inherit从⽗元素继承box-sizing属性6 CSS样式权重!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)7 请简要描述margin重合问题，及解决⽅式问题：相邻两个盒⼦垂直⽅向上的margin会发⽣重叠，只会取⽐较⼤的margin解决：（1）设置padding代替margin（2）设置float（3）设置overflow（4）设置position：absolute 绝对定位（5）设置display： inline-block8 <meta></meta>标签的理解1、meta是html⽂档头部的⼀个标签，这个标签对⽤户不可见，是给搜索引擎看的。

前端面试题（HTML和css部分）

前端⾯试题（HTML和css部分）HTML、CSS部分：⼀、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？新特性：HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API语义化更好的内容标签（header,nav,footer,aside,article,section）⾳频、视频API(audio,video)画布(Canvas) API地理(Geolocation) API本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后⾃动删除表单控件，calendar、date、time、email、url、search新的技术webworker, websocket, Geolocation移除元素：纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；h5新标签兼容：IE8/IE7/IE6⽀持通过document.createElement⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持HTML5新标签，当然最好的⽅式是直接使⽤成熟的框架、使⽤最多的是html5shim框架如何区分：DOCTYPE声明\新增的结构元素\功能元素⼆、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？CSS 选择符：1.id选择器（ # myid）2.类选择器（.myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）5.⼦选择器（ul > li）6.后代选择器（li a）7.通配符选择器（ * ）8.属性选择器（a[rel = "external"]）9.伪类选择器（a: hover, li:nth-child）可以继承的属性：可继承的样式： font-size font-family color, UL LI DL DD DT;不可继承的样式：border padding margin width height ;优先级：!important > id > class > tagimportant ⽐内联优先级⾼,但内联⽐ id 要⾼CSS3新增伪类举例：p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。

前端兼容性面试题

前端兼容性面试题在前端开发中，兼容性是一个非常重要的考虑因素。

由于不同浏览器、操作系统和设备之间存在差异，开发者需要确保网站或应用程序能够在各种环境下正常运行。

为了帮助你准备前端兼容性面试，下面将介绍一些常见的兼容性问题以及解决方案。

一、CSS兼容性1. 盒模型差异盒模型指的是元素的宽度和高度的计算方式。

在标准盒模型中，元素的宽度和高度不包括边框和内边距。

而在IE盒模型中，元素的宽度和高度包括边框和内边距。

解决方案：使用CSS的box-sizing属性，将其值设置为border-box，可以统一盒模型的计算方式。

2. 浮动与清除浮动在某些浏览器中，浮动元素可能会导致父容器的高度塌陷，影响页面布局。

解决方案：可以使用clearfix类来清除浮动，或者使用伪元素::after来清除浮动。

3. CSS选择器的兼容性不同浏览器对CSS选择器的支持程度不同，某些选择器可能无法在所有浏览器中正常工作。

解决方案：选择合适的选择器，或者使用JavaScript来处理特定的选择器。

二、JavaScript兼容性1. DOM操作差异不同浏览器对DOM操作的支持也存在一定差异，例如访问和修改元素的属性、样式、事件处理等。

解决方案：使用现代的方法和属性，如果必须要兼容旧版本的浏览器，可以使用条件注释或特性检测来判断浏览器并采取相应的方式。

2. 事件处理在将事件绑定到元素上时，不同浏览器对事件处理的方式也不同，例如事件监听、事件对象的获取等。

解决方案：使用现代的事件处理方式，例如addEventListener方法，并使用条件注释或特性检测来处理旧版浏览器。

三、响应式设计与移动兼容性1. 媒体查询在响应式设计中，使用媒体查询可以根据不同的屏幕尺寸应用不同的样式。

解决方案：使用CSS3的媒体查询，并提供兼容性样式备用。

2. 移动设备兼容性移动设备上的浏览器可能与桌面浏览器在CSS和JavaScript的支持上存在差异。

解决方案：使用移动优先的设计方法，适当使用前缀生成器和流行的移动端框架如Bootstrap等。

前端八股文面试题

前端八股文面试题1. 请简述 CSS 盒模型及其组成部分。

CSS 盒模型指的是 HTML 元素在视觉上由一个内容区域（Content）、内边距区域（Padding）、边框区域（Border）和外边距区域（Margin）所组成的一个矩形框。

其中，内容区域是元素实际显示内容所在的区域，内边距区域指的是内容区域和边框之间的距离，边框区域是元素的边框，外边距区域指的是边框和相邻元素之间的距离。

2. 请描述 CSS 选择器的优先级。

CSS 选择器的优先级是一种用于确定当多个 CSS 规则应用于同一元素时那种规则具有更高优先级的机制。

优先级是由选择器中各部分的组合构成的。

其中，优先级最高的是“!important”声明，其次是行内样式（在元素内部使用 style 属性定义的样式），然后按照样式选择器、类选择器、ID 选择器的顺序比较各自的个数，最后比较通用选择器和继承选择器的个数。

如果优先级相同，则按照样式表中出现的顺序排列。

3. 请解释浮动和清除浮动的概念及实现方式。

浮动是一种常用于布局的 CSS 属性，它指的是元素高度默认为内容高度，左右两侧会自动贴合父容器或之前的浮动元素。

而清除浮动则是为了避免浮动元素对后续元素布局的影响，需要将浮动元素产生的影响消除。

清除浮动可以通过在父元素的末尾添加一个具有 clear 属性样式的空元素（通常为 div），这个空元素就会将父级元素的高度撑起来，避免浮动元素对后续元素的影响。

另外，也可以采用在父元素中添加 overflow:hidden 属性的方式来清除浮动。

4. 请列举至少 5 种盒子布局的属性。

1. display：指定元素的显示方式，常见的包括 block、inline、inline-block、flex、grid 等。

2. position：控制元素的定位方式，常见的包括static、relative、absolute、fixed 等。

3. float：控制元素的浮动方式，常用于元素的左右布局。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1. CSS实现垂直水平居中HTML结构：<div class="wrapper"><div class="content"></div></div>CSS：.wrapper{position:relative;}.content{background-color:#6699FF;width:200px;height:200px;position: absolute; //父元素需要相对定位top: 50%;left: 50%;margin-top:-100px ; //二分之一的height，widthmargin-left: -100px;}2.display有哪些值？说明他们的作用。

block 块类型。

默认宽度为父元素宽度，可设置宽高，换行显示。

none 缺省值。

象行内元素类型一样显示。

inline 行内元素类型。

默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

table 此元素会作为块级表格来显示。

inherit 规定应该从父元素继承display 属性的值。

3.position有哪些值？说明他们的作用。

absolute 生成绝对定位的元素，相对于(static 定位以外的)第一个父元素进行定位。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位(老IE不支持)。

relative 生成相对定位的元素，相对于其正常位置进行定位。

static 默认。

没有定位，元素出现在正常的流中(忽略top, bottom, left, right z-index声明) inherit 从父元素继承position 属性的值。

4.行内元素有哪些？块级元素有哪些？空(void)元素有那些？CSS的盒子模型？行内元素: a、b、span、img、input、strong、select、label、em、button、textarea块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素: 即系没有内容的HTML元素，例如：br、meta、hr、link、input、img盒子模型:1) 在网页中，一个元素占有空间的大小由几个部分构成。

2) 其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。

3) 这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。

4) 4个部分一起构成css中元素盒子模型。

(IE的content部分包含了border和padding)5.CSS引入的方式有哪些? link和@import的区别是?内嵌: 在html文档的head部分直接写入css内联: 即行内样式，直接在html标签里写入对这个标签的css控制外链: 在html文档的head部分添加<link>标签导入: 使用@import导入区别:Link 属于XHTML标签,写在html页面中,与页面同时加载支持使用javascript改变样式无兼容性@import 由css提供,写在CSS页面中,等到页面被加载完再加载不支持CSS2.1以下浏览器不支持6.CSS选择符有哪些?哪些属性可以继承?优先级算法?内联和important哪个优先级高?CSS选择符: ID选择器、类选择器、标签名选择器、后代选择器(派生选择器)、群组选择器除ID选择器外都是可以继承优先级算法: 标签内直接定义(1000) > ID选择器(100) > 类选择器(10) > 标签名选择器(1)(如果权重相同，则最后定义的会起作用，但应避免这种情况出现)内联和important中，important优先级高CSS3新增伪类举例：p:first-of-type p:last-of-type p:only-of-typep:only-child p:nth-child(2) :enabled, :disabled :checked7.CSS清除浮动的几种方法（至少两种）使用带clear属性的空元素clear:both（理论上能清除任何标签，增加无意义的标签）使用CSS的overflow属性overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）使用CSS的:after伪元素(用于非IE浏览器)使用邻接元素处理8.CSS居中（包括水平居中和垂直居中）内联元素居中方案水平居中设置：(1)行内元素设置text-align: center(2)Flex布局设置display: flex; justify-content: center; (灵活运用,支持Chroime，Firefox，IE9+)垂直居中设置：(1)父元素高度确定的单行文本（内联元素）设置height = line-height；(2)父元素高度确定的多行文本（内联元素）方法一：插入table且vertical-align: middle方法二：display: table-cell; vertical-align: middle块级元素居中方案水平居中设置：(1)定宽块状元素设置左右margin值为auto(2)不定宽块状元素一：给该元素设置displa: inine二：父元素position: relative；left: 50% 子元素position: relative；left: 50%；三：在元素外使用表格,该元素写在td内，然后设置margin: auto 垂直居中设置：1使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;2利用position:fixed（absolute）属性，margin: auto3利用display: table-cell属性使内容垂直居中;4使用css3的新属性transform: translate(x,y)属性;5使用:before元素;9.css盒模型，可能会要求手写一个布局，这个布局基本上用到的css是margin的负值，boxing-sizing：border-box，布局尽量往这方面想。

浏览器布局的基本元素是盒，在w3c的标准模式下，width=width，但是在怪异模式下，width=border*2+padding*2+width其中后代元素的width:100% 参照的是右边的那个width。

10.px和em的区别px和em都是长度单位px的值是固定的，指定是多少就是多少，较易计算。

em得值是非固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。

所以未经调整的浏览器都符合: 1em=16px, 0.75em=12px, 0.625em=10px11.CSS3 box-sizing的作用设置CSS盒模型为标准模型或IE模型。

标准模型的宽度只包括content，二IE模型包括border和paddingbox-sizing属性可以为三个值之一：content-box，默认值，border和padding不计算入width之内padding-box，padding计算入width内border-box，border和padding计算入width之内12.如何快速合并雪碧图Gulp：gulp-css-spriterwebpack：optimize-css-assets-webpack-pluginGo！Png在线工具13.响应式图片(1)JS或者服务端硬编码，resize事件，判断屏幕大小加载不同的图片(2)img srcset 方法(3)picture标签-> source(4)svg(5)第三方库polyfill14.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}15.描述css reset的作用和用途。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一16.页面重构怎么操作？编写CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

17.解释css sprites，如何使用。

Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量18.浏览器标准模式和怪异模式之间的区别是什么?盒子模型渲染模式的不同使用patMode 可显示为什么模式19.absolute的containing block计算方式跟正常流有什么不同？20.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？21.BFC相关问题块级格式化上下文(Block formatting context)是一个独立的渲染区域，只有Block-level box 参与它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干BFC的渲染规则BFC这个元素的垂直方向的边距会发生重叠BFC的区域不会与浮动元素的box重叠（清除浮动原理）BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来它里面的元素也不会影响外面的元素计算BFC的高度的时候，浮动元素也会参与计算如何创建BFC？overflow属性不为visiblefloat属性不为noneposition属性为absolute或fixeddisplay属性为inline-block、table-cell、table-caption、flex、inline-flex BFC的常用场景: 解决边距重叠21.如何优化图像、图像格式的区别？重要性: 节省带宽, 对于同时访问该网站的用户, 还是网站运营本身来说, 都将减少开销选择图像文件格式应该在透明度、色深、压缩率三者之间权衡:如颜色色彩丰富且无需透明度支持, 选择jgp。

如需透明度支持, 首先排除jpg有损压缩与无损压缩无损压缩是对文件本身的压缩, 是对文件的数据存储方式进行优化, 文件可以完全还原, 不影响文件内容有损压缩是对图像本身的改变, 在保存图像时保留了较多的亮度信息, 而将色相和色纯度的信息和周围的像素进行合并, 由于信息量减少了, 所以压缩比可以很高, 图像质量也会相应的下降。