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

时间：2021-01-04 10:32:56 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：两种通用绑定导致绝对定位布局负数 reac 使用

本篇分为若干的版块，如

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的生成顺序有没有影响？

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

标签：两种通用绑定导致绝对定位布局负数 reac 使用

原文地址：https://www.cnblogs.com/hacke14/p/14209723.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

首先来看看HTML版块

CSS&CSS3版块

首先来看看`HTML版块`

`CSS&CSS3版块`