CSS面试题（二）

十、你对css-sprites的理解 

    sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。

    CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置

十一、你对媒体查询的理解？

    媒体查询（Media Query）是CSS3新语法。

        1.使用@media查询，可以针对不同的媒体类型定义不同的样式

        2.@media可以针对不同的屏幕尺寸设置不同的样式

        3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

        4.目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询

十二、你对盒模型的理解？

    CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

十三、标准盒模型和怪异盒模型有什么区别？

    1.标准盒模型：标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。

        标准盒大小计算公式：width(content) + padding + border + margin

    2.怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。

        怪异盒大小的计算公式：width(content + padding + border) + margin

十四、谈谈对BFC(Block Formatting Context)的理解？

    Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block formatting context（简称BFC）和 Inline formatting context（简称IFC）。Block formatting context直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相关。通俗地讲，BFC是一个容器，用于管理块级元素。

十五、为什么有时候⼈们⽤translate来改变位置⽽不是定位？

    1.translate（）是transform的一个值。改变transform或者opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

    2.改变绝对定位会触发重新布局，进而触发重绘和复合。

    3.transform使浏览器为元素创建一个GPU。但改变绝对定位会使用到GPU。因此translate（）更高效，可以缩短平滑动画的绘制时间。

    4.translate改变位置时，元素依旧会占据其原始空间，绝对定位不是。

十六、伪类和伪元素的区别是什么？

    1.伪类：用来添加一些选择器的特殊效果。

    2.伪元素：伪元素是用来添加一些选择器的特殊效果。

    3.区别：

        1) 伪元素其实相当于伪造了一个元素，例如before,first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；而伪类没有伪造元素，例如first-child只是给子元素添加样式而已。

        2) 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

十七、你对flex的理解？ 

    1.display: flex; 开启弹性布局

    2.flex: wrap; 是否换行

    用弹性布局让页面更加整洁美观，代码书写更加简洁清晰

十八、关于CSS的动画与过渡问题 

    1.动画animation

        特点：

            1.动画是多个状态之前的改变

            2.动画可以自动执行，不需要事件触发

            3.动画通过 @keyframes 定义关键帧 定义动画

        综合属性：

            CSS

        拆分属性：

            1.animation-name: 引用动画的名字（定义动画的名字）

            2.animation-duration: 动画持续时间

            3.animation-timing-function: 动画函数曲线

            4.animation-delay： 延迟执行

            5.animation-iteration-count： 定义动画的执行次数

                指定动画无限执行：infinite

            6.animation-direction： 定义动画执行的顺序

                1) 取值：alternate 默认值

                2) alternate-reverse 动画先反向执行，然后再正向执行，必须结合 iteration-count 属性一起使用才有效果；动画至少要执行两次

                3) reverse 动画反向执行

            7.animation-fill-mode: 定义动画执行结束后保留的状态

                1) 取值：forword 动画保留终点状态

                2) backwards 默认值，动画保留起点状态

                3) both 动画将遵循forwards 和 backwards 的规则，从而再两个方向上扩展动画属性

    2.过渡transition

        特点：

            1.过渡是两个状态之间的过渡，只能从一种状态过渡到另一种状态

            2.过渡需要事件触发，不能自动执行

        综合属性:

            可以同时控制多个属性进行过渡，多个属性之间用逗号隔开

        拆分属性：

            1.transition-property：

                1) 定义过渡的属性名(样式名称)，比如width height border

                2) 可以具体的样式属性名，也可以使用关键字 all(所有属性共用同样的效果)

            2.transition-duration:

                定义动画持续时间 单位是 秒/s

            3.transition-delay:

                延迟执行，延迟时间，单位是秒/s

            4.transition-timing-function：

                1) 定义动画函数曲线

                2) 取值：

                    ease : 先快后慢

                    ease-in ：越来越快

                    ease-out: 越来越慢

                    ease-in-out：先慢再快再慢

                    liner：匀速直线运动

                    cubic-bezier()：贝赛尔曲线 cubic-bezier(.17,.67,.83,.67)