一、CSS 三大盒子布局方式
CSS 三大盒子布局方式 :
- 普通流 : 又称为 标准流 , 盒子按照从上到下的顺序进行排列 ;
- 浮动 : 另多个盒子水平排成一列 ;
- 定位 : 将盒子定位在某个位置 ; 盒子自由漂浮在其它盒子之上 , 可以任意指定水平和垂直方向上的位置 ;
从层级上来说 , 普通流盒子 在最底层 , 浮动盒子 在中间层 , 定位盒子 在最上层 ;
二、CSS 定位简介
定位是将 盒子模型 定位到某个位置 , 并且自由地漂浮在其它盒子上方 ;
定位由 定位模式 + 边偏移 构成 ;
1、边偏移
边偏移 :
- 顶部偏移量 : 盒子模型 距离 父容器 上边线 的长度 , 如 :
top: 10px; - 底部偏移量 : 盒子模型 距离 父容器 下边线 的长度 , 如 :
bottom: 10px; - 左侧偏移量 : 盒子模型 距离 父容器 左边线 的长度 , 如 :
left: 10px; - 右侧偏移量 : 盒子模型 距离 父容器 右边线 的长度 , 如 :
right: 10px;
2、定位模式
定位模式 : CSS 中通过 position 属性设置定位模式 , 语法如下 :
选择器 {
position: 定位模式属性值;}
定位模式有如下几个设置选项 :
- 静态定位 :
static - 相对定位 :
relative - 绝对定位 :
absolute - 固定定位 :
fixed