共计 6144 个字符，预计需要花费 16 分钟才能阅读完成。
-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;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
26、怎么实现旋转的三角形【考核知识点：transform】
27、渐变都有哪些渐变【考核知识点：渐变】
线性渐变（Linear Gradients）
径向渐变（Radial Gradients）
repeating-linear-gradient() 函数用于重复线性渐变
repeating-radial-gradient() 函数用于重复径向渐变：
28、TranslateZ 与 perspective 的区别，以及transform-style 的作用及用法
perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小。
有多个子元素时，给各个子元素设置各自的 translateZ 可以实现不同的 3D 效果。
一、transform-style 的作用及用法：
代码写给父级，但是影响的是子盒子，控制子元素是否开启三维立体环境。
transform-style: flat 代表子元素不开启 3D 立体空间，默认的
transform-style: preserve-3d 子元素开启立体空间
29、3D的特点？
近大远小
物体和面遮挡不可见
30、简述左手法则沿 X 轴和 Y 轴旋转。【考核知识点：左手法则】
X 轴：左手的大拇指指向 x 轴的正方向，其余手指的弯曲方向就是该元素沿着 x 轴旋转的正方向。
Y 轴：左手的大拇指指向 y 轴的正方向，其余手指的弯曲方向就是该元素沿着 y 轴旋转的正方向。
31、简述三维坐标系。【考核知识点：三维坐标系】
x 轴：水平向右 注意：x 右边是正值，左边是负值
y 轴：垂直向下 注意：y 下面是正值，上面是负值
z 轴：垂直屏幕 注意：往外面是正值，往里面是负值
32、背景缩放属性及属性值。【考核知识点：背景缩放】
background-size：背景图片宽度 背景图片高度；
33、传统盒子模型宽度计算。【考核知识点：CSS3 盒模型】
盒子的宽度 =CSS 中设置的 width+border+padding
34、怎么让 Chrome 支持小于 12px 的文字？【考核知识点：transform】
主要是 使用 transform********: scale****(倍数 ) ( 该属性对行内元素无效)****
比如 p{font-size:10px;-webkit-transform:scale(0.8);} //0.8 是缩放比例
35、实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。【考核知识点：overflow】
完全兼容 CSS 代码，可以方便地应用到老项目中
36、什么叫优雅降级和渐进增强【考核知识点：渐进增强，优雅降级】
渐进增强：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
37、请解释一下 CSS3 的 Flexbox【考核知识点：flex 布局】
一个用于页面布局的全新 CSS3 功能，Flexbox 可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称 ” 容器 ”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称 ” 项目 ”。
常规布局是基于块和内联流方向，而 Flex 布局是基于 flex-flow 流可以很方便的用来做局中，能对不同屏幕大小自适应。
38、弹性盒中的缩放机制是怎样的？【考核知识点：flex 布局】
弹性盒中的项目设置 flex-grow 属性定义项目的放大比例，默认值为 0，值越大，放大越厉害，且不支持负值；
而 flex-shrink 属性定义项目的缩小比例，默认值为 1，数值越大，缩小越厉害，同样不支持负值；
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。他的默认值为 auto，也就是项目的本来大小。
注意：它可以设为跟 width 或 height 属性一样的值，比如给具体的像素值，则项目将占据固定空间。
39、Sass 中的媒体指令是什么。【考核知识点：sass】
其实就是 CSS 中的媒介查询 @media，用法和 CSS 一样，只是多了一些扩展功能。
40、媒体查询常见的尺寸。【考核知识点：媒体查询】
@media screen and (min-width:1200px)
@media screen and (min-width:992px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)
41、什么是流动布局。【考核知识点：流动布局】
“ 流动布局 ” 的含义是，各个区块的位置都是浮动的，不是 固定不变的
42. 移动端要那些需要设置哪些东西
meta 标签设置
既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了 95% 以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的 JavaScript 面试题文档，或更多前端资料可以点此处获取。
比较准确的事情，所以在设计按钮或者链接等样式时。
自我介绍一下，小编 13 年上海交大毕业，曾经在小公司待过，也去过华为、OPPO 等大厂，18 年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024 年 Web 前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-evYYEBWV-1712391483913)]
[外链图片转存中…(img-vOWSurbA-1712391483914)]
既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了 95% 以上前端开发知识点，真正体系化！
[外链图片转存中…(img-Ng8SqfqN-1712391483914)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
[外链图片转存中…(img-J9QZugRF-1712391483914)]
[外链图片转存中…(img-3DhIcwmW-1712391483915)]
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的 JavaScript 面试题文档，或更多前端资料可以点此处获取。
原文地址: 2024 最新 css3 面试题理论，前端 css 面试题，移动端面试题理论。
