前端知识点总结

一、css 布局

浮动

float:left/right/none/inherit
左浮动/右浮动/不浮动/继承父级

float属于不完全脱离文档流，标准文档流指的是 文档流+文本流。
文档流：相当于盒子模型来说的。所以使用float容易造成父级塌陷。
文本流：相对于文字段落讲的。浮动后文字会认同浮动元素占据的区域，围绕他布局。

优点：比较简单，兼容性也比较好。只要清除浮动做的好。
缺点：要做清除浮动，这个处理不好的话，会带来很多问题

清除浮动

1. 在最后一个浮动标签后，新加一个标签，给其设置clear：both；
   优点：通俗易懂，方便
   缺点：添加无意义标签，语义化差
2. 父级添加overflow属性（通过触发BFC方式，实现清除浮动）
   优点：代码简洁
   缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。
3. 使用after伪元素清除浮动 配合BFC

	.content:after{
     
		content:"";
		display:block;
		clear:both;
	}

优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

1. 使用before和after双伪元素清除浮动

	.clearfix:after,.clearfix:before{
     
        content: "";
        display: table;
    }
    .clearfix:after{
     
        clear: both;
    }

优点：代码更简洁

定位

position:static/relative/absolute/fixed/inherit
没有定位/相对正常位置定位/绝对定位(相对于除了没有定位一外的第一个父级元素定位)/根据浏览器窗口定位/继承父级定位

relative：没有脱离文档流，所以元素本身所占的位置会保留。
absolute/fixed：脱离文档流。
定位的时候一般配合：margin/transfrom:translate

优点：简单直接，兼容性好。
缺点：布局脱离文档流，可使用性差

flex布局

dispaly:flex;
// 决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse;
// 换行
flex-wrap: nowrap | wrap | wrap-reverse;
// 横坐标对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
// 纵坐标对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;

盒子模型：不是再是标准盒子模型/也不是ie盒子模型，变成弹性伸缩盒子模型。由弹性容器和弹性子元素组成。

优点：css3为了处理浮动和定位问题出现的，移动端多用flex布局
缺点：缺点是ie8以下不兼容

表格布局

父元素：dispaly:table
子元素：dispaly:table-cell

优点：兼容性好，布局相对简单
缺点：当需要内容高度不一致时并不适应

网格布局

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;

// 块级元素/行内元素
display: grid/inline-grid;
// 每一列的列宽
grid-template-columns
// 每一行的行高
grid-template-rows

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
Grid 布局远比 Flex 布局强大。

功能：

1. 设置网格：块/内
2. 设置网格线，行/列
3. 设置的网格线内容可以通过 重复次数（重复的次数，重复的内容）。倍率。范围。根据浏览器自适应。
4. 设置网格间隔（行/列）
5. grid-template-areas 多个单元格合并
6. 内容填充数据，先行后列 还是先列后行
7. 网格内容和整体的位置
8. 指定每个网格位置/单个网格内容位置

优点：是第一个基于二维方向的布局模块。也是第一个基于网格的原生布局系统
缺点：对低版本浏览器兼容性不好

JS布局

效果：用于数据大屏项目，缩放以及个个比例的窗口
思路：

1. 获取设定的宽高 || dom撑开的宽高。
2. 获取视口宽高
3. dom的宽高设置为设定的宽高 || dom撑开的宽高
4. 宽高比计算：真实视口尺寸 / dom宽高
5. 使用transform:scale(宽，高)设置缩放的宽高比
6. 监听窗口变化：获取dom宽高 和 视口宽高，然后再计算宽高比，之后设置缩放的宽高比。
7. MutationObserver监视对DOM树所做更改：回到步骤6
8. 页面离开后，关闭窗口监听和dom变化监听
   优点：js是图灵完备的语言，更好的监控窗口和dom大小，调整宽高比，这一点是css做不到的。
   缺点：解耦合，dom.style.property性能没有class性能好，操作大量样式，建议使用css

二、css 盒子模型

弹性盒子模型

为了适应不同屏幕和设置，新出了一个，弹性盒模型。由弹性容器和弹性子元素组成。

标准盒模型

margin border pading content 高度宽度就是content

ie盒模型

margin border pading content 高度宽度就是content+padding+border

标准盒模型 VS ie盒模型

标准模型和ie模型计算宽度和高度不一样

转换

box-sizing:content-box/border-box;

三、BFC

BFC："块级格式化上下文"

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。
元素的类型和 display 属性，决定了这个 Box 的类型。

规则

1. 内部的box会在垂直方向，一个接一个的放置。
2. box垂直方向的距离，由margin决定。属于同一个BFC 外边距会折叠。
3. BFC的区域不会与float box重叠。
4. 计算BFC的高度时，浮动元素也参与计算（计算高度会考虑子元素的高度计算）。
5. 容器里面的子元素不会影响到外面的元素。

创建

浮动/定位/overflow:hidden/dispaly 行内快元素。

四、js

获取宽高

• 内联样式：dom.style.width/height
• ie渲染后的：dom.currentStyle.width/height
• 谷歌/火狐选然后的：window.getComputedStyle(dom).width/height
• dom.getBoundingClientRect.width/height

for in / for of

for…in 对象的键名，不能获得键值
for…of 允许遍历获得键值

forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效
for…of 循环可以与break、continue 和 return 配合使用，跳出循环

forEach / map

forEach 没有返回值
有返回值，可以return 出来

for / forEach /map

只谈性能，显然是 for > forEach > map
因为：map 会返回一个等长数组，forEach 不会，所以 forEach 大于 map。
需要将数组按照某种规则映射为另一个数组，就应该用 map。
需要进行简单的遍历，用 forEach 或者 for of。
需要对迭代器进行遍历，用 for of.
需要过滤出符合条件的项，用 filter.
需要先按照规则映射为新数组，再根据条件过滤，那就用一个== map 加一个 filter==。
不要担心这样会慢，你那点数据量浏览器根本不 care。
如果你真的需要考虑性能，或者有 break 的需求，就用 for 吧。

为什么 sass 变量 可以被 js使用

使用方法

webpack：

// webpack.config.js
module.exports = {
     
  module: {
     
    rules: [
      {
     
        test: /\.scss$/,
        exclude:[path.resolve(__dirname, '../node_modules')],
        oneOf: [
          // 这里匹配 `