10-01 09:11 阅读 87

148道 CSS 与 JavaScript 基础面试题

前言：

本篇文章主要分享 CSS 与 JavaScript 基础面试题。CSS 和 JavaScript 都是前端基础知识，是前端学习中一定要学的内容，也是前端面试中必不可少的内容。

CSS面试题

1. 介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

相关知识点：

有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE盒模型和W3C标准盒模型的区别：

W3C标准盒模型：属性 width，height 只包含内容 content，不包含 border 和 padding
IE盒模型：属性 width，height 包含 content、border 和 padding，指的是 content+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为 content-box，即标准盒模型；

如果将 box-sizing 设为 border-box 则用的是IE盒模型。如果在 ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

2. CSS 选择符有哪些？

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
后代选择器（h1 p）
相邻后代选择器（子）选择器（ul>li）
兄弟选择器（li~a）
相邻兄弟选择器（li+a）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）
伪元素选择器（::before、::after）
通配符选择器（*）

3. ::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。

相关知识点：

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如 :first-line、:first-letter、:before、:after 等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用 ::before，否者，使用 ::after ；
在代码顺序上，::after 生成的内容也比 ::before 生成的内容靠后。
如果按堆栈视角，::after 生成的内容会在 ::before 生成的内容之上。

4. 伪类与伪元素的区别

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

5. CSS 中哪些属性可以继承？

有继承性的属性：

字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust
文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color
表格布局属性
caption-side border-collapse empty-cells
列表属性
list-style-type、list-style-image、list-style-position、list-style
光标属性
cursor
元素可见性
visibility
还有一些不常用的；speak，page，设置嵌套引用的引号类型 quotes 等属性

注意：当一个属性不是继承属性时，可以使用 inherit 关键字指定一个属性应从父元素继承它的值，inherit 关键字用于显式地指定继承性，可用于任何继承性 / 非继承性属性。

6. CSS 优先级算法如何计算？

相关知识点：
CSS的优先级是根据样式声明的特殊性值来判断的。选择器的特殊性值分为四个等级，如下：

标签内选择符x,0,0,0
ID选择符0,x,0,0
class选择符/属性选择符/伪类选择符 0,0,x,0
元素和伪元素选择符0,0,0,x

计算方法：

每个等级的初始值为0
每个等级的叠加为选择器出现的次数相加
不可进位，比如0,99,99,99
依次表示为：0,0,0,0
每个等级计数之间没关联
等级判断从左向右，如果某一位数值相同，则判断下一位数值
如果两个优先级相同，则最后出现的优先级高，!important也适用
通配符选择器的特殊性值为：0,0,0,0
继承样式优先级最低，通配符样式优先级高于继承样式
!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

计算实例：

#demo a{
    color: orange;
}/*特殊性值：0,1,0,1*/

div#demo a{
    color: red;
}/*特殊性值：0,1,0,2*/

注意：

样式应用时，css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。
特殊性值越大的声明优先级越高。
相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）
部分浏览器由于字节溢出问题出现的进位表现不做考虑

7. 关于伪类 LVHA 的解释?

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活
分别对应四种伪类：link、:visited、:hover、:active；

当链接未访问过时：

当鼠标滑过 a 链接时，满足 :link 和 :hover 两种状态，要改变a标签的颜色，就必须将 :hover 伪类在 :link 伪类后面声明；
当鼠标点击激活a链接时，同时满足 :link、:hover、:active 三种状态，要显示a标签激活时的样式（:active），必须将 :active 声明放到 :link 和 :hover 之后。因此得出LVHA这个顺序。

当链接访问过时，情况基本同上，只不过需要将 :link 换成 :visited。

这个顺序能不能变？可以，但也只有 :link 和 :visited 可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

8. CSS3 新增伪类有那些？

elem:nth-child(n) 选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数。
elem:nth-last-child(n) 作用同上，不过是从后开始查找。
elem:last-child 选中最后一个子元素。
elem:only-child 如果elem是父元素下唯一的子元素，则选中之。
elem:nth-of-type(n) 选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。
elem:first-of-type 选中父元素下第一个elem类型元素。
elem:last-of-type 选中父元素下最后一个elem类型元素。
elem:only-of-type 如果父元素下的子元素只有一个elem类型元素，则选中该元素。
elem:empty 选中不包含子元素和内容的elem类型元素。
elem:target 选择当前活动的elem元素。
:not(elem) 选择非elem元素的每个元素。
:enabled 控制表单控件的禁用状态。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

9. 如何居中 div？

水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性

div {
  width: 200px;
  margin: 0 auto;
}

水平居中：利用 text-align:center 实现

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

让绝对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

水平垂直居中一

/*确定容器的宽高宽500高300的层设置层的外边距*/
div{
  position: absolute;/*绝对定位*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin: -150px00-250px;/*外边距为自身宽高的一半*/
  background-color: pink;/*方便看效果*/
}

水平垂直居中二

/*未知容器的宽高，利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

水平垂直居中三

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

水平垂直居中四

/*利用text-align:center和vertical-align:middle属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

10. display 有哪些值？说明他们的作用。

block 块类型，默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。

11. position 的值 relative 和 absolute 定位原点是？

相关知识点：

absolute
生成绝对定位的元素，相对于值不为static的第一个父元素的padding box进行定位，也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。
fixed（老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其元素本身所在正常位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。
inherit
规定从父元素继承position属性的值。

12. CSS3 有哪些新特性？（根据项目回答）

新增各种CSS选择器（:not(.input)：所有class不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
缩放，定位，倾斜，动画，多背景

13. 请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？

相关知识点：
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。

以下6个属性设置在容器上：

flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items 属性，如果没有父元素，则等同于stretch。

14. 用纯 CSS 创建一个三角形的原理是什么？

采用的是相邻边框连接处的均分原理。将元素的宽高设为0，只设置 border，把任意三条边隐藏掉（颜色设为transparent），剩下的就是一个三角形。

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

篇幅有限，只有题目和部分答案，需要资料可以加入裙【953352883】领取100道CSS面试题，JavaScript基础面试题文档（包含题目和答案）

一个满屏品字布局如何设计?
CSS 多列等高如何实现？
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？
li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
为什么要初始化 CSS 样式？
什么是包含块，对于包含块的理解?
CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？
width:auto 和 width:100%的区别
绝对定位元素与非绝对定位元素的百分比计算的区别
简单介绍使用图片 base64 编码的优点和缺点。
'dsplay'、'position'和'float'的相互关系？
margin 重叠问题的理解。
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
IFC 是什么？
请解释一下为什么需要清除浮动？清除浮动的方式
使用 clear 属性清除浮动的原理？
zoom:1 的清除浮动原理?
移动端的布局用过媒体查询吗？
使用 CSS 预处理器吗？喜欢哪个？
CSS 优化、提高性能的方法有哪些？
浏览器是怎样解析 CSS 选择器的？
在网页中应该使用奇数还是偶数的字体？为什么呢？
margin 和 padding 分别适合什么场景使用？
抽离样式模块怎么写，说出思路，有无实践经验？
简单说一下 css3 的 all 属性。
为什么不建议使用统配符初始化 css 样式。
absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？
对于 hasLayout 的理解？
元素竖向的百分比设定是相对于容器的高度吗？
全屏滚动的原理是什么？用到了 CSS 的哪些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
视差滚动效果，如何给每页做不同的动画？
如何修改 chrome 记住密码后自动填充表单的黄色背景？
怎么让 Chrome 支持小于 12px 的文字？
让页面里的字体变清晰，变细用 CSS 怎么做？
font-style 属性中 italic 和 oblique 的区别？
设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？
layout viewport、visual viewport 和 ideal viewport 的区别？
position:fixed; 在 android 下无效怎么处理？
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
如何让去除 inline-block 元素间间距？
有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
浏览器如何判断是否支持 webp 格式图片
什么是 Cookie 隔离？
style 标签写在 body 后与 body 前有什么区别？

什么是 CSS 预处理器/后处理器？
阐述一下 CSSSprites
使用 rem 布局的优缺点？
画一条 0.5px 的线
transition 和 animation 的区别
什么是首选最小宽度？
为什么 height:100%会无效？
min-width/max-width 和 min-height/max-height 属性间的覆盖规则？
内联盒模型基本概念
什么是替换元素？
替换元素的计算规则？
content 与替换元素的关系？
margin:auto 的填充规则？
margin 无效的情形
border 的特殊性？
什么是基线和 x-height？
line-height 的特殊性？
vertical-align 的特殊性？
overflow 的特殊性？
无依赖绝对定位是什么？
absolute 与 overflow 的关系？
clip 裁剪是什么？
relative 的特殊性？
什么是层叠上下文？
什么是层叠水平？
元素的层叠顺序？
层叠准则？
font-weight 的特殊性？
text-indent 的特殊性？
letter-spacing 与字符间距？
word-spacing 与单词间距？
white-space 与换行和空格的控制？
隐藏元素的 background-image 到底加不加载？
如何实现单行／多行文本溢出的省略（...）？
常见的元素隐藏方式？
css 实现上下固定中间自适应布局？
css 两栏布局的实现？
css 三栏布局的实现？
实现一个宽高自适应的正方形
实现一个三角形

JavaScript 基础面试题

介绍JavaScript的基本数据类型
说说写JavaScript的基本规范？
jQuery使用建议
Ajax使用
JavaScript有几种类型的值？你能画一下他们的内存图吗？
栈和堆的区别？
Javascript实现继承的几种方式
Javascript创建对象的几种方式？
Javascript作用链域
谈谈this的理解
eval是做什么的？
什么是window对象? 什么是document对象?
null，undefined的区别？
["1", "2", "3"].map(parseInt) 答案是多少？
关于事件，IE与火狐的事件机制有什么区别？如何阻止冒泡？
什么是闭包（closure），为什么要用它？
javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
如何判断一个对象是否属于某个类？
new操作符具体干了什么呢?
Javascript中，执行时对象查找时，永远不会去查找原型的函数？
对JSON的了解？
JS延迟加载的方式有哪些？
同步和异步的区别?
什么是跨域问题，如何解决跨域问题?
页面编码和被请求的资源编码如果不一致如何处理？
模块化开发怎么做？
AMD、CMD规范区别？
requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）
call和apply
documen.write和 innerHTML的区别
回流与重绘
DOM操作
数组对象有哪些原生方法，列举一下
那些操作会造成内存泄漏
什么是Cookie 隔离？
响应事件
flash和js通过什么类如何交互?
Flash与Ajax各自的优缺点？
有效的javascript变量定义规则
XML与JSON的区别？
HTML与XML的区别？
渐进增强与优雅降级
Web Worker和Web Socket？
JS垃圾回收机制？
web应用从服务器主动推送data到客户端的方式？
如何删除一个cookie？
attribute与property的区别？
Ajax请求的页面历史记录状态问题？

作者:前小小

原文链接:https://www.jianshu.com/p/aaa15ecb6233