总结
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
12、点击高亮我们需要清除高亮，如何完成？【考核知识点：移动端特殊样式解决方案】
15、flex弹性盒布局与传统盒模型布局的区别和优点？【考核知识点：flex布局和弹性布局】
16、Flex布局哪些属性失效。【考核知识点：flex属性】
17、知道的网页制作会用到的图片格式有哪些。【考核知识点：图片格式】
20、sass 、less 是什么？大家为什么要使用他们?【考核知识点：scss】
24、什么是响应式设计？响应式设计的基本原理是什么？【考核知识点：响应式概念】
25、设置一个盒子上下左右都居中。【考核知识点：transfrom】
26、怎么实现旋转的三角形【考核知识点：transform】
28、TranslateZ与perspective的区别，以及transform-style的作用及用法
30、简述左手法则沿X轴和Y轴旋转。【考核知识点：左手法则】
34、怎么让Chrome支持小于12px 的文字？【考核知识点：transform】
35、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。【考核知识点：overflow】
36、什么叫优雅降级和渐进增强【考核知识点：渐进增强，优雅降级】
37、请解释一下CSS3的Flexbox【考核知识点：flex布局】
38、弹性盒中的缩放机制是怎样的？【考核知识点：flex布局】
44、iphone及ipad下输入框默认内阴影如何去掉？【考核知识点：兼容性处理】
47、bootstrap如何实现响应式布局【考核知识点：bootstrap】
48、Sass 变量可以存储以下信息。什么是Sass。【考核知识点：sass介绍】
1、HTML5****的新特性？
1.语法更简单
2.标签的语义化
3.语法更宽松
4.多设备跨平台
5.自适应网页设计
2、Html5新增的语义化标签。【考核知识点：语义化标签】
3、列举属性选择器。【考核知识点：属性选择器】
E[att] 选择具有att属性的E元素
E[att=“val”] 选择具有att属性且属性值为val的E元素
E[att^=“val”] 选择具有att属性且属性值以val开头的E元素
E[att$=“val”] 选择具有att属性且属性值以val结尾的E元素
E[att*=“val”] 选择具有att属性且属性值中包含val的E元素
4、列举伪类选择器。【考核知识点：伪类选择器】
:first-child 匹配父元素中的第一个子元素
:last-child 匹配父元素中的最后一个子元素
:nth-child(n) 匹配父元素中的第几个子元素
:first-of-type 指定类型E的第一个
:last–of-type 指定类型E的最后一个
:nth–of-type(n) 指定类型E的第n个
li:nth-child(-n + 4 )选中前四个元素
5、nth-child()和nth-of-type()的区别【考核知识点：伪类选择器】
nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nth-of-type 选择指定类型的元素
****6、********Transition动画的属性值。【****考核知识点：transition】
transition-property 过渡属性名
transition-duration 过渡时间
transition-timing-function 过渡的形式
transition-delay 延迟时间
比如：transition:width 1s linear 1s;
7、分别写出浏览器私有前缀并标明浏览器名称。【考核知识点：私有前缀】
-moz-:代表火狐浏览器私有属性
-ms-:代表ie浏览器私有属性
-webkit-:代表苹果、谷歌私有属性
-o-:代表欧朋私有属性
46****、Sass嵌套的规则是什么。【考核知识点：sass嵌套】****
选择器嵌套、属性嵌套、伪类嵌套、群组选择器嵌套
8、Transform的属性值。【考核知识点：transform】
transform:移动 旋转 缩放;
transform:translate rotate scale;
9、Animation的属性值。（5个左右）********【考核知识点：animation】
animation-name： 检索或设置对象所应用的动画名称
animation-duration： 检索或设置对象动画的持续时间
animation-timing-function： 检索或设置对象动画的过渡类型
animation-delay： 检索或设置对象动画延迟的时间
animation-iteration-count： 检索或设置对象动画的循环次数
animation-direction： 检索或设置对象动画在循环中是否反向运动
animation-fill-mode： 检索或设置对象动画时间之外的状态
****animation-play-state： 检索或设置对象动画的状态。****w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式。
如何实现让动画分步播放？：**** animation-timing-function: steps(步数)********；
animation-play-state****: running | paused**** 属性必须单独写，不能与********animation其他属性写在一起
动画的运动类型有几种？
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
10、视口标签及属性及属性值？【考核知识点：视口】
11、决定CSS3盒模型的属性及属性值是？【考核知识点：CSS3盒模型】
box-sizing： border-box； 怪异盒模型： 设置的width和height 是 内容 + 内边距 + 边框 的值
content-box； 标准盒模型 设置的width和height 是 内容区域的大小
12、点击高亮我们需要清除高亮，如何完成？【考核知识点：移动端特殊样式解决方案】
-webkit-tap-hightlight-color: transparent;
13、什么是flex布局。【考核知识点：flex布局概念】
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大 的 灵活性。 任何一个容器都可以指定为 Flex 布局。
14、Flex父项常见属性。【考核知识点：flex属性】
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items： 设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
15、flex弹性盒布局与传统盒模型布局的区别和优点？【考核知识点：flex布局和弹性布局】
区别：
1. 普通盒模型中的子元素分配其父元素的空间，而弹性盒模型中的子元素分配其父元素的可用空间。
2. 普通盒模型主要针对块级元素和行级元素的布局，而弹性盒是建立在弹性流上，也就是元素可以随着可视区域的变化而呈现流式布局。
弹性盒的优点：
能为盒模型提供最大的灵活性，即使是不定宽高的元素依然好用，可以简便、完整、响应式地实现各种页面布局。
传统布局的特点：兼容性好、布局繁琐、局限性，不能在移动端很好的布局
16、Flex布局哪些属性失效。【考核知识点：flex属性】
****设为 Flex 布局以后，****子元素的float、clear和vertical-align属性将失效。
17、知道的网页制作会用到的图片格式有哪些。【考核知识点：图片格式】
png-8，png-24，jpeg，gif，svg Webp
WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
18、什么是rem。【考核知识点：rem】
rem是一个相对单位，rem的是相对于html元素的字体大小，没********有继承性
****em是一个相对单位，是相对于父元素字体大小，有继承性。****px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。
19、什么是媒体查询。【考核知识点：媒体查询】
媒体查询是CSS3新语法。
使用 媒体查********询，可以针对不同的媒体类型定义不同的样式
媒体查询********可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染 页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
- 媒体查询语法规范。【考核知识点：媒体查询】
@media screen and|not|only (media feature) {
CSS-Code;
}
a********nd 表示且 和的意思 not 表示否 非 only 表示仅仅只有
20、sass 、less 是什么？大家为什么要使用他们?【考核知识点：scss】
sass和less都是 CSS 预处理器，最终编译成 CSS；
使用sass/less的好处：
结构清晰，便于扩展
可以方便地屏蔽浏览器私有语法差异
可以轻松实现多重继承
21、什么是视口【考核知识点：viewport】
在pc端中，视口指的是在pc端中浏览器的可视区域；
在移动端中，它涉及3个视口：1是布局视口，2是视觉视口，3是理想视口
移动端指的视口就是布局视口。
22、如何理解透视？【考核知识点：3D透视】
1. 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
2. 实际上模仿人类的视觉位置，可视为安排一直眼睛去看
3. 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
4. 距离视觉点越近的在电脑平面成像越大，越远成像越小
5. 透视的单位是像素
6. 透视需要写在被视察元素的父盒子上面
23、响应式布局有哪些实现方式？【考核知识点：响应式布局】
1.百分比布局
2.flex布局
3.rem+media(媒体查询)
4.vw+vh
5.使用一些框架（bootstrap）
24、什么是响应式设计？响应式设计的基本原理是什么？【考核知识点：响应式概念】
响应式网站设计****：是一个网站能够兼容多个终端，智能地根据不同设备环境进行相对应的布局****
基本原理****：**** 是通过媒体查询检测不同的设备屏幕尺寸****，设置不同的css样式。 页面头部必须有meta声明的********视口设置****
25、设置一个盒子上下左右都居中。【考核知识点：transfrom】
HTML:
CSS:
div{
width:500px;
height:300px;
border:1px solid;
margin:0 auto;
position:relative;
}
div>p{
width:100px;
height:100px;
background:red;
position: absolute;
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
够兼容多个终端，智能地根据不同********设备环境进行相对应的布局****
基本原理****：**** 是通过媒体查询检测不同的设备屏幕尺寸****，设置不同的css样式。 页面头部必须有meta声明的********视口设置****
25、设置一个盒子上下左右都居中。【考核知识点：transfrom】
HTML:
CSS:
div{
width:500px;
height:300px;
border:1px solid;
margin:0 auto;
position:relative;
}
div>p{
width:100px;
height:100px;
background:red;
position: absolute;
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-PWhUJ6Qe-1715693473365)]
[外链图片转存中…(img-iFh2R1R9-1715693473366)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
