基础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;
}
jquery框架面试题@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，即蒙版裁剪位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。