CSS定位模式

CSS定位模式

• 常规流
  除根元素、浮动元素和绝对定位元素外，其他元素都在常规流内。而根元素、浮动元素和绝对定位元素会脱离常规流。常规流中的盒子，属于块级格式化上下文或行级格式化上下文
• 浮动
  浮动元素从常规流中脱离，被漂浮在容器左边或者右边
  浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
  浮动元素不会影响其后面的留内块级盒
  但是浮动元素后面的行级盒子会变短以及避开浮动元素
  clear清除
• 绝对定位
  设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

浮动

块级格式化上下文BFC（Block Formatting Context）
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。盒子在容器内从上到下一个接一个地放置，两个兄弟盒之间的竖直距离由margin属性决定，同一个BFC内垂直margin会合并，盒子的左边缘挨着容器的左边
BFC的特性
1.BFC内部的浮动不会影响到BFC外部的元素
2.BFC的高度会包含其内的浮动元素
3.BFC不会和浮动元素重叠
BFC的创建
1.浮动框
2.绝对定位框
3.非块级的块容器（display:inline-block）
4.overflow的非visible的块框
BFC的作用
1.清除浮动
2.防止margin折叠
3.双栏布局
行级格式化上下文IFC（Inline Formatting Context）
盒子一个接一个的水平放置，盒之间的水平margin,border,padding都有效，同一行所在的盒子矩形区域叫行盒，当一个行盒放不下上下文内所有盒子时，会被分到多个垂直堆叠的行盒里，行盒内的水平分布由text-align属性决定，如果一个行级块无法分割，该元素会被做为一个整体决定分布在哪一个行盒。

定位

position
static,非定位，默认值
relative,相对定位（相对自己）
absolute,绝对定位，相对非static祖先元素定位
fixed，相对于视口绝对定位
relative
在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top,bottom,left,right设置偏移长度
流内其他元素当它没有偏移一样布局
absolute
脱离正常流
相对于最近的非static祖先的非padding box定位
不会对流内元素布局造成影响
可以有argin,但不会有折叠
fixed
相对于视口定位
不会随页面滚动发生未知变化
z-index堆叠层次
为定位元素指定其在Z轴的上下等级
用一个整数表示，数字越大，越靠近用户
初始值为auto,可以为负数，0，正数
堆叠上下文的生成
z-index值不为auto的定位元素
堆叠上下文的绘制顺序（从下到上）
形成该上下文的元素的border和background
z-index为负值的子堆叠上下文
常规流内的块级元素非浮动子元素
非定位的浮动元素
常规流内非定位行级元素
z-index为0的子元素或子堆叠上下文
z-index为正数的子堆叠上下文