html、CSS、javaScript | 前端面试题总结

Canivores
160 阅读5分钟

html、CSS、javaScript | 前端面试题总结

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

  1. 行内元素 块级元素 空元素
  • 行内元素：span、img、input
  • 块级元素：div、nav、header、main、aside、footer、article、p、h1...h6...
  • 空元素：br、hr
  1. 元素之间的转换问题：
  • display: inline; 把某元素转换成了行内元素 ===>不独占一行的，并且不能设置宽高
  • display: inline-block; 把某元素转换成了行内块元素 ===>不独占一行的，可以设置宽高
  • display: block; 把某元素转换成了块元素 ===>独占一行，并且可以设置宽高
  1. link与@import的区别：
  • 区别一：link先有，后有@import（兼容性link比@import兼容）；
  • 区别二：加载顺序差别，浏览器先加载的标签link，后加载@import
  1. title与h1的区别：

title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么; h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么 区别：

  • title他是显示在网页标题上、h1是显示在网页内容上

  • title比h1添加的重要 (title > h1 ) ==》对于seo的了解 场景： 网站的logo都是用h1标签包裹的

  1. b与strong的区别：

b：实体标签，用来给文字加粗的。 strong：逻辑标签，用来加强字符语气的。 区别：

  • b标签只有加粗的样式，没有实际含义。
  • strong表示标签内字符比较重要，用以强调的。
  1. css选择符
  • 通配（*）
  • d选择器（#）
  • 类选择器（.）
  • 标签选择器（div、p、h1...）
  • 相邻选择器(+)
  • 后代选择器(ul li)
  • 子元素选择器（ > ）
  • 属性选择器(a[href])
  1. 隐藏元素的方法有哪些
  • 使用display: none; 隐藏dom；
  • 使用visibility: hidden; 隐藏dom；
  1. css属性优先级

！important >内联样式（1000）>id(100)>class(10)>标签(1)>通配(0)

  1. 高度塌陷解决方法

产生原因：父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法再撑起父元素的高度，也就会导致父元素的高度塌陷

方法一：开启父元素的 BFC(Block Formatting Context)

  • 设置元素浮动(一般不用)；

  • 设置元素绝对定位(一般不用)；

  • 设置元素类型为inline-block；（一般不用）

  • 设置overflow为一个非默认值。一般都是夫标签使用overflow: hidden来开启BFC（注意这个方法只是解决了float导致的高度塌陷，对position导致的高度塌陷无效）；

方法二：在塌陷的父标签的最后添加一个空白的div，然后对该div进行清除浮动 方法三（最常用）：使用after伪类，向父元素后添加一个块元素，并对其清除浮动

  1. relative和absolute区别

    a）relative

    • 当元素开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化（这里注意，不仅仅是位置）
    • 相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）
    • 相对定位会提升元素的层级（表现为可以覆盖其他元素）
    • 相对定位不会改变元素的性质：块还是块，行内还是行内
    • 相对定位不会脱离文档流
    • 坐标原点在元素本来的位置

    b）absolute

    • 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
    • 开启绝对定位后，元素会从文档流中脱离
    • 绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
    • 绝对定位会使元素提升一个层级
    • 绝对定位元素是相对于其包含块进行定位的（与相对定位不同）
  1. JavaScript基本数据类型

Number、String、Boolean、Null、Undefined

  1. JavaScript的基本规范？
  • 不要在同一行声明多个变量
  • 使用 == 或!==来比较true/false或者数值
  • switch必须带有default分支
  • 函数应该有返回值
  • for if else 必须使用大括号
  • 语句结束加分号
  • 命名要有意义，使用驼峰命名法
  1. JavaScript作用域链（Scope Chain）

当代码在一个环境中执行时，都会创建一个作用域链。 作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。

整个作用域链的本质是一个指向变量对象的指针列表。作用域链的最前端，始终是当前正在执行的代码所在环境的变量对象。

  1. 什么是window对象? 什么是document对象?
  • window对象代表浏览器中打开的一个窗口。
  • document对象代表整个html文档。
  • 实际上，document对象是window对象的一个属性。
  1. null，undefined的区别？
  • undefined表示一个声明的变量未初始化，转为数值是NAN
  • null表示一个变量被定义了，但是存放了空指针，转为数据是0
  1. 如何判断一个对象是否属于一个类

if(a instanceof Person){aler('yes');}

  1. this的含义

解析器在调用函数每次都会向函数内部传递进─个隐含的参数

  • 这个隐含的参数就是this， this指向的是一个对象，

  • 这个对象我们称为函数执行的上下文对象

  • 根据函数的调用方式的不同，this会指向不同的对象

    • 以函数的形式调用时， this永远都是window
    • 以方法的形式调用时，this就是调用方法的那个对象
avatar
文章
阅读
粉丝