css浮动定位

网友投稿 873 2022-05-29

在介绍css浮动与定位之前,先来了解一下文档流和非文档流

文档流

css浮动与定位

文档流,是指元素排版布局过程中,元素会自动从左到右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。

标准流的特点:1.块级元素从上到下,独占一行

2.行内元素,行内块级元素从左到右在一行中显示。

3.占位置。

非文档流

网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position、float、display来控制。默认情况下,所有元素都处在文档流中,四种情况将使得元素离开文档流:浮动float、绝对定位absolute、固定定位fixed、元素不显示display:none,这种情况不占文档流的空间,而普通元素的位置基于文档流。

float

一、浮动    (float)

会使元素向左或向右移动,其周围的元素也会重新排列。

语法: float:none/left/right;

浮动指:

将元素排除在普通流之外

元素将不在页面中占据空间

将浮动元素放置在包含框的左边或者右边

浮动元素依旧位于包含框之内

浮动的特点

浮动的框可以向左或者向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止

浮动元素的外边缘不会超过其父元素的内边缘

浮动元素不会互相重叠

浮动元素不会上下浮动

行内元素浮动后会变为块级元素

举个例子

当框1向左浮动时,它脱离文档流并且向左移动,直到它的左边框碰到包含框的左边缘

为了验证框二是否隐藏,我加了个margin属性设置为10px,可以看出确实隐藏在下面

具体实现代码:仅供参考

Document

包含框中有三个元素,如果把框1向右浮动,则它脱离文档流并且向右移动,直到它的右边框碰到包含框的右边框

如果把三个框都向左移动,那么框1向左浮动直到遇到包含框,另外两个框向左浮动直到碰到前一个浮动框,三个框在同一行显示

如果包含框太窄,那么其他浮动块会自动向下移动,直到有足够的空间(左图) 如果浮动元素的高度不同,那么当他们向下移动时可能被其他浮动元素卡住(右图)

CSS 清除浮动:

描述:清除浮动是在使用了浮动之后必不可少的,为了网站布局的效果,清除浮动也变得非常麻烦。

属性:clear 值:left、right、both

清除浮动的常用方式:

1.结尾处加空div标签 clear:both (或在下一个元素上加clear:both;)

2.浮动元素的父级div定义 伪元素::after (content: ""; display: block; clear: both;)

3.浮动元素的父级div定义 overflow:hidden

4.浮动元素的父元素定高

display

display属性

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值为“inline”,称为“行内”元素。

块元素与行元素是可以转换的,也就是说display的属性值可以由我们来改变 。

display常见属性值

1. none:隐藏对象

2. inline:指定对象为内联元素

3. block:指定对象为块元素

4. inline-block:指定对象为内联块元素

5. table-cell:指定对象作为表格单元格

6. flex:弹性盒

举个栗子:

如果把三个框都行内块显示

position 定位

position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。

相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间

绝对定位

绝对定位使元素的位置与文档流无关,因此不占据空间。

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

用一句话概括就是:子绝父相

固定定位

fixd:固定定位,相对于浏览器窗口进行定位,脱离原来的文档流

z-index堆叠顺序

一旦修改了元素的定位方式,则元素可能会发生堆叠

可以使用z-index属性来控制元素框出现的重叠顺序

z-index仅能在定位的元素上生效

z-index属性: 值为数值,数值越大表示堆叠顺序越高,即离用户越近 可以设置为负值,表示离用户更远 ,一般不要设置

关于css浮动与定位就说到这里了,如有不足之处,欢迎指正!

感恩能与大家在华为云遇见!希望能与大家一起在华为云社区共同成长。

CSS HTML5

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Posix线程编程指南(3)
下一篇:浅谈java多线程的生命周期和同步通信多线程的生命周期和同步通信
相关文章