【前端面试题】04—33道基础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）。

• p:first- of-type，选择属于其父元素的首个<p>元素的每个<p>元素。

• p:last-of-type，选择属于其父元素的最后一个<p>元素的每个<p>元素。

• p:only- of-type，选择属于其父元素的唯一<p>元素的每个<p>元素。

• p:only- child，选择属于其父元素的唯一子元素的每个<p>元素。

• p:nth- child（2），选择属于其父元素的第二个子元素的每个<p>元素。

• :enabled:disabled，控制表单控件的禁用状态.

• :checked，单选框或复选框被选中。

<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；   }}

本文完~