浮动布局与定位布局

浮动布局与定位布局（前端）

布局方式

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

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

浮动篇(float)

浮动一开始是用来实现图文环绕效果
后续衍生出布局功能 -- 用浮动做水平布局(横向布局)
    以前的水平布局都是通过行内块元素实现,但是这样做: 1.性能比较差 2.盒子内容超出范围会崩塌

基本上所有的标签都可以添加float样式
    float主要有两个属性：
        1.left 向左浮动
        2.right 向右浮动
tips：
    1.元素在浮动时，会脱离原来的布局范围。在文档中不再占位
    2.浮动会一直到边界/遇到其他浮动元素为止

定位篇(position)

通过定位让元素在指定位置出现
理论上来说可以用定位实现页面的所有布局 -- 但不会这么做

绝对定位(absolute): 元素基于父级,在指定的位置/坐标出现 -- 让标签出现在距离父级上下左右xx的位置
    - 绝对定位在移动后,会脱离文档流,在网页中不再占位
    - 绝对定位的参照对象是基于父级.如果没有别的父级,就以body作为父级

相对定位(relative): 元素基于自身原来位置进行移动。 距离指定方向xx像素
    - 不会脱离文档流
    - 不会改变元素类型
    - 比较适合小范围移动

单独写定位是没用的,写完后还要指定方向设置距离
    top ↑
    right →
    bottom ↓
    left ←

父相子绝:
    分元素为相对定位，子元素为绝对定位
    子元素会根据移动后的父元素来显示  (老爹动完,儿子再动)

z-index:    
当元素产生上下堆叠时,设置z值调整谁在上方。 值越大越靠上