18 行内元素float:left后是否变为块级元素？
行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的
19 在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数字号相对更容易和 web 设计的其他部分构成比例关系
20 ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这两个伪元素的作用
单冒号( : )用于 CSS3 伪类，双冒号( :: )用于 CSS3 伪元素
用于区分伪类和伪元素
21 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
22 CSS合并方法
避免使用 @import 引入多个 css文件，可以使用 CSS 工具将 CSS 合并为一个 CSS 文件，例如使用 Sass\Compass 等
23 CSS不同选择器的权重(CSS层叠的规则)
！important 规则最重要，⼤于其它规则行内样式规则，加 1000
对于选择器中给定的各个 ID 属性值，加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
对于选择其中给定的各个元素标签选择器，加1
如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则
24 列出你所知道可以改变页面布局的属性
position 、 display 、 float 、 width 、 height 、 margin 、 padding 、top 、 left 、 right 、
25 CSS在性能优化方面的实践
css 压缩与合并、 Gzip 压缩
css文件放在 head 里、不要用 @import
尽量用缩写、避免用滤镜、合理使用选择器
26 CSS3动画（简单动画的实现，如旋转等）
依靠 CSS3 中提出的三个属性： transition 、 transform 、 animation
transition ：定义了元素在变化过程中是怎么样的，包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。
transform ：定义元素的变化结果，包含 rotate 、 scale 、 skew 、 translate 。
animation ：动画定义了动作的每⼀帧（ @keyframes ）有什么效果，包括animationname ， animation-duration 、 animation-timing-function 、 animationdelay 、 animation-iteration-count 、 animation-direction
27 base64的原理及优缺点
优点可以加密，减少了 HTTTP 请求
缺点是需要消耗 CPU 进行编解码
28 几种常见的CSS布局
流体布局
.left {
float: left;
width: 100px;
height: 200px;
background: red;
}
.right {
float: right;
width: 200px;
height: 200px;
background: blue;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background: green;
}
圣杯布局
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height:300px;
background: green;
}
.left {
position: relative;
left: -120px;
float: left;
height: 300px;
width: 100px;
margin-left: -100%;
background: red;
}
.right {
position: relative;
right: -220px;
float: right;
height: 300px;
width: 200px;
margin-left: -200px;
background: blue;
} <
div class=“container”>
双飞翼布局
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background: green;
}
.main::after {
content: ‘’;
display: block;
font-size:0;
height: 0;
zoom: 1;
clear: both;
}
.left {
float:left;
height: 200px;
width: 100px;
margin-left: -100%;
background: red;
}
.right {
float: right;
height: 200px;
width: 200px;
margin-left: -200px;
background: blue;
} <
div class=“content”>
29 stylus/sass/less区别
1.均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
2.Scss 和 LESS 语法较为严谨， LESS 要求一定要使用大括号“{}”， Scss 和 Stylus 可以通过缩进表示层次与嵌套关系
3.Scss 无全局变量的概念， LESS 和 Stylus 有类似于其它语言的作用域概念
4.Sass 是基于 Ruby 语言的，而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译；
30 postcss的作用
1.可以直观的理解为：它就是⼀个平台。为什么说它是一个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让⼀些插件在它上面跑，那么将会很强大
2.PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树
3.通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的 CSS ，比如热门的： autoprefixer
4.postcss 可以对sass处理过后的 css 再处理 最常见的就是 autoprefixer
下集预告：JavaScript部分
=================
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
ES6
-
列举常用的ES6特性：
-
箭头函数需要注意哪些地方？
-
let、const、var
-
拓展：var方式定义的变量有什么样的bug？
-
Set数据结构
-
拓展：数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别？
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题：
最后
pp哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别？
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题：
最后
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
4188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
