浮动布局与定位

1.布局方式

传统布局方式：

        1.文档流布局: 网页元素从上往下,从左往右进行布局.主要用块元素布局.块元素独占一行 --> margin padding display line-height  

        2.浮动布局: 让元素可以在父容器里,向左/右进行浮动.直到遇到边界/其他浮动元素位置           3.定位布局: 让元素在指定位置显示      

                1.绝对定位:基于父级坐标定位      

                 2.相对定位:基于自身原位置进行定位 ​ 目前较为主流的布局 -- flex(弹性盒模型)   flex -- 把内容基于两条轴进行分割排版

2.浮动篇(float)

浮动一开始是用来实现图文环绕效果

后续衍生出布局功能 -- 用浮动来做水平布局(横向布局)  

        以前的水平布局主要是通过行内块元素实现. 但是这样做: 1.性能比较差 2.盒子内容超出了宽高,排版会崩塌

基本上所有标签都可以添加float样式

  float主要有两个属性:      

        1.left 向左浮动      

        2.right 向右浮动

tips:  

        1.元素在浮动时,会脱离原布局范围.在文档中不再站位  

        2.浮动会一直到边界/遇到其他浮动元素为止

3.定位篇(position)

通过定位让元素在指定位置出现

理论上来说可以用定位实现页面的所有布局. -- 不会这么做,效率低 ​

绝对定位(absolute):

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

相对定位(relative):

让元素基于自身原来的位置进行移动.在原来位置的基础上.距离指定方向XX像素   - 不会脱离文档流  

            - 不会改变元素类型  

            - 较适合小范围内移动 ​

定位四个方向:  

                top 上 ↑  

                right 右 →  

                bottom 下 ↓  

                left 左 ←

        

        单独写定位是没用的.写完后还需要结合4个方向设置距离 ​

父相子绝:  

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

z-index:  

                当元素产生上下堆叠时.通过设置z值.来调整谁在上方显示. 值越大越靠上

未完待续