前端笔记-css-标准流/浮动/定位

        突发奇想,想记录一下我脑海中的比喻

我理解的这三者关系

        百度找了一下:文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

        我觉得重点在于‘从左至右，自上而下’,打个比方来讲,就是在一张纸上写文章,按照正常的书写顺序,我们是从左上角开始,向右书写,占满一行向下一行书写.网页排序也是一样的,说白了就是在一个一维平面中按照从左至右,自上而下的顺序排列

        问题随之而来,我怎么去做到文字环绕呢?

 

 

        浮动的产生的最根本的原因是为了实现文字环绕效果, 它有一个特点就是脱离了标准流

 

         那怎么理解浮动?我理解的是把整个网页拆分两层,就像两张叠放的纸,最下面的是标准流,是一张白纸,第二张纸漂浮在它上面,是一张横线纸(信纸),第一张纸的某部分内容一旦产生了浮动,那么它就会跑到第二张纸上,但是在第二张纸里有限制,它怎么浮动取决于它在下方的纸之前占的横向位置,可以在左右进行操作,限制了它的上下操作,也就是横线纸上的两条横线之间就是它的活动区间.

 

        浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子。那纵向呢?此时定位产生作用,定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。

        那怎么理解定位?那就再拆,把整个网页拆分三层,是三张叠放的纸,最下面的是标准流,是一张白纸,第二张纸漂浮在它上面,是一张横线纸(信纸),第三张纸漂浮在第二张纸上面,是一张网格纸(方格纸),第一张纸或第二张纸里的内容产生定位后,不会在原先纸上占位置,直接跑到了第三层,所以从视觉上来看,第一张或第二张纸上原本位置会被其他内容占据,第三张纸的内容覆盖了第一张第二张纸上相应的内容,可以上下左右移动,仅受限于包含它还带有相对定位的内容块(或是整张纸).

 仅仅记录自己的胡思乱想