一、堆叠上下文
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
- htmt,font,unicode
- css
- js(svg) 推荐使用
- css做icon (cssicon.space)
三、移动端页面（响应式）
- @media(查询条件){查询条件为真时执行的}——媒体查询（可以用文件代替内容）
- 响应式页面制作原则。没图不做（有几个图，做几个页面，无图丑）
- 隐藏元素（响应式）。js改状态，不改样式。css做样式
- 手机端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">
-
手机端特性
- 手机没有hover
- 手机没有resize
- 手机没有滚动条
- 手机又touch时间
四、flex布局
-
flex布局之前
- normal flow （文档流）
- float clear
- position relative/absolutive（绝对定位和相对定位）
- display:inline-bloce
- 负margin
-
flex布局特点
- flex布局与方向无关
- flex布局与可以实现空间的自由分配、自动对齐
- flex布局适用于简单的线性布局（更复杂的布局用grid布局）
-
flex基本概念
-
flex container属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
-
flex items属性
- flex-grow
- flex-shrink
- flex-basis
- flex
- order
- align-self
-
flex游戏
五、布局套路
- 浮动布局
1、子元素：float:left;
2、父元素：添加clearfix类
3、.clearfix::after{
content:'';
display:block;
clear:both;
}
4、剩下的靠经验
- 平均布局
靠经验 - flex布局
1、父元素：display:flex;
2、属性选择
3、靠经验
六、BFC
- BFC描述
BFC没有定义，只有特性、功能。
MDN/CSS - 创建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 的元素并不被包裹在一个多列容器中。 - BFC的功能
用 BFC 包住浮动元素。
用 float + div 做左右自适应布局 - 面试技巧
代码展示给面试官
七、动态REM
- rem是什么
rem:根元素（html）的font-size - rem和em的区别
em:自身的font-size - 手机端方案的特点（动态REM实现手机端页面）
宽度型号多——两种方案
百分比布局——有bug(淘汰)
动态REM——使得rem==页面宽度
<script>
var pageWidth=window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}'</style>')
</script>
- sass让px自动变为rem——sass安装和使用
不会用less/sass/scss/wepack 的根源——- 不会用命令行
- 不会英语
- 不会看文档
