对应的前端知识总结归纳（常被问到的知识）

本篇分为若干的版块，如

  • html版块，
  • css版块，
  • js版块，
  • es版块，
  • react等框架版块（我用的是react，主要介绍react），
  • webpack等打包工具的版块，后端node版块，
  • 封装接口ajax版块，
  • 实操场景问题的处理
  • 其他
    其中css占比较大，其次是js和es的知识，都比较琐碎。框架和后端的知识占比少，但是一般都是大知识点，系统性问题。

首先来看看HTML版块

这个版块包含的知识不太多，在项目代码量里通常占比1%左右，常敲代码很容易达到熟练甚至精通的。重点关注HTML5的知识，经常搞点新花样。那我们来总结下相关知识。

常用的学习网站：

  • HTML5菜鸟教程
  • W3Cschool
  • B站搜黑马教程（黑马培训机构的pink老师讲的，还有他讲的CSS、JS也是很好的）

知识归纳：

  • 兼容性：凡是提到兼容性，主要考虑IE浏览器。IE9以后开始支持部分HTML5属性，其他浏览器都支持。
  • 新特性：（你知道哪些？用过哪些？）
    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对本地离线存储的更好的支持
    • 新的特殊内容元素，比如 article、footer、header、nav、section
    • 新的表单控件，比如 calendar、date、time、email、url、search
  • Doctype的作用是什么？严格模式与混杂模式如何区分？它们有何意义？
    • Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
    • 严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行
    • 混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面
  • 对HTML语义化标签的理解
    • HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签
  • link标签和import标签的区别
    • link属于html标签，而@import是css提供的
    • 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载
    • link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
    • link方式样式的权重高于@import的
  • 讲一下块元素和行元素，行内块元素
    • 块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
    • 行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失
    • 行内块元素：不自动换行，从左到右排列在一行，可以设置宽高。

CSS&CSS3版块

常用的学习网站：

  • CSS3菜鸟教程
  • W3C

知识总结：

  • 如何画一个三角形。通过边框border来处理。
<!DOCTYPE HTML>
<html lang="zh-CN">
 <head>
  <title>三角形制作</title>
  <meta charset="UTF-8" />
  <style>
   .point {
    width: 0px;
    height: 0px;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid pink;
     }
  </style>
 </head>
 <body>
  <div class="point">
  </div>
 </body>
</html>
  • 说一下css盒模型
    • 盒模型，就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型
    • 标准盒子模型的盒子宽度：就是内容的宽度，包括左右border+左右padding+width
    • 在IE盒子模型中，width表示content+padding+border这三个部分的宽度
    • 在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型
    • box-sizing:padding-box,这个属性值的宽度包含了左右padding+width
  • 画一条0.5px的线
    • 写这个有很多方法，但是需要特别注意的是在不同浏览器上的显示问题，在web端和移动端显示也会不同。
  • CSS3新属性
    • CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。
  • 谈谈Flex布局
    • https://www.runoob.com/css3/css3-flexbox.html
  • 垂直居中的方法，尽可能多写
    • 父元素固定宽高，利用定位及设置子元素margin值为自身的一半
    • 父元素固定宽高，子元素设置position: absolute，margin：auto平均分配margin
    • css3属性transform。子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可
    • 弹性布局display: flex。设置align-items: center; justify-content: center
    • line-height
  • 关于js动画和css3动画的差异性
    • 功能涵盖面，js比css大
    • 实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
    • 对帧速表现不好的低版本浏览器，css3可以做到自然降级
    • css动画有天然事件支持
    • css3有兼容性问题
  • visibility=hidden, opacity=0, display=none，三者有何区别
    • opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
  • 双边距重叠问题
    • 多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠
    • 折叠的结果为：
      • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
      • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
      • 两个外边距一正一负时，折叠结果是两者的相加的和。
  • position属性比较
    • 固定定位fixed：
      • 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。
    • 相对定位relative：
      • 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
    • 绝对定位absolute：
      • 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。 、
    • 默认定位Static：
      • 默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。
  • 清除浮动的方法参考
    • 为什么要清除浮动
      • 清除浮动主要是为了解决在不给定父盒子高度的情况下，子盒子浮动引起的父盒子内部高度为0的问题。
      • 正常情况下 即子盒子不浮动，父盒子里包含的子盒子，不给定父盒子高度值，子盒子也会把父盒子撑开，让父盒子包裹住子盒子
      • 子盒子浮动的情况下，父盒子不给定高度值，父盒子高度就变成0，子盒子从父盒子里浮动出来，脱离了父盒子。
    • 方法一：使用带clear属性的空元素
      • 在最后一个浮动元素后使用一个空元素如<div class="clear"> </div>，并在CSS中赋予.clear {clear:both;}属性即可清理浮动。
    • 方法二：使用CSS的overflow属性
      • 给浮动元素的父盒子添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
    • 方法三：使用CSS的:after伪元素
    • 方法四：实用css的:before和:after双伪元素
  • css选择器有哪些，优先级排序怎么排？
    • 选择器类型
      • 标签选择器： 如 p {...}
      • 伪元素选择器：如p:before {content: ...}，p:after {content: ...}
      • 类选择器： 如 <div class='hi'></div>在css中写 .hi {...}
      • 伪类选择器： 如a:link, a:visited, a:hover, a:active, a:focus
      • id选择器： 如 <div id='hi'></div>在css中写 #hi {...}
    • 其他选择器
      • 根据以上选择器的排列组合，又衍生出若干个选择器
      • 后代选择器，如p span { }。p标签内的所有span标签
      • 子代选择器，如p>span。p标签里的第一个span标签
      • 相邻兄弟选择器，如p+h3，挨着p标签后面的一个h3标签
      • 通用兄弟选择器，如div~p，div标签后的所有p标签
      • 群组选择器，如p, h3, .hi, #ha
      • 属性选择器，如 <a href='', title=''></a>，[title] {...}。
      • 通用选择器，如*p，指的是所有p标签
    • 选择器的优先级
      • !important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器
      • 对应的权重分别是10000、1000、100、10、1
  • 如何实现图片在某个容器中上下左右居中摆放？
    • 方法一：给父盒子添加padding，并用box-sizing: border-box;保持盒子大小
      • padding: （父盒子的高-子盒子的高）/2 （父盒子的宽-子盒子的宽）/2; box-sizing: border-box;
    • 方法二：给子盒子添加margin属性
      • margin: （父盒子的高-子盒子的高）/2 （父盒子的宽-子盒子的宽）/2;
    • 方法三：line-height+父盒子padding-left+box-sizing
    • 方法四：line-height+子盒子margin：auto
    • 方法五：css3属性transform。子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);
    • 方法六：给父盒子设置属性。display: flex; align-items: center; justify-content: center;
    • 方法七： 将父元素设置成display: table, 子元素设置为单元格 display: table-cell
  • 怎么让子盒子上下左右居中？
    • 参考上面的问题，但是方法三和方法四只适用于子盒子是行元素或行内块元素。
  • float的元素，它的display的属性是什么？
    • display: block;
  • 隐藏页面中某个元素的方法有哪些
    • display:none;
    • visibility:hidden;
    • opacity: 0;
    • position移到外部，
    • z-index涂层遮盖等等
  • 三栏布局的实现方式，尽可能多写。浮动布局时，三个div的生成顺序有没有影响？
posted @ 2020-12-30 09:01  CNBlackICE  阅读(252)  评论(0)  编辑  收藏  举报