最后前端到底应该怎么学才好?
如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。
不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
(1)传统布局与flex布局
😆温馨提醒😆:
1️⃣ 如果是PC端页面布局,我们还是传统布局;
2️⃣ 如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局;
(2)flex布局初体验
显示效果如下:
1️⃣ 搭建HTML结构
1
2
3
2️⃣ CSS样式
① span 直接给宽度和高度,背景颜色,还有蓝色边框;
② 给 div 只需要添加 “display:flex” 即可;
1️⃣ flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局。
2️⃣ 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
总结flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
😆温馨提醒😆:当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。
(1)常见父项属性
以下由6个属性是对父元素设置的:
-
flex-direction:设置主轴的方向;
-
justify-content:设置主轴上的子元素排列方式;
-
flex-wrap:设置子元素是否换行;
-
align-content:设置侧轴上的子元素的排列方式(多行);
-
align-items:设置侧轴上的子元素排列方式(单行);
-
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap;
(2)flex-direction 设置主轴的方向(重点)
1️⃣ 主轴与侧轴
在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴;
默认主轴方向就是 x 轴方向,水平向右;
默认侧轴方向就是 y 轴方向,水平向下;
2️⃣ 属性值
flex-direction 属性决定主轴的方向(即项目的排列方向)
😆温馨提醒😆:主轴和侧轴是会变化的,就看 flex-direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。
| 属性值 | 说明 |
| — | — |
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
(3)justify-content 设置主轴上的子元素排列方式(重点)
justify-content 属性定义了项目在主轴上的对齐方式;
😆温馨提醒😆:使用这个属性之前一定要确定好主轴是哪个。
| 属性值 | 说明 |
| — | — |
| flex-start | 默认值 从头部开始 如果主轴是x轴,则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐(如果主轴是x轴则 水平居中) |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间(重要) |
(4)flex-wrap 设置子元素是否换行(重点)
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap 设置子元素是否换行,flex布局中默认是不换行的。
| 属性值 | 说明 |
| — | — |
| nowrap | 默认值,不换行 |
| wrap | 换行 |
(5)align-items 设置侧轴上的子元素排列方式(单行 重点)
该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项(单行)的时候使用。
| 属性值 | 说明 |
| — | — |
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中(垂直居中) |
| stretch | 拉伸 (默认值 ) |
(6)align-content 设置侧轴上的子元素的排列方式(多行 重点)
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行),在单行下是没有效果的。
| 属性值 | 说明 |
| — | — |
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头,再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
(7)align-content 和 align-items 区别
1️⃣ align-items 适用于单行情况下,只有上对齐、下对齐、居中和 拉伸;
2️⃣ align-content 适应于换行(多行)的情况下(单行情况下无效),可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值;
3️⃣ 总结就是单行找 align-items 多行找 align-content
(8)flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
代码演示如下:
flex-flow:row wrap;
文末
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总