前言
大家好我是没钱的君子下流坯，用自己的话解释自己的知识
前端行业下坡路，甚至可说前端已死，我还想在前段行业在干下去，所以从新开始储备自己的知识。
从CSS——>Javascript——>VUE2——>Vuex、VueRouter、webpack——>VUE3——>pinia、Vite把前端基本的从新顺一遍，找出自己的不足。再去把一些组件给仔细研究一些自己以前没有发现的细节使用方法。
希望大家都能找到自己的出路。
1.什么是BFC？有什么用？
1.BFC就是一个独立的容器，一个独立的布局环境块级元素，在BFC内部的元素布局和外部互不影响。独立的容器内随便布局和容器外不相干。
2.可以解决浮动元素让其父元素高度坍塌的问题，解决没有浮动的元素被浮动元素遮盖的问题。
3.根据上面可以指导会触发BFC的方式就是给元素设置了float，position，overflow，要是再细说就是position中的属性absolute，fixed和oveflow的属性auto、scrool、hidden会触发。
2.什么事BFC、IFC、GFC、FFC
1.BFC块级格式上下文，一个独立的布局环境，内部元素与外部元素互不影响。
2.IFC行内格式化上下文，把一块区域以行内元素的形式来格式化。
3.GFC网格布局格式化上下文，把一块区域以grid网格的形式格式化。
4.FFC弹性格式化上下文，把一块区域以弹性盒的形式来格式化。
可以通过 B有一块地，I种了一行，G用网占了一片，F弹了弹手说我可以变形。
3.flex布局的使用
容器有以下属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。
- flex-direction属性决定主轴的方向；
- flex-wrap属性定义，如果一条轴线排不下，如何换行；
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
- justify-content属性定义了项目在主轴上的对齐方式。
- align-items属性定义项目在交叉轴上如何对齐。
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
项目（子元素）也有一些属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
4.让一个div水平垂直居中
方法很多种概括为这里只说宽高不固定的方法
1.定位+margin
element.style {
position: absolute;
left: 50%;
top: 50%;
margin:0 auto;
background: yellow;
z-index: 1;
}
2.定位+translated3d
element.style {
position: absolute;
left: 50%;
top: 50%;
background: yellow;
z-index: 1;
transform: translate3d(-50%,-50%,0);
}
5.opacity: 0、visibility: hidden、display: none三者的区别
opacity:0;把元素设置成透明消失在页面上，没有从页面上删除，
只是内容看不到了，所占的区域依然还占据空间，并且元素可以点击
visibility: hidden;让元素的内容不可见，没有从页面上删除，所占的区域依然还占据空间，元素不可以点击
display: none;让元素从页面上消失，把元素从页面上删除了，元素不再占用空间，元素不可点击。
其中display: none;最消耗性能，造成回档回流，就是向上挤因为不占用空间了。visibility: hidden;opacity:0;性能消耗少，因为不会从页面删除，占据空间。
6.去修改img的宽度方法
CSS 方法
- max-width:300px; 覆盖其样式
- transform: scale(0.625) 按比例缩放图片；
- 利用 CSS 动画的样式优先级高于 !important 的特性
JS 方法
- document.getElementsByTagName(“img”)[0].setAttribute(“style”,“width:300px!important;”)
7.解决多行文本溢出的方法
css方法
单行文本
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行文本
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //行数 overflow: hidden;
js方法实现(很少用)
- 使用split + 正则表达式将单词与单个文字切割出来存入words
- 加上 ‘…’
- 判断scrollHeight与clientHeight，超出的话就从words中pop一个出来
8.粘性布局的使用(sticky)
position：sticky；这是css3新增的属性，在屏幕范围时钙元素的位置并不受到定位的影响也就是说设置是top、left等属性无效，但是当该元素的位置将要溢出偏移范围时，定位会变成fixed根据设置的left、top等属性成固定位置的效果。
这个很难解释，需要自己去看视频讲解
sticky 属性值有以下几个特点：
- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。
9.space-between 和 space-around 的区别？
这个是 flex 布局的内容，其实就是一个边距的区别，按水平布局来说，
space-between是两端对齐，在左右两侧没有边距，而space-around是每个 子项目左右方向的 margin 相等，所以两个item中间的间距会比较大。
图是我借用的网上的
10.transition和 animation的使用
transition 过渡动画：
- transition-property：指定过渡的 CSS 属性
- transition-duration：指定过渡所需的完成时间
- transition-timing-function：指定过渡函数
- transition-delay：指定过渡的延迟时间
animation 关键帧动画：
- animation-name：指定要绑定到选择器的关键帧的名称
- animation-duration：动画指定需要多少秒或毫秒完成
- animation-timing-function：设置动画将如何完成一个周期
- animation-delay：设置动画在启动前的延迟间隔
- animation-iteration-count：定义动画的播放次数
- animation-direction：指定是否应该轮流反向播放动画
- animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
- animation-play-state：指定动画是否正在运行或已暂停
