计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
属性值以及说明:
row:从左到右;(默认值)
row-reverse从右到左;(反方向)
column:从上到下;
column:从下到上;
代码如下(示例):
1
2
3
默认的效果图:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* Y轴为主轴 */
flex-direction: column;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
Y轴的效果图:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
flex-direction: row-reverse;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
看数字,注意盒子顺序发生了变化,效果图如下:
justify-content属性定义了项目在主轴上的对齐方式。
-
flex-start:默认值从头部开始,如果主轴是x轴,则从左往右;
-
flex-end:从尾部开始排列;
-
center:在主轴居中对齐(如果主轴是x轴则水平居中)
-
space-around:平分剩余空间;
-
space-between:先两边贴边,再平分剩余空间(重要)
代码如下(示例):
1
2
3
4
先两边贴边,再平分剩余空间的效果图如下:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 平分剩余空间 */
justify-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
平分剩余空间的效果图:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 在主轴居中对齐 */
justify-content: center;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
在主轴居中对齐的效果图:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 从尾部开始排列 */
justify-content: center;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
注意看数字,从尾部开始排列的效果图:
默认情况下,项目都排在一条线(又称“轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的。
-
nowrap:默认值,不换行;
-
wrap:换行。
代码如下(示例):
1
2
3
4
5
在不换行的情况下,盒子的宽度会自动缩小以便于一行可以放下所有盒子,默认不换行的效果图:
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-wrap: wrap;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
margin: 10px;
}
换行的效果图:
该属性是控制子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。
-
flex-start:默认值在侧轴的头部开始排列;
-
flex-end:在侧轴的尾部开始排列;
-
center:在侧轴中间显示;
-
space-around:子项在侧轴平分剩余空间;
-
space-between:子项在侧轴先分布在两头,再平分剩余空间;
-
stretch:设置子项元素高度平分元素高度;
代码如下(示例):
1
2
3
4
5
6
多行居中的效果:
文末
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。