Css 中的定位属性有哪些?前端必学基础速看

知了堂姐

2024-07-09 11:12:24

0次

有一点前端基础的人都知道学前端，那么HTML,CSS,JavaScript是必须要学的。其中CSS是层叠样式表，主要是界面的表达和修饰。有同学问CSS中的定位属性有哪些？前端必学基础速看。

定位也是用来布局的，它有两部分组成：定位模式和边偏移。简单说，我们定位的盒子，是通过边偏移来移动位置的。在CSS中，通过top、bottom、left和right属性定义元素的边偏移。在CSS中，通过position属性定义元素的定位模式，语法如“选择器 { position: 属性值; }”。我们根据四个定位属性来进行不同的定位模式：static：静态定位、relative：相对定位、absolute：绝对定位、fixed：固定定位。

一起来看看这四种定位属性：

静态定位(static)

静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。静态定位按照标准流特性摆放位置，它没有边偏移。静态定位在布局时我们几乎不用的

相对定位(relative)

相对定位是元素相对于它原来在标准流中的位置来说的。
相对定位的特点：
相对于自己原来在标准流中位置来移动的。原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位(absolute)

绝对定位是元素以带有定位的父级元素来移动位置。
完全脱标——完全不占位置;
父元素没有定位，则以浏览器为准定位(Document 文档)。父元素要有定位，将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。

固定定位(fixed)

固定定位是绝对定位的一种特殊形式：如果说绝对定位是一个矩形那么固定定位就类似于正方形
固定定位模式特点：
1. 完全脱标——完全不占位置;
2. 只认浏览器的可视窗口 —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置;、跟父元素没有任何关系;单独使用的

不随滚动条滚动。

Css 中的定位属性有哪些?前端必学基础速看。成都知了堂web前端培训机构，拥有行业前沿的web前端培训课程，专业的web前端培训讲师团队，讲师平均具备10年+前端项目经验，我们专注前端开发培训多年，学员遍布全国各大优质互联网企业，成都web前端培训班推荐知了堂。

上一篇：前端好学吗?自学前端可以学会吗

下一篇：JavaScript常用开发工具有哪些？这四款前端小白可