CSS三个定位常规、浮动、绝对定位详细介绍

 这篇文章讲述css三个定位常规、浮动、绝对定位详细介绍

常规流,普通流,文档流

正常的常规流显示方式如下

CSS三个定位常规、浮动、绝对定位详细介绍

立即学习“前端免费学习笔记(深入)”;

按正常对应的元素特点显示、行内元素占一行,块级元素占一行或多行。

大哥二弟三弟按块级元素从上至下依次排列。这是常规流。

浮动

顾名思义,浮动就是漂浮在常规流的上方。作用:解决实现一行放多个盒子(常规下一个盒子只占一行,多个盒子占多行),并且盒子的可控性强。

浮动的特性:浮动后的元素在排序的时候会以上对齐。

float:left;

CSS三个定位常规、浮动、绝对定位详细介绍

大哥没有浮动、所以会以二弟所处的位置对齐。

浮动不会影响标准流,标准流还是在原来的位置。这里四弟没有浮动设置的高很大,上面一小行被大哥他们给盖住了,但是四弟是整整占了这一大行的。其它三个弟在浮动在它身体上面。

所以 浮动会覆盖在标准流上面。

CSS三个定位常规、浮动、绝对定位详细介绍

 

CSS三个定位常规、浮动、绝对定位详细介绍

浮动排序规则

当有多个浮动和不浮动的盒子一起出现在页面时、 浮动的盒子会找浮动的盒子对齐,不浮动的找不浮动的按常规流对齐。

浮动会改变元素显示方式——会将元素的显示方式改为:inline-block;

left和right只会影响前面浮动元素排列的位置,在同一位置浮动的元素有多个,那么左浮动会找左浮动,右浮动找右浮动。

浮动是以什么为位置为基准进行浮动的?

如果找不到浮动的元素,以标准流的形式进行解析

找到浮动的元素,以浮动的规则解析。浮动后元素所在的位置是它所在标准流的位置它会覆盖标准流。

 绝对定位

以上就是CSS三个定位常规、浮动、绝对定位详细介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2905403.html

(0)
上一篇 2025年3月11日 02:16:18
下一篇 2025年3月11日 02:16:29

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 使用CSS定位瀑布流简单的实现代码

    这篇文章介绍使用css定位瀑布流简单的实现代码 nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml…

    编程技术 2025年3月11日
    200
  • 利用CSS定位背景图片实例介绍

    又如: 这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,就是减少http请求次数,节省时间和带宽。 那么怎么来实现一张图片在不同的地方只显示其中的一部分呢,这就用到了我们今天要说…

    2025年3月11日 编程技术
    200
  • 详解CSS中三种基本的定位机制

    css 定位机制 CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列,框之间的垂直距离是由…

    2025年3月11日 编程技术
    200
  • html CSS中的相对定位和绝对定位使用总结

    定位,指确定方位;确定或指出的地方;确定场所或界限(如通过勘察)给这个地产的界限定位。 在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵…

    2025年3月11日 编程技术
    200
  • css的定位有什么?css定位的总结

    本篇文章给大家带来的内容是关于css的定位有什么?css定位的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 定位分为: static(默认): 这是页面元素position属性的默认值,元素将按照浏览器对网页中元素的…

    编程技术 2025年3月10日
    200
  • 如何使用css定位?css定位的使用方法

       本篇文章给大家带来的内容是关于如何使用css定位?css定位的使用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 position static :默认值,元素出现在正常流中。 relative:相对定位,相对于…

    2025年3月10日
    200
  • 如何在CSS中设置元素的位置

    CSS(层叠样式表)是一种用来描述网页样式的语言。在CSS中,可以通过设置相对位置来控制元素在页面中的摆放位置。下面我们将通过详细的代码示例来介绍如何使用CSS设置相对位置。 首先,我们需要了解相对定位(relative positioni…

    2025年3月10日
    200
  • 怎么利用css进行定位?css布局与定位详解

    怎么利用css进行定位?css可以帮助您定位html元素。 您可以将任何html元素放在您喜欢的任何位置。 您可以指定是否希望元素相对于页面中的自然位置定位,还是基于其父元素定义,下面我们来讲解一下css布局与定位。 一:相对定位 相对定位…

    2025年3月9日
    200

发表回复

登录后才能评论