day5-浮动布局与定位布局

1.布局方式

传统布局方式:
    1.文档流布局: 网页元素从上往下,从左往右进行布局. 主要用块元素布局,块元素独占一行  --> 通过margin padding display line-height
    2.浮动布局: 让一个元素可以在父级容器的范围内.向左/右浮动.一直到边界/其他浮动元素为止
    3.定位布局:  让一个元素在一个指定的位置显示
        绝对定位:  基于父级坐标进行移动
        相对定位:  基于自身原来的位置进行移动

2.目前比较主流的布局方式flex(弹性盒模型)
    flex -->把内容基于两条轴进行分割排版

2.浮动篇(float)

浮动一开始是用来实现图文环绕效果的
后续延伸出了布局的功能 --> 用浮动来做水平布局(横向布局)
(以前的水平布局方式就是通过块元素转为行内块.但这样会有缺陷:
    1.性能比较差  2.如果盒子内容超出了宽高.排版会崩溃)

基本上所有的标签都可以添加float样式:
    float主要两个属性:
        1.left   向左浮动
        2.right  向右浮动

tips:
    1.元素在浮动时会从原来的布局范围脱离,在文档中不再占位
    2.浮动会一直到边界/遇到其他浮动元素为止
    3.清除浮动:
        如果父级元素没有设置高度.盒子会随着内容延伸
        如果里面的元素设置了浮动,它就会脱离原来的位置.这种情况下父级不会撑大
        解决方式就是给父级元素设置溢出处理:
            overflow: hidden;

3.定位篇(position)

通过定位来指定元素在网页中出现的位置.
理论上来说可以用定位实现一个网页里的所有布局 -- 不推荐.性能低

绝对定位(absolute): 让元素基于父级,在一个指定的位置出现. 让一个标签,出现在距离父级上下左右XX的位置
    - 绝对定位在移动后会脱离文档流.在文档中不再占位
    - 绝对定位的参照对象是基于父级进行移动.如果没有专门父级,默认为body(整个网页)

相对定位:(relative): 让元素基于自身原来的位置进行移动. 在原来位置的基础上向上下左右移动XX
    - 不会脱离文档流
    - 不会改变元素的性质
    - 比较适合小范围的移动

定位的四个方向:
    top : 上 ↑
    right: 右 →
    bottom: 下 ↓
    left: 左 ←
单独写个定位样式是没用的.要结合4个方向来设置距离

父相子绝:
    父元素为相对定位,子元素为绝对定位. 子元素会根据移动后的父元素来显示

z-index:    
    当元素产生上下堆叠的时候.可以通过设置z-index的值.来调整谁在上面.值越大,越靠上