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

文章目录

• 一、CSS 三大盒子布局方式
• 二、CSS 定位简介
• • 1、边偏移
  • 2、定位模式

一、CSS 三大盒子布局方式

CSS 三大盒子布局方式 :

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

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

二、CSS 定位简介

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

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

1、边偏移

边偏移 :

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

2、定位模式

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

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！