CSS 相对布局

html-css017

CSS 相对布局,第1张

前面学习过CSS 的FlexBox布局,很大一部分页面基本都能实现了。不过昨天在练习封装一个Banner组件(虽然小程序提供了swiper)的时候,发现FlexBox无法满足需求,了解了一下可以用position来解决。效果如下:

对于一般块级元素,拿div来讲,在页面中独占一行,自上而下排列,也就是传说中的流。而即使是flex布局,也只是在横轴或纵轴上流式布局,而上图中一个div在另一个div上是没有办法满足的。

对于 Position ,其有四个属性值:

CSS有三种基本的定位机制:普通流,浮动和决定定位

多个浮动存在时,会按照流的方式规则排列

行框和清理:

前面说浮动元素会脱离文档流,不会影响不浮动的元素。不过如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间。

使用clear属性,可以组织行框围绕在浮动元素外边,属性的left、right、both、none表示框的哪些边不挨着浮动框。

第一种基本情况:没有使用position left 和 top设置属性无效.

效果图如下 符合文档流的基本顺序:

第二种情况 取消注释 position:relative

效果图如下:发现div根据设置的left和top发生了偏移 但是span 还是为什么span的位置这么奇怪呢?

因为设置 relative 并不会脱离文档流.举例例子:

设置relative你可以想象一下,这个div是个飞机,从停机坪飞起来,飞到别的地方去了。但是。。这个停机坪还是要给他留着的,否则飞不回来了

虽然div 设置了left和top的偏移,但是它原来的位置还是进行了保留.等待它飞回的那一刻.而span则保持原来的状态没有发生变化.

第三种情况:设置position : absolute

效果图如下: 这里设置absolute ,发现span 跑到文档的开始位置了.

因为设置absolute 会使div脱离文档流.两个保持这样的位置还有就是div 设置top和left的偏移.

| | |

----|------|-----|

static | 默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。|

relative| 位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。|

absolute| 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |

fixed|位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。|

另外:

1、一列布局:一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等。

2、两列布局:说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。

3、三列布局:两侧定宽中间自适应,首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响。

4、混合布局:在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。