【CSS】定位 ① ( CSS 三大盒子布局方式 | CSS 定位简介 | 边偏移 | 定位模式 )

一、CSS 三大盒子布局方式

CSS 三大盒子布局方式 :

• 普通流 : 又称为 标准流 , 盒子按照从上到下的顺序进行排列 ;
• 浮动 : 另多个盒子水平排成一列 ;
• 定位 : 将盒子定位在某个位置 ; 盒子自由漂浮在其它盒子之上 , 可以任意指定水平和垂直方向上的位置 ;

从层级上来说 , 普通流盒子 在最底层 , 浮动盒子 在中间层 , 定位盒子 在最上层 ;

二、CSS 定位简介

定位是将 盒子模型 定位到某个位置 , 并且自由地漂浮在其它盒子上方 ;

定位由 定位模式 + 边偏移 构成 ;

1、边偏移

边偏移 :

• 顶部偏移量 : 盒子模型 距离 父容器 上边线 的长度 , 如 : top: 10px ;
• 底部偏移量 : 盒子模型 距离 父容器 下边线 的长度 , 如 : bottom: 10px ;
• 左侧偏移量 : 盒子模型 距离 父容器 左边线 的长度 , 如 : left: 10px ;
• 右侧偏移量 : 盒子模型 距离 父容器 右边线 的长度 , 如 : right: 10px ;

2、定位模式

定位模式 : CSS 中通过 position 属性设置定位模式 , 语法如下 :

选择器 {position: 定位模式属性值;}

定位模式有如下几个设置选项 :

• 静态定位 : static
• 相对定位 : relative
• 绝对定位 : absolute
• 固定定位 : fixed