/**
- Add the correct font weight in Chrome, Edge, and Safari.在Chrome、Edge和Safari中添加正确的字体粗细
*/
b,
strong {
font-weight: bolder;
}
/**
-
- Correct the inheritance and scaling of font size in all browsers.修正所有浏览器中字体大小的继承和缩放。
-
- Correct the odd
emfont sizing in all browsers.纠正所有浏览器中奇怪的’ em '字体大小
- Correct the odd
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
- Add the correct font size in all browsers.在所有浏览器中添加正确的字体大小。
*/
small {
font-size: 80%;
}
/**
- Prevent
subandsupelements from affecting the line height in all browsers.
*防止’ sub ‘和’ sup '元素影响所有浏览器中的行高。
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
- Remove the border on images inside links in IE 10.在IE 10中删除链接内图像的边框。
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
-
- Change the font styles in all browsers. 更改所有浏览器中的字体样式。
-
- Remove the margin in Firefox and Safari. 删除Firefox和Safari中的空白。
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
-
Show the overflow in IE. IE显示溢出。
-
- Show the overflow in Edge.在边缘显示溢出。
*/
button,
input { /* 1 */
overflow: visible;
}
/**
-
Remove the inheritance of text transform in Edge, Firefox, and IE.在Edge、Firefox和IE中移除文本转换的继承。
-
- Remove the inheritance of text transform in Firefox.在Firefox中删除文本转换的继承。
*/
button,
select { /* 1 */
text-transform: none;
}
/**
- Correct the inability to style clickable types in iOS and Safari.修正了在iOS和Safari中无法样式化可点击类型的问题。
*/
button,
[type=“submit”] {
-webkit-appearance: button;
}
/**
- Remove the inner border and padding in Firefox.删除Firefox中的内边框和填充。
*/
button::-moz-focus-inner,
[type=“submit”]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
- Restore the focus styles unset by the previous rule.恢复先前规则未设置的焦点样式。
*/
button:-moz-focusring,
[type=“submit”]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
- Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
-
- Correct the text wrapping in Edge and IE.修正边缘和IE中的文本包装。
-
- Correct the color inheritance from
fieldsetelements in IE.修正了IE中’ fieldset '元素的颜色继承。
- Correct the color inheritance from
-
- Remove the padding so developers are not caught out when they zero out
fieldsetelements in all browsers.
- Remove the padding so developers are not caught out when they zero out
去掉填充，这样当开发者在所有浏览器中归零“fieldset”元素时就不会被发现。
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
- Add the correct vertical alignment in Chrome, Firefox, and Opera.在Chrome、Firefox和Opera中添加正确的垂直对齐
*/
progress {
vertical-align: baseline;
}
/**
- Remove the default vertical scrollbar in IE 10+.：删除IE 10+中默认的垂直滚动条。
*/
textarea {
overflow: auto;
}
/**
-
- Add the correct box sizing in IE 10.1. 在IE 10中添加正确的框大小。
-
- Remove the padding in IE 10.2. 移除IE 10中的填充。
*/
[type=“checkbox”],
[type=“radio”] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
- Correct the cursor style of increment and decrement buttons in Chrome.修正了Chrome中递增和递减按钮的光标样式。
*/
type=“number”::-webkit-outer-spin-button {
height: auto;
}
/**
-
- Correct the odd appearance in Chrome and Safari.修正Chrome和Safari中奇怪的外观。
-
- Correct the outline style in Safari.修正Safari中的轮廓样式
*/
[type=“search”] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
- Remove the inner padding in Chrome and Safari on macOS.在macOS上移除Chrome和Safari的内填充。
*/
[type=“search”]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
-
- Correct the inability to style clickable types in iOS and Safari.修正了在iOS和Safari中无法样式化可点击类型的问题。
-
- Change font properties to
inheritin Safari.在Safari中更改字体属性为“inherit”。
- Change font properties to
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
- Add the correct display in Edge, IE 10+, and Firefox.在Edge、IE 10+和Firefox中添加正确的显示。
*/
details {
display: block;
}
/*
- Add the correct display in all browsers.在所有浏览器中添加正确的显示。
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
- Add the correct display in IE 10+.在ie10 +中添加正确的显示。
*/
template {
display: none;
}
/**
- Add the correct display in IE 10.在ie10中添加正确的显示。
*/
[hidden] {
display: none;
}
3 CSS3 盒子模型box-sizing
-
传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
-
`CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding
也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了
4.特殊样式
/CSS3盒子模型/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/点击高亮我们需要清除清除 设置为transparent 完成透明/
-webkit-tap-highlight-color: transparent;
/在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/
-webkit-appearance: none;
/禁用长按页面时的弹出菜单//ios上独有/
img,a { -webkit-touch-callout: none; }
移动端技术选型
1. 单独制作移动端页面（主流）
-
流式布局（百分比布局）
-
flex 弹性布局（强烈推荐）
-
less+rem+媒体查询布局
-
混合布局
2.响应式页面兼容移动端（其次）
-
媒体查询
-
bootstarp
-
流式布局，就是百分比布局，也称非固定像素布局。
-
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
-
流式布局方式是移动web开发使用的比较常见的布局方式
-
max-width 最大宽度 （max-height 最大高度）
-
min-width 最小宽度 （min-height 最小高度）
1.技术选型
-
方案：我们采取单独制作移动页面方案
-
技术：布局采取流式布局
2. 搭建相关文件夹结构
3.设置视口标签以及引入初始化样式
<meta name=“viewport” content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
4. 常用初始化样式
body {
margin: 0 auto;
min-width: 320px;
max-width: 640px;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}
/点击高亮我们需要清除清除 设置为transparent 完成透明/
- {
-webkit-tap-highlight-color: transparent;
}
/在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/
input {
-webkit-appearance: none;
}
/禁用长按页面时的弹出菜单/
img,
a {
-webkit-touch-callout: none;
}
a {
color: #666;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
}
div {
/* css3 盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.clearfix:after {
content: “”;
display: block;
line-height: 0;
visibility: hidden;
height: 0;
clear: both;
}
1.flex布局体验
1.1 传统布局与flex布局
传统布局
-
兼容性好
-
布局繁琐
-
局限性，不能再移动端很好的布局
flex 弹性布局
-
操作方便，布局极为简单，移动端应用很广泛
-
PC 端浏览器支持情况较差
-
IE 11或更低版本，不支持或仅部分支持
建议：
-
如果是PC端页面布局，我们还是传统布局。
-
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
1.2 初体验
1
2
3
2. flex布局原理
1 布局原理
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局
-
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
-
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
-
体验中 div 就是 flex父容器。
-
体验中 span 就是 子容器 flex项目
-
子容器可以横向排列也可以纵向排列
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-85Ph4D1E-1647853059074)(C:/Users/lightofd/AppData/Roaming/Typora/typora-user-images/image-20220319090424025.png)]
3.常见父项属性
-
flex-direction：设置主轴的方向
-
justify-content：设置主轴上的子元素排列方式
-
flex-rap：设置子元素是否换行
-
align-content：设置侧轴上的子元素的排列方式（多行）
-
align-items：设置侧轴上的子元素排列方式（单行）
-
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
-
flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面
1).flex-direction 属性决定主轴的方向（即项目的排列方向）
注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
| 属性值 | 说明 |
| — | — |
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
2)justify-content 设置主轴上的子元素排列方式
- justify-content 属性定义了项目在主轴上的对齐方式
注意： 使用这个属性之前一定要确定好主轴是哪个
| 属性值 | 说明 |
| — | — |
| flex-start | 默认值 从头部开始 如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴则 水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间（重要） |
3)flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的
| 属性值 | 说明 |
| — | — |
| nowrap | 默认值，不换行 |
| wrap | 换行 |
4)align-items 设置侧轴上的子元素排列方式（单行 ）
- 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
| 属性值 | 说明 |
| — | — |
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stretch | 拉伸 （默认值 ） 使用stretch子盒子不要给侧轴长度， |
5)align-content 设置侧轴上的子元素的排列方式（多行）
- 设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。
|属性值 |说明|
|–|–|
|flex-start |默认值在侧轴的头部开始排列|
|flex-end |在侧轴的尾部开始排列|
|center |在侧轴中间显示|
|space-around| 子项在侧轴平分剩余空间|
|space-between |子项在侧轴先分布在两头，再平分剩余空间|
|stretch |设置子项元素高度（侧轴长度）平分父元素高度|
6)flex-flow
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-flow: column wrap;
4.flex布局子项常见属性
-
flex 子项目占的份数
-
align-self 控制子项自己在侧轴的排列方式
-
order属性定义子项的排列顺序（前后顺序）
1).flex
-
flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
-
参与分配盒子其长度失效，被计入到剩余空间内
.item {
flex: ; /* default 0 */
}
2).align-self 控制子项自己在侧轴上的排列方式
-
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
-
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
3). order 属性定义项目的排列顺序
- 数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。
.item {
order: ;
}
1. 技术选型
-
方案：我们采取单独制作移动页面方案
-
技术：布局采取flex布局
2. 搭建相关文件夹结构
3. 设置视口标签以及引入初始化样式
<meta name=“viewport” content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
… 与 京东移动端首页制作类似
4.常用初始化样式
body {
width: 100%;
min-width: 320px;
max-width: 540px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, “Lucida Grande”, Verdana, “Microsoft Yahei”, STXihei, hei;
color: #000;
background-color: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
/点击高亮我们需要清除清除 设置为transparent 完成透明/
- {
-webkit-tap-highlight-color: transparent;
}
/在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/
input {
-webkit-appearance: none;
outline: none;
}
/禁用长按页面时的弹出菜单/
img,
a {
-webkit-touch-callout: none;
}
a {
color: #000;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
}
div {
/* css3 盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.clearfix:after {
content: “”;
display: block;
line-height: 0;
visibility: hidden;
height: 0;
clear: both;
}
5. 常见模块命名
6.常见flex布局思路
background: linear-gradient(起始方向, 颜色1, 颜色2, …);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);
背景渐变必须添加浏览器私有前缀
起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top
1.rem 基础
rem 单位
-
rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
-
不同的是rem的基准是相对于html元素的字体大小。
-
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
-
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小
-
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
2.媒体查询
1)什么是媒体查询
媒体查询（Media Query）是CSS3新语法。
-
使用 @media 查询，可以针对不同的媒体类型定义不同的样式
-
@media 可以针对不同的屏幕尺寸设置不同的样式
-
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
-
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
2)语法规范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
-
用 @media 开头 注意@符号
-
mediatype 媒体类型
-
关键字 and not only
-
media feature 媒体特性 必须有小括号包含
mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
| 值 | 解释说明 |
| — | — |
| all | 用于所有设备 |
| print | 用于打印机和打印预览 |
| scree | 用于电脑屏幕，平板电脑，智能手机等 |
关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
-
and：可以将多个媒体特性连接到一起，相当于“且”的意思。
-
not：排除某个媒体类型，相当于“非”的意思，可以省略。
-
only：指定某个特定的媒体类型，可以省略。
媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号包含
| 值 | 解释说明 |
| — | — |
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
3)案例
媒体查询修改背景颜色
4)媒体查询+rem实现元素变化
5) 引入资源（理解）
-
当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。
-
原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
语法规范
示例
3.less
1)维护 css 的弊端
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
-
CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
-
不方便维护及扩展，不利于复用。
-
CSS 没有很好的计算能力
-
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
2)Less 介绍
-
Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。
-
做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性。
-
它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。
-
Less中文网址： http://lesscss.cn/
-
常见的CSS预处理器：Sass、Less、Stylus
Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性。
3)Less 安装（注意如果使用vscode无需安装less）
-
安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/
-
检查是否安装成功，使用cmd命令（win10 是 window +r 打开 运行输入cmd） — 输入
node –v查看版本即可 -
基于nodejs在线安装Less，使用cmd命令“ npm install -g less ”即可
-
检查是否安装成功，使用cmd命令
lessc -v查看版本即可
4)Less使用
我们首先新建一个后缀名为less的文件， 在这个less文件里面书写less语句
-
Less 变量
-
Less 编译
-
Less 嵌套
-
Less 运算
5) Less 变量
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值;
1. 变量命名规范
-
必须有@为前缀
-
不能包含特殊字符
-
不能以数字开头
-
大小写敏感
2.变量使用规范
//直接使用
body{
color:@color;
}
a:hover{
color:@color;
}
6)Less编译
-
本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
-
所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。
vocode Less 插件
-
Easy LESS 插件用来把less文件编译为css文件
-
安装完毕插件，重新加载下 vscode。
-
只要保存一下Less文件，会自动生成CSS文件
7)Less嵌套
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1. less嵌套 子元素的样式直接写到父元素里面就好了
a {
color: red;
// 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
&:hover {
color: blue;
}
}
}
//css 写法
#header .logo {
width: 300px;
}
//转化为Less嵌套
#header {
.logo {
width: 300px;
}
}
//如果遇见 （交集|伪类|伪元素选择器）
//内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
//如果有 & 符号，它就被解析为父元素自身或父元素的伪类
//& 与选择器之间不要加空格
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
8)Less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算
在less中可以进行加减乘除的运算
一般只有一个数带单位就行
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
//& 与选择器之间不要加空格
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
8)Less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算
在less中可以进行加减乘除的运算
一般只有一个数带单位就行
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-FM423NT0-1712273926299)]
[外链图片转存中…(img-RdxNtpMS-1712273926300)]
[外链图片转存中…(img-VZw9ZaCV-1712273926300)]
[外链图片转存中…(img-eBhn7fSh-1712273926300)]
[外链图片转存中…(img-qsO3OXgQ-1712273926301)]
[外链图片转存中…(img-2yE6wlk0-1712273926301)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-qFRBYiFS-1712273926301)]
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
