浮动布局与定位布局(前端)
布局方式
传统布局方式:
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值调整谁在上方。 值越大越靠上