【前端面试题】04—33道基础CSS3面试题

伴随着大量让人欣喜的功能加入HTML5，CSS3也同样为我们带来了更加绚丽的样式效果。

而CSS3面试题主要考察的仍然是那些已经应用在项目中的样式属性，以及应用过程中的一些常见问题，这些知识点是我们要多加关注的地方。

今天我们为大家准备了33道比较基础的CSS3面试题，也便于大家对CSS3有一个大概印象。

1、CSS3有哪些新特性？

CSS3的新特征如下：

圆角（ border- radius）；
阴影（box- shadow）；
对文字加特效（text- shadow）；
线性渐变（ gradient）；
变换（ transform ）如（ transform:rotate（9deg）scale（0.85,0.90）translate（0px, 30px）skew（-9deg,0deg）；// 旋转、缩放、定位、倾斜。
更多的CSS选择器；
多背景设置；
色彩模式，如rgba；
伪元素::selection;
媒体查询；
多栏布局；
图片边框（ border-image）。

2、CSS3新增伪类有哪些？

新增伪类有以下几个：

p:first- of-type，选择属于其父元素的首个元素的每个元素。
p:last-of-type，选择属于其父元素的最后一个元素的每个元素。
p:only- of-type，选择属于其父元素的唯一元素的每个元素。
p:only- child，选择属于其父元素的唯一子元素的每个元素。
p:nth- child（2），选择属于其父元素的第二个子元素的每个元素。
:enabled:disabled，控制表单控件的禁用状态.
:checked，单选框或复选框被选中。

3、first-child与first-of-type的区别是什么？

二者的区别如下：

first-child匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。

first- of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素，并不限制是第一个子元素，只要是该类型元素的第一个即可。当然，这些元素的范围都属于同一级，也就是同辈。

下面给出一段示例代码。

<div><p></p><span></span></div>

p:first-child匹配到p元素，因为p元素是div的第一个子元素。

span:first-child匹配不到span元素，因为span是div的第二个子元素。

p:first-of-type匹配到p元素，因为p是div所有为p的子元素中的第一个。

span:first-of-type匹配到span元素，因为span是div所有为span的子元素中的第一个。

4、当使用 transform:translate属性时会出现闪烁现象，如何解决？

解决方案如下。

-webkit-backface-visibility:hidden;//隐藏转换的元素的背面webkit-transform-style:preserve-3d；//使被转换的元素的子元素保留其3D转换webkit-transtorm:translate3d（0,0,0）；//开启GPU硬件加速模式，使用GPU代替CPU渲染动画

注意：在某些 Android系统中，有时会有莫名其妙的Bug，建议慎重使用。

5、CSS3动画如何在动作结束时保持该状态不变？

采用 animation- fill-mode。其可以设置为以下值。

none，不改变默认行为。
forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards，在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both，向前和向后填充模式都可以应用。

6、用两种方式实现某DⅣ元素以每秒50px的速度左移100X。

方法一，使用 jQuery

$('div‘).animate({'left':100},2000）;

方法二，使用 JavaScript+CSS3

CSS部分如下。

div{ transition:all  2s linear； // linear 规定以相同速度（匀速）开始至结束的过渡效果  }

JavaScript部分如下：

div .style.left =（div. offsetLeft + 100）+'px'；

7、介绍一下box- SIZIng属性。

box-sizing属性主要用来控制元素盒模型的解析模式。默认值是 content-box。

content-box让元素维持W3C的标准盒模型。元素的宽度/高度由 border+ padding+content的宽度/高度决定，设置 width/height属性指的是指定 content部分的宽度/高度。

border-box让元素维持IE传统盒模型（IE6以下版本和IE6、IE7的怪异模式）。设置 width/height属性指的是指定 border+ padding+ content的宽度/高度。

标准浏览器下，按照W3C规范解析盒模型。一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

8、你对 content-box盒模型了解多少？

布局所占宽度（ Width）如下：

Width =width + padding-left + padding-right+ border-left + border-right

布局所占高度（ Height）如下：

Height= height + padding-top + padding-botton + border-top + border-bottom

9、你对 padding-box盒模型了解多少？

布局所占宽度（Width）如下：

Width= width（包含 padding-left+ padding-right)+ border-top+ border-bottom

布局所占高度（ Height）如下：

Height= height（包含 padding-top+ padding-bottom)+ border-top +border-bottom

10、你对 border.-box盒模型了解多少？

布局所占宽度（ Width）如下：

Width= width（包含 padding-left + padding-right +border-left+ border-right)

布局所占高度（ Height）如下：

Height= height（包含 padding-top+ padding-bottom+ border-top +border-bottom）

11、CSS3动画的优点是什么？

优点如下:

（1）在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化。

（2）代码相对简单。

12、CSS3动画的缺点是什么？

缺点如下:

（1）在动画控制上不够灵活

（2）兼容性不好。

（3）部分动画功能无法实现

13、Animation与 Transition的异同是什么？

Animation与 Transition的功能相同，都是通过改变元素的属性值来实现动画效果的。它们的区别在于，使用 Transition的功能时只能用指定属性的开始值和结束值，然后在这两个属性值之间使用平滑过渡的方式实现动画效果，因此不能实现比较复杂的动画效果。

Animation功能通过定义多个关键帧，以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

14、Animation属性值有哪些？

两个必要属性如下。

animation-name，即动画名称。
animation- duration，即动画持续时间。

其他属性值如下。

animation- play-state，即播放状态（ running表示播放， paused表示暂停），可以用来控制动画暂停。

animation- timing- function，即动画运动形式。
animation- delay，即动画延迟时间。
mation-iteration- count，即重复次数。
animation-direction，即播放前重置（ alternate动画直接从上一次停止的位置开始执行）。

15、媒体查询的使用方法是什么？

使用方法如下：

@media媒体类型and（媒体特性）{样式规则}

这通常在移动端使用。在做移动端开发的时候，为了适配多屏幕，使用rem单位，然后根据屏幕尺寸的改变动态地设置根节点HIML的font-size值。这样可以解决多屏幕适配的问题。

html{font-size：20px;} @media （min-width：320px） {html {font-size：12px；}}@media （min-width：360px）{html{font-size：16px；}}

但是这种做法有两个缺点。

（1）适配屏幕的尺寸不是连续的。

（2）会在CSS文件中添加大段的查询代码，增加了CSS文件的大小，为改进上述缺点，可以使用 JavaScript获取移动设备屏幕的宽度，根据设计稿的原型尺寸，动态地计算font-size的值。

16、rem的原理是什么？

在做响应式布局的时候，通过调整HTML的字体大小，页面上所有使用rem单位的元素都会做相应的调整。

17、如何设置CSS3文本阴影？

h1{text- shadow：水平阴影，垂直阴影，模糊距离，阴影颜色}

18、如何把元素从左侧移动50像素，从顶端移动100像素？

具体代码如下：

div{ transform:translate（50px,100px）；-ms-transform:translate（50px, 100px）；/*IE9*/-webkit-trans form:translate（50px, 100px）；  /*Safari 和 Chrome */-o-trans form:translate（50px, 100px）；/*opera*/-moz-transform:translate（50px, 100px）；/* Firefox */

19、如何把一个元素旋转30°？

具体代码如下。

div{ transform:rotate（30deg）；-ms-transfornm:rotate （30deg）；/*IE9*/-webkit-transform:rotate（30deg）；/* Safar1和 Chrome*/-o-transform:rotate（30deg）；/* opera*/-moz-transform:rotate（30deg）；/*Firefox*/

20、如何使用matx0将di元素旋转30°？

具体代码如下。

div{ transform:matrix（0.866,0.5，-0.5,0.866,0,0）；-ms-transform:matrix(0.866,0,5=0,5,0,866,0,0);   /*IE9*/-moz-trans form:matrix(0. 866,0.5，-05,0.866,0,0);  /*Firefox */-o-transform:matrix(0.866,0.5，-0,5,0.866,0,0);  /*Opera*/

21、如何利用CSS3制作淡入淡出的动画效果？

具体步骤如下

（1）定义动画关键帧，名称为 fadeIn

@-webkit-keyframes fadeIn { from {opacity：0；/*初始状态，透明度为0*/ }to { opacity：1；/*结尾状态，透明度为1*/}}@-webkit-keyframes fadeout { from { opacity：1；/*初始状态，透明度为1*/} to{ opacity：0；/*结尾状态，透明度为0*/}}

（2）为div增加如下动画代码。

div{-webkit- animation-name:fadeIn；/*动画名称*/- webkit- animation-duration：3s；/*动画持续时间*/- webkit- animation-iteration- count：1；/*动画次数*/- webkit- animation- delay：0s；/*延迟时间*/

22、说一说盒阴影。

盒阴影的语法结构与文本阴影类似，如box- shadow：5px 5px 5px rgba（255，15，255，0.5）。

但是，盒阴影多了一个属性，即外延值 inset.，如box- -shadow：5px 5px 25px rgba（0,0,255，0.5）inset。

23、如何为盒子添加蒙版？

代码如下。

demo {height：144px ；width：144px；background:url（logo.png）；-webkit-mask-image:url（shadow.png）；-webkit-mask-position：50%  50%；-webkit-mask-repeat:no-repeat；

蒙版复合属性的语法是- webkit-mask:url（ pro_pho_show_pic.png）50% 50% no- repeat。

蒙版相关属性如下。

-webkit-mask-clip，即蒙版裁剪位置。
-webkit-mask- origin，即蒙版原点位置。

24、如何通过CSS3实现背景颜色线性渐变？

具体代码如下：

div{background：-webkit-linear-gradient （left, red, green 50%， blue）；}

25、如何实现CSS3倒影？

通过-webkit-box-reflect设置方向、距离。

方向可以设置为 below、 above、left、 right。

下面给出一段示例代码

.demo {height：144px；width：144px；background:url （logo. png）； -webkit-box-reflect:below 10px； }

26、当元素不面向屏幕时其可见性如何定义？

使用 backface-visibility:visible | hidden。

27、CSS3中 transition属性值及含义是什么？

transition属性是一个简写属性，用于设置以下4个过渡属性。

transition- property，哪个属性需要实现过渡
transition- duration，完成过渡效果需要多少秒/毫秒
transition- timing- function，速度效果的运动曲线，如 linear、ease-in、ease、ease-out、 ease-in-out, cube-bezier。
transition- delay，规定过渡开始前的延迟时间。

28、如何相对于内容框定义图像？

具体代码如下。

.demo{height：200px；width：200px；padding：50px；border: 1px solid #ccc；background-image: url（'logo. png'）；background-repeat: no-repeat；background-position: left top；background-origin: content-box;}

语法为 background- origin:padding- box | border- box |content-box。

29、background-clip和 background- origin的区别是什么？

background-clip规定背景（包括背景颜色和背景图片）的绘制区域它有3种属性，分别是 border-box、 padding-box、 content-box。

border-box，即背景从边框开始绘制。
padding-box，即背景在边框内部绘制。
content-box，即背景从内容部分绘制。
background- origin，规定背景图片的定位区域。

它也有3种属性：border-box, padding-box, content--box。但要注意，它描述的是“背景图片”。也就是说，它只能对背景做样式上的操作。一旦规定了图片开始绘制的区域，就当于规定图片的左上角从什么地方开始，其他的它就不负责了。

30、为了把文本分隔为4列并使两列之间间隔30像素，应该如何实现？

具体代码如下：

div{-moz-column-count：3；/* Firefox /-webkit-column-count：3；/* Safari和 Chrome*/ column-count：3；-moz-column-gap：40px；/*Firefox*/ -webkit- column-gap：40px；/* Safar1和 Chrome*/ column-gap：40px；width：600px；

31、如何用省略号显示超出文本的内容？

使用text-overflow:ellopsis。

当文本溢出时，为了不显示省略标记（…），通过clip直接将溢出的部分裁剪掉。

32、如何实现文本换行？

使用word-wrap属性。

normal，只在允许的断字点换行（浏览器保持默认处理）。
break-word，在长单词或URL地址内部进行换行。

33、说明如何用@ keyframes使dv元素移动200像素。

具体代码如下：

div{ width：100px； height：50px；background:#f30；animation:move 3s；}@keyframes move{from{margin-left:0px；}to {margin-left:200px；   }}

【前端面试题】04—33道基础CSS3面试题相关推荐

【前端面试题】04—33道基础CSS3面试题(附答案)
伴随着大量让人欣喜的功能加入HTML5,CSS3也同样为我们带来了更加绚丽的样式效果. 而CSS3面试题主要考察的仍然是那些已经应用在项目中的样式属性,以及应用过程中的一些常见问题,这些知识点是我们要 ...
【2022最新Java面试宝典】—— Java异常面试题（33道含答案）
目录一.Java异常架构与异常关键字 1. Java异常简介 2. Java异常架构 1.Throwable 2. Error(错误) 3. Exception(异常) 运行时异常编译时异常 3. ...
面试前赶紧看了5道Python Web面试题，Python面试题No17
目录本面试题题库,由公号:非本科程序员整理发布第1题: Flask中的请求上下文和应用上下文是什么? 第2题:django中间件的使用? 第3题: django开发中数据做过什么优化? 第4题: ...
大学计算机应用基础模拟试题,《大学计算机应用基础》模拟试题.doc
<大学计算机应用基础>模拟试题 <计算机应用基础>模拟试题1 一.选择题(每空1分,共30分).从下列每题提供的A.B.C.D供选择的答案中,选出一个正确的答案,填在对应的( ...
40 道基础Dubbo 面试题及答案
转载自?40 道 Dubbo 面试题及答案想往高处走,怎么能不懂 Dubbo? Dubbo是国内最出名的分布式服务框架,也是 Java 程序员必备的必会的框架之一.Dubbo 更是中高级面试过程中经 ...
计算机应用基础试题300,《计算机应用基础》考试试题(300道附答案)
计算机应用基础试题及答案 (200道选择,100道填空) 一.选择题: 1. 在计算机应用中,"计算机辅助设计"的英文缩写为___________. A. CAD B. CAM C ...
【面试题】3000+道JAVA高级面试题
一.参考资料 marion-notes: 学习笔记整理思路1. 学习路线2. 教学视频3. 电子书籍4. 博客文章5. 思维导图6. 开源源码 - Gitee.com
【2022最新Java面试宝典】—— Java虚拟机（JVM）面试题（51道含答案）
目录一.Java内存模型 1. 我们开发人员编写的Java代码是怎么让电脑认识的 2. 为什么说java是跨平台语言 3. Jdk和Jre和JVM的区别 4. 说一下 JVM由那些部分组成,运行流程 ...
【2022最新Java面试宝典】—— Java并发编程面试题（123道含答案）
目录一.基础知识 1. 为什么要使用并发编程 2. 多线程应用场景 3. 并发编程有什么缺点 4. 并发编程三个必要因素是什么? 5. Java 程序中怎么保证多线程的运行安全? 6. 并行和并发有 ...

【前端面试题】04—33道基础CSS3面试题

【前端面试题】04—33道基础CSS3面试题相关推荐

最新文章

热门文章