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


有一点前端基础的人都知道学前端,那么HTML,CSS,JavaScript是必须要学的。其中CSS是层叠样式表,主要是界面的表达和修饰。有同学问CSS中的定位属性有哪些?前端必学基础速看。
定位也是用来布局的,它有两部分组成:定位模式和边偏移。简单说,我们定位的盒子,是通过边偏移来移动位置的。在CSS中,通过top、bottom、left和right属性定义元素的边偏移。在CSS中,通过position属性定义元素的定位模式,语法如“选择器 { position: 属性值; }”。我们根据四个定位属性来进行不同的定位模式:static:静态定位、relative:相对定位、absolute:绝对定位、fixed:固定定位。
一起来看看这四种定位属性:

  1. 静态定位(static)
静态定位是元素的默认定位方式,无定位的意思。它相当于border里面的none,不要定位的时候用。静态定位按照标准流特性摆放位置,它没有边偏移。静态定位在布局时我们几乎不用的
  1. 相对定位(relative)
相对定位是元素相对于它原来在标准流中的位置来说的。
相对定位的特点:
相对于自己原来在标准流中位置来移动的。原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
Css 中的定位属性有哪些
  1. 绝对定位(absolute)
绝对定位是元素以带有定位的父级元素来移动位置。
完全脱标——完全不占位置;
父元素没有定位,则以浏览器为准定位(Document 文档)。父元素要有定位,将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。

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

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

实战教学·项目驱动

开班计划中
  • 软件测试

    12月13日

  • JAVA

    12月13日

  • 前端

    12月26日

  • 网安

    12月27日

24小时报名热线

132 2811 3191

预约试学