1、rgba() 和 opacity 的透明效果有什么不同？
opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
2、css 属性 content 有什么作用？
content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式
3、请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？
Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局
4、css垂直居中的方法有哪些？
1）如果是单行文本, line-height 设置成和 height 值
.text{height: 100px; line-height: 100px; }
2）已知高度的块级子元素，采用绝对定位和负边距
.container { position: relative;}
.vertical { height: 300px; /*子元素高度*/ position: absolute;
top:50%; /*父元素高度50%*/ margin-top: -150px; /*自身高度一半*/}
3）绝对定位配合 CSS3 位移
.vertical { position: absolute;top:50%; /*父元素高度50%*/ transform:translateY(-50%, -50%);}
4）CSS3弹性盒模型
.container { display:flex;justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/}
5、圣杯布局的实现原理、优点？
要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
好处：重要的内容放在文档流前面可以优先渲染
原理：利用相对定位、浮动、负边距布局，而不添加额外标签