码迷,mamicode.com
首页 > Web开发 > 详细

利用维度知识理解CSS中的定位属性

时间:2019-07-03 22:56:12      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:css   就会   一句话   html   osi   写代码   利用   过程   世界   

我们知道HTML中有常规流文本和非常规流,当一个元素的position属性为为相对定位、绝对定位或固定定位时,这个元素就会脱离的常规流文本,这个时候就可以利用left等属性来进行位置的设定。

要理解这个过程的原理其实很简单,我们可以利用维度思维来理解。

我们都知道二维维度是一个平面维度,三维维度就是我们现在所处的现实世界,那么我们就可以把一个页面看作是一个二维的平面维度,这个维度里的内容是有排列顺序的,比如你在写一篇文章,突然发现某一句话需要放到它前面那一段话的前面,那么你就需要把这个句子删掉,交换顺序后,再写一次,HTML中也是一样,但是当我们给这个元素设置了定位属性,让它脱离了常规流之后,这个时候这个元素就相当于是跳出了二维的平面维度世界,来到了三维的立体世界,自然这个元素就可以在二维这个平面维度世界上随意的移动,而不需要去重新书写代码。而基于此的层叠关系同样可以用这个方式理解,比如,一支笔我们可以把它放在一张纸的上面,即这支笔的层级比这张纸的层级要高,那么我们从上到下首先看到的就是这支笔,当我们把这支笔放在这张纸的下面时,即这支笔的层级比这张纸的层级要低,那么我们从上到下首先看到的就是这张纸,而不再是笔了。

利用维度知识理解CSS中的定位属性

标签:css   就会   一句话   html   osi   写代码   利用   过程   世界   

原文地址:https://www.cnblogs.com/Michaelcat/p/11129519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!