当前位置:网站首页>惊呆!原来position和float还可以这样!

惊呆!原来position和float还可以这样!

2020-12-08 12:14:19 osc_wcq210y3

惊呆!原来position和float还可以这样!

前几天有小伙伴在后台问橘子,初学前端不怎么理解float和position,所以今天就仔细讲一讲关于元素的浮动和定位。

一:Float
怎么看待一个新的事物?当然是站在巨人的肩膀上!

MDN文档中这样定义Float:

CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。

float的常用属性一般有三个:left、right、none

接下来咱们每个细化:

解释:float:left;
表明元素必须浮动在其所在的块容器左侧的关键字。也就是说:被添加浮动的元素向左浮动。
在这里插入图片描述
解释:float:right
表明元素必须浮动在其所在的块容器右侧的关键字。也就是说:被添加浮动的元素向右浮动。
在这里插入图片描述
解释:float:none;
表明元素不进行浮动的关键字。也就是说:此元素未被加入浮动。
在这里插入图片描述
由上可以总结出关于浮动的特性:








(1)浮动的元素会脱离标准流

脱离标准流的控制移动到指定位置浮动的盒子不会保留原先的位置(可以看到左浮动的时候文字是被填充到window窗口的最右侧,但是当盒子右浮动的时候文字是被填充到window窗口的最左侧)

(2)浮动的元素会在一行显示

如图:如果多个盒子同时添加浮动则盒子会按照属性值在一行内显示并且顶端对齐排列
在这里插入图片描述

(3)添加浮动的元素会具有行内块的特点(行内块:在一行内可以显示多个块级元素)

如图:因为span是行内元素,所以直接设置span的宽高是无效的,但是通过对span添加浮动之后是可以进行直接设置其宽高。

在这里插入图片描述
橘子觉得最好的编程老师就是键盘,心动不如行动!快去编写吧!

二:Position

MDN文档这样定义position:

CSS position属性用于指定一个元素在文档中的定位方式。

它的常用属性一般有四个:static、relative、absolute、fixed
接下来咱们每个细化:

解释:position:static;(静态定位)

所谓静态定位就是按照标准流特性摆放位置,它没有边偏移(top、bottom、left、right),也就是说此时 top, right, bottom, left 和 z-index 属性无效!所以说这种定位方式在布局时很少用到;

在这里插入图片描述
解释:position:relative;(相对定位)

相对定位就是在元素移动位置的时候,是相对于它原来的位置来说的。相对定位是以原来的位置来移动的(移动位置的时候参照点是自己原来的位置);

需要注意的是:使用了绝对定位到盒子,还是会继续占有原来的位置。(顾名思义就是,即使添加了相对定位的盒子离开原来的位置,它原来所占有的地方其它元素还是不可以占有)

在这里插入图片描述
解释:position:absolute;(绝对定位)

绝对定位就是相对于父元素移动的

**注意: **
(1)如果父元素没有定位就会以浏览器为准!
(2)如果父级元素添加了相对定位、固定定位中的其中一种,那么添加绝对定位的子元素会以添加定位的父级元素为移动基准!
(3)添加了绝对定位的盒子会脱离标准流!


解释:position:fixed;(固定定位)

固定定位是元素固定于浏览器可视区的位置,顾名思义,也就是用户的屏幕位置。(一般的运用场景是,在用户滑动页面时,被添加固定定位的元素在网页左右两侧位置不变。没错!就是广告经常用的!

那么实际开发中如何运用定位呢?

通常的运用方式是:相对定位+相对定位通过对父级元素添加相对定位,这样子元素在添加固定定位的时候就会在父盒子里自由移动了!
在这里插入图片描述

我是橘子,一个高达帅气的程序员!

版权声明
本文为[osc_wcq210y3]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4324175/blog/4780870