定位

定位：

定位：用来改变元素的位置
定位属性:position
坐标属性: left right top bottom
定位属性值:
static: 默认定位,不能设置坐标
	

absolute: 绝对定位

    脱离文档流
    能设置坐标
    默认参考浏览器窗口改变自己的位置
    或者参考最近的有定位的父级元素(默认定位除外)
	

relative: 相对定位

    占据文档流
    能设置坐标
    参考自身加载到页面中的初始位置

fixed: 固定定位

    脱离文档流
    能设置坐标
    参考当前浏览器窗口
    在页面中固定不动

sticky: 粘性定位

     结合了相对定位和固定定位的特征

层级关系:

   必须添加了定位的元素才能改变层级关系,默认定位除外
   并列关系: 都能修改层级
   嵌套关系: 只能改子元素的层级关系
   z-index:层级关系;
        auto 默认值
        number 具体数字,数字越大,层级越高,反之越低,可以为负数
		

包含块：

   包含块：给添加了绝对定位的子元素设置参考物,从而改变子元素的位置
1:  嵌套关系
2:  父元素设置positionrelative;
    子元素设置position:absolute;

相对定位和绝对定位的区别:

1: 是否占据文档流: 相对定位占据文档流,绝对定位脱离文档流
2: 参考物不同: 相对定位参考自身加载到页面中的初始位置
   绝对定位默认参考浏览器窗口或者参考有定位的父元素(默认定位除外)

定位居中:

方式一:
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;

方式二:
    position:absolute;
    left:50%;
    margin-left:-宽度的一半;
    top:50%;
    margin-top:-高度的一半;

锚点：

<a href="#name">点击位置</a>
<标签 id="name">跳转位置</标签>

透明度:

	opacity:0.4; 取值范围:0-1
	filter:alpha(opacity=40); 取值范围: 0-100  ie低版本识别

BFC

BFC: 块级格式化上下文,内部的元素不会影响到外面的元素
触发方式:
    1: 根元素是最大的BFC
    2: 添加浮动,且浮动不为none
    3: 添加overflow,且值不为visible
    4: 添加display,且值为inline-block, table-cell, table-caption ,flex ,inline-flex
    5: 添加position,且值为absolute 或者 fixed

应用:

    1: 解决垂直方向的外边距相遇重合问题
    2: 两列布局
    3: 解决高度塌陷的问题
	高度塌陷: 父元素未设置高度,子元素设置了浮动,父元素将高度消失,造成页面布局混乱
		

BFC特性:

    BFC内部的元素会在垂直方向排列
    BFC内的子元素的左外边距挨着BFC的左边框
    BFC内的子元素不会影响到外边的元素

    同属于同一个BFC内的子元素垂直距离由margin决定,相邻的两个子元素的margin相遇会重合
    BFC元素不会与浮动元素重合
    BFC内的子元素将参与高度计算