2021最新css3面试题理论，前端css面试题，移动端面试题理论。

1、HTML5的新特性？

2、Html5新增的语义化标签。【考核知识点：语义化标签】

3、列举属性选择器。【考核知识点：属性选择器】

4、列举伪类选择器。【考核知识点：伪类选择器】

5、nth-child()和nth-of-type()的区别【考核知识点：伪类选择器】

6、Transition动画的属性值。【考核知识点：transition】

7、分别写出浏览器私有前缀并标明浏览器名称。【考核知识点：私有前缀】

8、Transform的属性值。【考核知识点：transform】

9、Animation的属性值。（5个左右）【考核知识点：animation】

10、视口标签及属性及属性值？【考核知识点：视口】

11、决定CSS3盒模型的属性及属性值是？【考核知识点：CSS3盒模型】

12、点击高亮我们需要清除高亮，如何完成？【考核知识点：移动端特殊样式解决方案】

13、什么是flex布局。【考核知识点：flex布局概念】

14、Flex父项常见属性。【考核知识点：flex属性】

15、flex弹性盒布局与传统盒模型布局的区别和优点？【考核知识点：flex布局和弹性布局】

16、Flex布局哪些属性失效。【考核知识点：flex属性】

17、知道的网页制作会用到的图片格式有哪些。【考核知识点：图片格式】

18、什么是rem。【考核知识点：rem】

19、什么是媒体查询。【考核知识点：媒体查询】

20、sass 、less 是什么？大家为什么要使用他们?【考核知识点：scss】

21、什么是视口【考核知识点：viewport】

22、如何理解透视？【考核知识点：3D透视】

23、响应式布局有哪些实现方式？【考核知识点：响应式布局】

24、什么是响应式设计？响应式设计的基本原理是什么？【考核知识点：响应式概念】

25、设置一个盒子上下左右都居中。【考核知识点：transfrom】

26、怎么实现旋转的三角形【考核知识点：transform】

27、渐变都有哪些渐变【考核知识点：渐变】

28、TranslateZ与perspective的区别，以及transform-style的作用及用法

29、3D的特点？

30、简述左手法则沿X轴和Y轴旋转。【考核知识点：左手法则】

31、简述三维坐标系。【考核知识点：三维坐标系】

32、背景缩放属性及属性值。【考核知识点：背景缩放】

33、传统盒子模型宽度计算。【考核知识点：CSS3盒模型】

34、怎么让Chrome支持小于12px 的文字？【考核知识点：transform】

35、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。【考核知识点：overflow】

36、什么叫优雅降级和渐进增强【考核知识点：渐进增强，优雅降级】

37、请解释一下CSS3的Flexbox【考核知识点：flex布局】

38、弹性盒中的缩放机制是怎样的？【考核知识点：flex布局】

39、Sass中的媒体指令是什么。【考核知识点：sass】

40、媒体查询常见的尺寸。【考核知识点：媒体查询】

41、什么是流动布局。【考核知识点：流动布局】

42.移动端要那些需要设置哪些东西

43、移动端和PC端有什么区别？【考核知识点：移动端排版】

44、iphone及ipad下输入框默认内阴影如何去掉？【考核知识点：兼容性处理】

45、哪个属性可以设置为在主轴上的对齐？

46、如何让一个盒子在一个不知道宽高的div中居中？

47、bootstrap如何实现响应式布局【考核知识点：bootstrap】

48、Sass 变量可以存储以下信息。什么是Sass。【考核知识点：sass介绍】

1、HTML5的新特性？

1.语法更简单

2.标签的语义化

3.语法更宽松

4.多设备跨平台

5.自适应网页设计

2、Html5新增的语义化标签。【考核知识点：语义化标签】

<article> 定义文章

<aside> 定义文章的侧边栏

<figure> 一组媒体对象以及文字

<figcaption> 定义 figure 的标题

<footer>定义页脚

<header>定义页眉

<hgroup>定义对网页标题的组合

<nav>定义导航

<section> 定义文档中的区段

<time>定义日期和时间

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、视口标签及属性及属性值？【考核知识点：视口】

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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;

}

and 表示且和的意思 not 表示否非 only 表示仅仅只有

20、sass 、less 是什么？大家为什么要使用他们?【考核知识点：scss】

sass和less都是 CSS 预处理器，最终编译成 CSS；

使用sass/less的好处：

结构清晰，便于扩展

可以方便地屏蔽浏览器私有语法差异

可以轻松实现多重继承

21、什么是视口【考核知识点：viewport】

在pc端中，视口指的是在pc端中浏览器的可视区域；

在移动端中，它涉及3个视口：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">

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:<div><p></p></div>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】

<style>div {position: relative;width: 249px;height: 35px;border: 1px solid #000;}div::after {content: "";position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);transition: all 0.2s;}/* 鼠标经过div ，里面的三角再旋转180deg （45+180=225）*/div:hover::after {transform: rotate(225deg);}</style>

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标签设置

2. 图片适配或采用二倍图和三倍图加媒体查询

3. 媒体查询

4. 使用rem方案

43、移动端和PC端有什么区别？【考核知识点：移动端排版】

1. 界面布局

移动端屏幕相对窄小，一般是单列显示，最多也只能是双列+响应式，但是PC端的屏幕大，布局可以更加灵活。

2. 使用习惯

移动端的操作尺度比较大，单击误差大，所以按钮、链接等元素比较设计的大一些。

而PC端的操作尺度比较小，用鼠标单击是一件比较准确的事情，所以在设计按钮或者链接等样式时。

可以稍微小一些。

3. 网络速度

手机的网络一般是2G\3G\4G\WIFI等，网页的加载速度会影响用户的体验，需要消耗用户的流量，而PC的网络一般是连接宽带或者WIFI，PC端的用户一般不会考虑页面消耗的流量。

4. 技术层面

PC应用更关注的是后台、大数据、算法类的，而移动端更关注的是如何更好地交互和体验。

44、iphone及ipad下输入框默认内阴影如何去掉？【考核知识点：兼容性处理】

element{

-webkit-appearance:none;

}

其次，断点的设定。也就是所谓的终端宽度，根据定义不同的终端的宽度，调整容器，行，列不同的显示效果。一般设定为xs、sm、md、lg。也就是5种显示方式，分别是 12，3，4，6列，不同的宽度下，按照列的不同显示方式，实现响应式布局

45、哪个属性可以设置为在主轴上的对齐？

justify-content：flex-start | flex-end | center | space-between | space-around；

46、如何让一个盒子在一个不知道宽高的div中居中？

将父盒子设置为弹性盒子，然后将主轴和侧轴设置为居中、

47、bootstrap如何实现响应式布局【考核知识点：bootstrap】

首先，bootstrap的栅格系统实际是将一个页面分成了12个格子区域。通过根据终端 设备的不同宽度，设定模块内容所占格子区域的大小多少，来定义模块最终所占空间的 大小。其中将模块分为container容器、row行、column列三个概念，并且必须是容器 包裹行，行包裹列这样的一个层级概念

48、Sass 变量可以存储以下信息。什么是Sass。【考核知识点：sass介绍】

字符串、数字、颜色值、布尔值、列表、null值

Sass 是一个 CSS 预处理器

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等 等特性

Sass 生成良好格式化的 CSS 代码，易于组织和维护

Sass 文件后缀为 .scss