zoukankan      html  css  js  c++  java
  • CSS定位的三种机制:普通流、绝对定位和浮动

    1.普通流:
    • position : static – 元素框正常生成。即上述不对元素进行任何样式设置的默认形态。
    • position : relative (此时设置top, right, bottom, left生效) – 相对于它的原点定位,元素仍保持其未定位前的形状,它原本所占的空间仍保留。

    例如:

    CSS定位的三种机制:普通流、绝对定位和浮动
    CSS定位的三种机制:普通流、绝对定位和浮动

    定位前:

    CSS定位的三种机制:普通流、绝对定位和浮动

    定位后:

    CSS定位的三种机制:普通流、绝对定位和浮动

    可以看出,div1相对于之前的位置,距离top偏移了40px,距离left偏移了60px。

    注:top:40px指的是距上偏移40px,而不是向上偏移40px。

    2.绝对定位:
    • position : absolute – 将该元素从文档流中删除,原来的占位不再存在,并相对于其最近的已定位祖先元素定位(如果不存在已定位的祖先元素,则相对于其根祖先元素定位,即或<</span>canvas>)。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。

    例如:

    CSS定位的三种机制:普通流、绝对定位和浮动
    CSS定位的三种机制:普通流、绝对定位和浮动

    定位前:

    CSS定位的三种机制:普通流、绝对定位和浮动

    定位后:

    CSS定位的三种机制:普通流、绝对定位和浮动

    • position : fixed – 与absolute 大致相同,只是相对于当前视窗定位(即滚动条滑动时当前元素位置不会随之改变)。

    注1:绝对定位的元素不在文档流中,因此会覆盖其他元素。

    注2:设置当前元素position : absolute时,应将其父元素position : relative。

    3.浮动:
    • l float : left 或float : right –- 将元素从原来的占位中删除,向左或向右漂浮,直到碰到包含块的边框,或另一浮动元素的边框为止。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。

    注:只有在position为static或relative,或继承了父元素的static或relative时,浮动才生效。

    浮动场景:

    • 浮动框总体宽度超过容器:浮动框块下移,直到有足够的空间

    CSS定位的三种机制:普通流、绝对定位和浮动

    • 各浮动框高度不同:下移的浮动框有可能被“卡住”

    CSS定位的三种机制:普通流、绝对定位和浮动

  • 相关阅读:
    A站C值电影列表 4月27号更新
    【dmp文件还原到oralce数据库】
    批量上传图片
    Repeater嵌套
    生成json格式
    C#汉字转为Unicode编码
    Jquery+json绑定带层次下拉框(select控件)
    Asp.net绑定带层次下拉框(select控件)
    从数据库里面取值绑定到Ztree
    根据参数显示类别(三级联动,需要JSON数据)
  • 原文地址:https://www.cnblogs.com/xinran476460042/p/5407736.html
Copyright © 2011-2022 走看看