CSS深入浅出（二）

一、堆叠上下文

1、堆叠顺序

• z-index:<0
• background
• border
• 块级元素
• 浮动元素
• 内联元素（文本）
• z-index:0/auto
• z-index:>0

2、堆叠上下文——创建堆叠上下文

• 根元素 (HTML)
• z-index 值不为 "auto"的 绝对/相对定位
• position: fixed
• opacity 属性值小于 1 的元素
• transform 属性值不为 "none"的元素
• 其他

3、基本原则

• 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
• 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

二、icon全解

• img icon
• background icon
• sppirites icon 精灵图
• iconfont
  1. htmt,font,unicode
  2. css
  3. js(svg) 推荐使用
• css做icon (cssicon.space)

三、移动端页面（响应式）

1. @media(查询条件){查询条件为真时执行的}——媒体查询（可以用文件代替内容）
2. 响应式页面制作原则。没图不做（有几个图，做几个页面，无图丑）
3. 隐藏元素（响应式）。js改状态，不改样式。css做样式
4. 手机端meta（meta:vp）.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

5. 手机端特性

   • 手机没有hover
   • 手机没有resize
   • 手机没有滚动条
   • 手机又touch时间

四、flex布局

1. flex布局之前

   • normal flow （文档流）
   • float clear
   • position relative/absolutive（绝对定位和相对定位）
   • display:inline-bloce
   • 负margin

2. flex布局特点

   • flex布局与方向无关
   • flex布局与可以实现空间的自由分配、自动对齐
   • flex布局适用于简单的线性布局（更复杂的布局用grid布局）

3. flex基本概念

   • 

4. flex container属性

   • flex-direction
   • flex-wrap
   • flex-flow
   • justify-content
   • align-items
   • align-content

5. flex items属性

   • flex-grow
   • flex-shrink
   • flex-basis
   • flex
   • order
   • align-self

6. flex游戏

   • http://flexboxfroggy.com/#zh-cn
   • http://www.flexboxdefense.com/

五、布局套路

1. 浮动布局

1、子元素：float:left;
2、父元素：添加clearfix类
3、.clearfix::after{
        content:'';
        display:block;
        clear:both;
    }
4、剩下的靠经验

2. 平均布局
   靠经验
3. flex布局

1、父元素：display:flex;
2、属性选择
3、靠经验

六、BFC

1. BFC描述
   
   
   BFC没有定义，只有特性、功能。
   
   
   MDN/CSS
2. 创建BFC
   
   根元素或其它包含它的元素
   
   浮动元素 (元素的 float 不是 none)
   
   绝对定位元素 (元素具有 position 为 absolute 或 fixed)
   
   内联块 (元素具有 display: inline-block)
   
   表格单元格 (元素具有 display:
   table-cell，HTML表格单元格默认属性)
   
   表格标题 (元素具有 display: table-caption,
   HTML表格标题默认属性)
   
   具有overflow 且值不是 visible 的块元素，
   
   display: flow-root
   
   column-span: all应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
3. BFC的功能
   
   用 BFC 包住浮动元素。
   
   用 float + div 做左右自适应布局
4. 面试技巧
   
   代码展示给面试官

七、动态REM

1. rem是什么
   rem:根元素（html）的font-size
2. rem和em的区别
   em:自身的font-size
3. 手机端方案的特点（动态REM实现手机端页面）
   
   宽度型号多——两种方案
   
   百分比布局——有bug(淘汰)
   
   动态REM——使得rem==页面宽度

<script>
    var pageWidth=window.innerWidth
    document.write('<style>html{font-size:'+pageWidth+'px;}'</style>')
</script>

4. sass让px自动变为rem——sass安装和使用
   
   不会用less/sass/scss/wepack 的根源——
   • 不会用命令行
   • 不会英语
   • 不会看文档