二.css3 常见面试题

1 CSS3 有哪些新特性？

• RGBA 和透明度
• background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
• word-wrap（对长的不可分割单词换行）word-wrap：break-word
• 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
• font-face 属性：定义自己的字体
• 圆角（边框半径）：border-radius 属性用于创建圆角
• 边框图片：border-image: url(border.png) 30 30 round
• 盒阴影：box-shadow: 10px 10px 5px #888888
• 媒体查询：定义两套 css，当浏览器的尺寸变化时会采用不同的属性

2 请解释一下 CSS3 的 flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

3 视差滚动效果？

• 视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的 3D 效果。
• CSS3 实现
  • 优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
• jQuery 实现
  • 通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
  • 优点：能兼容到各个版本的，效果可控性好
  • 缺点：开发起来对制作者要求高
• 插件实现方式
  • 例如：parallax-scrolling，兼容性十分好

4 ::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用

• 单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。
• ::before 就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于 dom 之中，只存在在页面之中。
• :before 和 :after 这两个伪元素，是在 CSS2.1 里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着 Web 的进化，在 CSS3 的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after