美文网首页让前端飞
你不一定知道的css知识-top等属性

你不一定知道的css知识-top等属性

作者: 打铁大师 | 来源:发表于2017-01-01 09:02 被阅读0次

    1.'top','right','bottom','left'

    如果一个元素的position属性值不是‘static’,那么就说这个元素是定位的。
    注意,'top','right','bottom','left'这四个属性对于static定位的元素无效。因此,我们说top等的含义时,就是在讲这些属性在相对定位和绝对定位下的含义。

    相对定位下,'top','right','bottom','left'的含义。

    • top : 偏移量根据自身的top边
    • right:偏移量根据自身的right边
    • bottom : 偏移量根据自身的bottom边
    • left:偏移量根据自身的left边

    绝对定位下,'top','right','bottom','left'的含义。

    绝对定位下,这四个属性的含义就很不一样了。

    • top:指定一个盒子的top margin 边离该盒包含块的top的距离。
    • right:指定一个盒子的right margin 边离该盒包含块的right的距离。
    • bottom:指定一个盒子的bottom margin 边离该盒包含块的bottom的距离。
    • left:指定一个盒子的left margin 边离该盒包含块的left的距离。

    这里要解释一下俩个概念:top margin边 和包含块的概念。

    我们都知道,每个盒子都由内容、内边距、边框和外边距组成。外边距区域最顶部的位置就是top margin 边,最底部的位置就是bottom margin边。

    包含块的概念:元素盒子的位置和大小有时是根据一个特定矩形计算的,叫做该元素的包含块。
    对于绝对定位的元素,它的包含块就是由最近的已经定位的祖先元素创建。如果没有这样的祖先,包含块就是根元素所在的包含块。

    相关文章

      网友评论

        本文标题:你不一定知道的css知识-top等属性

        本文链接:https://www.haomeiwen.com/subject/gwrnettx.html