前端负margin 技术

最新推荐文章于 2020-12-03 16:22:07 发布

yufengxiaojiang3

最新推荐文章于 2020-12-03 16:22:07 发布

阅读量209

点赞数 1

分类专栏： CSS 文章标签：前端负margin技术

本文链接：https://blog.csdn.net/yufengxiaojiang3/article/details/98276740

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

负margin 技术

负margin技术只对块元素和行内块元素有效果，行内元素设margin无效。

margin-top 和 margin-left: 当为正时，是相对自己原来位置移动自己的该正向边距

当为负值时，是相对自己原来的位置进行盒子提升，像css层叠覆盖一样，并会对该盒子的上一个盒子进行遮住的效果。
- margin-top:将自己（该元素盒子）向上提升；
- margin-left:将自己（该元素盒子）向左提升，

margin-bottom 和 margin-right: 当为正值时，是相对自己原来位置移动自己的该正向边距

当为负值时，是相对自己原来的位置，对该元素的下一个盒子进行盒子提升，
- margin-bottom:对该元素的下一个盒子进行向上提升，并会对该盒子进行遮住的效果；a
- margin-right:对该元素的下一个盒子进行向左提升，并会对该盒子进行遮住的效果。

负margin技巧

图片与文字对齐

当图片与文字排在一起的时候，在该父类盒子内，他们的水平方向上往往都是不对齐的，总是有偏差，这是由于图片与文字默认是 基线对齐( vertical-align:baseline ),大概是上下相距3px，所以使用 margin( 0 3px -3px 0)常解决图片与文字底部水平对齐。解决有以下方式：

在img标签上添加 margin( 0 3px -3px 0 );
vertical-align:text-top;
vertical-align:text-bottom;
vertical-align:middle;
- 注意：这里不要给文字标签添加这个样式，不然没有效果。

自适应两列对齐

自适应两列，就是只有两列水平对齐的情况下，一个是宽度自定义，就是使用 %，（如 100%）;
        还有列就是固定宽度，在这种特殊的情况下，浮动 float 往往失效，任由它发展就 会破坏 浮动布局规则；
        浮动一般适用于定宽的元素
    在自动宽度标签上使用margin的负值，然后在自动宽度标签的子元素上设置margin负值 + 想要距离宽度，这样，布局才会是我们想要的效果。

    <style> 
        .wraper,.aside{
            height:40px;
            float: left;
            color:black;
        }
        .wraper{
            width:100%;
            background-color: grey;
            margin-left:-120px;
        }
        .aside{
            width:120px;
            background-color: burlywood;
         
        }
        .wraper p{
            margin-left: 130px;
        }
    </style>
</head>
<body>
<div class="wraper"><p>我是主体部分，meta name="viewport" content="width=device-width, initial-scale=1.0"不能隐藏</p></div>
    <div class="aside"><p>我是ce体部分，不能隐藏</p></div>
    
    <div style="clear:both"></div>
</body>

- 注意：一个简洁介绍，WordPress经典的两栏自适应布局就是使用这种方法来实现的。

元素垂直对齐

这里讲述一个常用的万能方法，使用position 和 margin 来使 标签居中，效果对块元素、行内块元素、行内元素都起效果。

在父元素上添加 position: relative; 防止子元素跑到外宇宙去
在子元素上添加 position: absolute; top: 50%; left: 50%;
在子元素上添加 margin-top:- 子元素高度的一半; margin-left: - 子元素宽度的一半;
- 很容易理解，就是选择父元素盒子的正中心，将它给需要定位的子元素。

tab选项卡

在tab选项卡中，由于会用到很多的js代码，所以这里等着后期进行修改。

yufengxiaojiang3

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端负margin 技术

负margin 技术负margin技术只对块元素和行内块元素有效果，行内元素设margin无效。margin-top 和 margin-left: 当为正时，是相对自己原来位置移动自己的该正向边距当为负值时，是相对自己原来的位置进行盒子提升，像css层叠覆盖一样，并会对该盒子的上一个盒子进行遮住的效果。margin-top:将自己（该元素盒子）向上提升；margin-l...
复制链接

扫一扫