CSS技巧汇总

1. 堆叠上下文

堆叠上下文：stacking context (页面堆叠层级关系 )

类似与作用域，由不同的CSS属性造成的一类具有相同特征的东西，并没有特定的概念。堆叠上下文影响的是元素 CSS 属性中的 z-index，父元素是否是堆叠上下文，对具有z-index属性的子元素的堆叠顺序有影响。

堆叠顺序，越大的离用户越近:

(1). 普通块级元素中，z轴元素的堆叠顺序如下：

正z-index > 内联元素 > 浮动元素 > 块级元素 > border > background >负z-index

(2). 堆叠上下文中，z轴元素的堆叠顺序如下：

正z-index > 内联元素 > 浮动元素 > 块级元素 > 负z-index > border > background

(3). z轴顺序遵循两个原则：

谁大谁上, 大小一样，后来居上

2. Vue组件中 placeholder 添加字体图标的技巧

(1). 不要给placeholder直接赋值，以谷歌图标为例

<input type="text" class="material-icons" placeholder="\ue8b6 航班号/机号/起飞站/目的地">

(2) 应该使用：placeholder对此属性进行绑定赋值，如下

<input type="text" class="material-icons" :placeholder='icon'>

export default {
  name: 'home',
  data(){
    return{
      icon:'\ue8b6 航班号/机号/起飞站/目的地'
    }
  }
}

(3). iconfont的值，必须是字体的unicode编码

谷歌字体库搜索图标的unicode引用为: e8b6; 在vue组件中引用时，则为 \ue8b6 在\u加谷歌unicode字体编码后4位即可。 如下图红色箭头所示: