148道 CSS 与 JavaScript 基础面试题

小咪咪 2022-11-16 05:42 196阅读 0赞

![6e81e1f1ee478bec031967442328ee70.png][]

### 前言： ###

本篇文章主要分享 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;
    }

![d98ec956f7fcd44c2b9112716e3f3557.png][]

1.  一个满屏品字布局如何设计?
2.  CSS 多列等高如何实现？
3.  经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？
4.  li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
5.  为什么要初始化 CSS 样式？
6.  什么是包含块，对于包含块的理解?
7.  CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？
8.  width:auto 和 width:100%的区别
9.  绝对定位元素与非绝对定位元素的百分比计算的区别
10. 简单介绍使用图片 base64 编码的优点和缺点。
11. ‘dsplay’、'position’和’float’的相互关系？
12. margin 重叠问题的理解。
13. 对 BFC 规范（块级格式化上下文：block formatting context）的理解？
14. IFC 是什么？
15. 请解释一下为什么需要清除浮动？清除浮动的方式
16. 使用 clear 属性清除浮动的原理？
17. zoom:1 的清除浮动原理?
18. 移动端的布局用过媒体查询吗？
19. 使用 CSS 预处理器吗？喜欢哪个？
20. CSS 优化、提高性能的方法有哪些？
21. 浏览器是怎样解析 CSS 选择器的？
22. 在网页中应该使用奇数还是偶数的字体？为什么呢？
23. margin 和 padding 分别适合什么场景使用？
24. 抽离样式模块怎么写，说出思路，有无实践经验？
25. 简单说一下 css3 的 all 属性。
26. 为什么不建议使用统配符初始化 css 样式。
27. absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？
28. 对于 hasLayout 的理解？
29. 元素竖向的百分比设定是相对于容器的高度吗？
30. 全屏滚动的原理是什么？用到了 CSS 的哪些属性？
31. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
32. 视差滚动效果，如何给每页做不同的动画？
33. 如何修改 chrome 记住密码后自动填充表单的黄色背景？
34. 怎么让 Chrome 支持小于 12px 的文字？
35. 让页面里的字体变清晰，变细用 CSS 怎么做？
36. font-style 属性中 italic 和 oblique 的区别？
37. 设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？
38. layout viewport、visual viewport 和 ideal viewport 的区别？
39. position:fixed; 在 android 下无效怎么处理？
40. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？
41. 如何让去除 inline-block 元素间间距？
42. 有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。
43. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
44. 浏览器如何判断是否支持 webp 格式图片
45. 什么是 Cookie 隔离？
46. style 标签写在 body 后与 body 前有什么区别？  
    ![a486958b677fe445fed9a45bbea64653.png][]
47. 什么是 CSS 预处理器/后处理器？
48. 阐述一下 CSSSprites
49. 使用 rem 布局的优缺点？
50. 画一条 0.5px 的线
51. transition 和 animation 的区别
52. 什么是首选最小宽度？
53. 为什么 height:100%会无效？
54. min-width/max-width 和 min-height/max-height 属性间的覆盖规则？
55. 内联盒模型基本概念
56. 什么是替换元素？
57. 替换元素的计算规则？
58. content 与替换元素的关系？
59. margin:auto 的填充规则？
60. margin 无效的情形
61. border 的特殊性？
62. 什么是基线和 x-height？
63. line-height 的特殊性？
64. vertical-align 的特殊性？
65. overflow 的特殊性？
66. 无依赖绝对定位是什么？
67. absolute 与 overflow 的关系？
68. clip 裁剪是什么？
69. relative 的特殊性？
70. 什么是层叠上下文？
71. 什么是层叠水平？
72. 元素的层叠顺序？
73. 层叠准则？
74. font-weight 的特殊性？
75. text-indent 的特殊性？
76. letter-spacing 与字符间距？
77. word-spacing 与单词间距？
78. white-space 与换行和空格的控制？
79. 隐藏元素的 background-image 到底加不加载？
80. 如何实现单行／多行文本溢出的省略（…）？
81. 常见的元素隐藏方式？
82. css 实现上下固定中间自适应布局？
83. css 两栏布局的实现？
84. css 三栏布局的实现？
85. 实现一个宽高自适应的正方形
86. 实现一个三角形  
    ![0bc6b3dfec117962b314d8d185d60208.png][]  
    **篇幅有限，只有题目和部分答案，需要资料【[可以点击这里][Link 1]】领取100道 CSS 面试题，JavaScript 基础面试题文档（包含题目和答案）**

> #### JavaScript 基础面试题 ####

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

[6e81e1f1ee478bec031967442328ee70.png]: /images/20221022/3c1eb265accb4e64bcdb0d38b0ec35af.png
[d98ec956f7fcd44c2b9112716e3f3557.png]: /images/20221022/1ecca3adbd0641798a90b5af88f4e811.png
[a486958b677fe445fed9a45bbea64653.png]: /images/20221022/ccb3b63fc473480a81c9f3351834e11a.png
[0bc6b3dfec117962b314d8d185d60208.png]: /images/20221022/3586fc0479c54aba921f4a8c92594d92.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=J7NZsrZv
[f6a65ce0a582d9d2dced5909ce933870.png]: /images/20221022/a0d1b1db2d0c418a9f708a15680604b5.png