mkimq

基础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）。

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，单选框或复选框被选中。

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

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

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

解决方案如下。

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

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

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

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

介绍一下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规范解析盒模型。一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3动画的优点是什么？

  • 在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化。
  • 代码相对简单。

CSS3动画的缺点是什么？

  • 在动画控制上不够灵活
  • 兼容性不好。
  • 部分动画功能无法实现

Animation与 Transition的异同是什么？

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

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

Animation属性值有哪些？

  • 两个必要属性如下。

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

  • 其他属性值如下。

    • animation- play-state，即播放状态（ running表示播放， paused表示暂停），可以用来控制动画暂停。
    • animation- timing- function，即动画运动形式。
    • animation- delay，即动画延迟时间。
    • mation-iteration- count，即重复次数。
    • animation-direction，即播放前重置（ alternate动画直接从上一次停止的位置开始执行）。

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

使用方法如下：

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

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

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

rem的原理是什么？

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

如何设置CSS3文本阴影？

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

说一说盒阴影。

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

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

如何为盒子添加蒙版？


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，即蒙版原点位置。

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

使用 backface-visibility:visible | hidden。

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

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

  • transition- property，哪个属性需要实现过渡

  • transition- duration，完成过渡效果需要多少秒/毫秒

  • transition- timing- function，速度效果的运动曲线，如 linear、ease-in、ease、ease-out、 ease-in-out, cube-bezier。

  • transition- delay，规定过渡开始前的延迟时间。

贡献者: mankueng