33道基础CSS3面试题(附答案)

前端面试题11个月前更新 admin
1,592 0

伴随着大量让人欣喜的功能加入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>元素的每个<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,单选框或复选框被选中。

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

本文完~

© 版权声明

相关文章

暂无评论

暂无评论...