美文网首页
vue-position定位

vue-position定位

作者: 苏码码 | 来源:发表于2018-11-22 15:57 被阅读0次

在开发中经常会遇到当父级元素设置了margin-top,子级元素再设置margin-top时,
如果子元素的值小于父元素的值,则子元素设置的margin-top没有效果;如果子元素的值大于父元素的值,则父子元素一起向下移动;那下面就来解决这个问题:

 <!-- 1.absolute:绝对定位;
脱离原来的位置进行定位,
相对于最近的有定位属性的父级元素进行定位,如果没有就相对于文档进行定位 -->

<!-- 2.relative:相对定位;
保留原来位置进行定位,
相对于出生(原始)的位置进行定位 -->

<!-- 3.fixed:固定定位;
相对于屏幕固定在某个位置,当屏幕滚动时该视图跟随不动 -->

<!-- 解决margin塌陷的问题
一:问题描述:当父级元素设置了margin-top,子级元素再设置margin-top时,
如果子元素的值小于父元素的值,则子元素设置的margin-top没有效果;
如果子元素的值大于父元素的值,则父子元素一起向下移动; -->
<!-- 解决方法:BFC: block format content -->
<!-- 如何触发一个盒子的bfc:
1.position:basolute;
2.display: inline-block;
3.float: left/right;
4.overflow: hidden; 
4个方法都可以,具体使用哪一个,看具体情况 -->
<div class="father">
    <div class="son"></div>
</div>

.father{
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: aqua;
    overflow: hidden;
    /* display: inline-block; */
    /* float: left; */
    /* position: absolute; */
}
.son{
    margin-left: 50px;
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background-color: red;
}

相关文章

  • vue-position定位

    在开发中经常会遇到当父级元素设置了margin-top,子级元素再设置margin-top时,如果子元素的值小于父...

  • 定位,定位,还是定位

    要想成为一个好的文字的输出者,首先要给自己一个合理的定位。定位可以首先想象自己想成为的角色:一个能够通过各种故事启...

  • 10-CSS定位流

    定位流 定位流分类相对定位绝对定位固定定位静态定位 相对定位 什么是相对定位?相对定位就是相对于自己以前在标准流中...

  • CSS中的几种定位

    CSS中常用的定位有 普通定位,相对定位 绝对定位、fixed定位 浮动 1、普通定位和相对定位 css中的元素有...

  • 2017-02-23 CSS 学习笔记

    定位流 定位流分类 相对定位 绝对定位 固定定位 静态定位 什么是相对定位相对定位就是相对于自己以前在标准中的位置...

  • #30天专注橙长计划#品牌定位30(6)营销推广1

    品牌定位的维度包括: 市场定位、价格定位、形象定位、地理定位、人群定位、渠道定位等; 经过前期大量的市场调研工作,...

  • D28:系统地图, 高德地图

    目录一. 定位功能 iPhone手机定位(基站定位, WiFi定位, GPS定位: 定位所需时间递增, 精确度递增...

  • 相对定位、绝对定位和固定定位

    1. 相对定位 定位有三种:相对定位,绝对定位、固定定位。 相对定位: position:relative lef...

  • 定位流

    定位流指的是:相对定位(relative)/绝对定位(absolute)/固定定位(fixed) 不包括静态定位(...

  • CSS补充2

    定位position 定位分为四种:相对定位 relative,绝对定位 absolute,固定定位 fixed,...

网友评论

      本文标题:vue-position定位

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