css/day08

定位布局

position 
        static        静态（默认）     非定位元素

        relative     定位元素（相对定位）
            参照点：原先所在的位置
            特性：不脱离文档流（宽度默认为为100%，原来在文档流的位置不会被抢占），但是可以覆盖在其他元素上

        absolute     定位元素（绝对定位）
            参照点：距离它最近的父定位元素，如果没有，参照视口
            特性：脱离文档流（宽度由内容决定，原来在文档流的位置被其他元素抢占）

        fixed         定位元素（固定定位）
            特性：脱离文档流
            参照点：相对于浏览器视口，并且不会随着网页的滚动而滚动

        sticky         定位元素（粘滞定位 【CSS3新特性】）
            特性：不脱离文档流
            是relative与fixed的集合，使用top/left/right/bottom设置过渡点，当超过了这个临界点，就提现fixe固定在网页中的特性

    只能定位元素才能使用定位属性
        top 、left、bottom、right
    改变定位元素在z轴中的位置
        z-index 
            默认为0，值越小越靠下

伸缩盒
    作用：主要应用在响应式(网页可以随着终端的屏幕尺寸合理调整布局)布局中
    应用：
        1. 父元素(宽高都需要明确)
            display:flex
            flex-direction:row/column
            flex-wrap:nowrap/wrap
        2. 子元素
            flex-basic
            flex-grow:
            flex-shrink:
            flex:grow shrin basic;
            flex:grow;