【css】负值margin的应用

最新推荐文章于 2020-08-14 15:17:52 发布

richest_qi

最新推荐文章于 2020-08-14 15:17:52 发布

阅读量261

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/106923703

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

文章目录

<body>
<span id='span50' class='sp'>span.sp#span50</span><span class='ha'>have a nice day</span><br><br>
<span id='span0'  class='sp' >span.sp#span0</span><span class='ha'>have a nice day</span><br><br>
<span id='span-50' class='sp'>span.sp#span-50</span><span class='ha'>have a nice day</span><br><br>
<span id='span-200' class='sp'>span.sp#span-200</span><span class='ha'>have a nice day</span><br><br>
</body>

        .ha{
            background-color:indianred
        }
        .sp{
            width:200px;
            display:inline-block;
        }
        #span50{
            background-color:palegreen;
            margin-right:50px;
        }
        #span0{
            background-color:lightgoldenrodyellow
        }
        #span-50{
            background-color:lightcyan;
            margin-right:-50px;
        }
        #span-200{
            background-color:lightcyan;
            margin-right:-200px;
        }

在这里插入图片描述
来看id为span-200的这个元素，也就是最后一行。
它的display是inline-block，width是200px。当它的margin-right等于-200px，刚好是负的width值时，它的内容‘span.sp#span-200’会被它后面元素的内容‘have a nice day’覆盖，就好像它不在文档流中一样。
当然，#span-200不是真的没有，它仍占据着文档流200px宽的空间。
在这里插入图片描述

隐藏元素

如何隐藏元素，负margin给了我们启示。
比如，隐藏‘hello world hello world’ 所在span元素。

<span                 class='sp'>hello world hello world</span><span class='ha'>have a nice day</span><br><br>
<span id='span-100px' class='sp'>hello world hello world</span><span class='ha'>have a nice day</span><br><br>
<span id='span-200px' class='sp'>hello world hello world</span><span class='ha'>have a nice day</span><br><br>
</body>

        .ha{
            background-color:indianred;
        }
        .sp{
            display:inline-block;
            width:200px;
            background-color:yellow;
        }
        #span-100px{
            margin-left:-100px;
            clip-path:polygon(0 0,0 0,0 0,0 0);
        }
        #span-200px{
            margin-left:-200px;
            clip-path:polygon(0 0,0 0,0 0,0 0);
        }

在这里插入图片描述
最后一行ok，隐藏了‘hello world hello world’。两个关键点。

margin-left取负的width值
clip-path:polygon(0 0,0 0,0 0,0 0)

把最后一行独立出来，就是这样的了。

<body>
    <span id='span-200px'>hello world hello world</span><span class='ha'>have a nice day</span>
</body>

        .ha{
            background-color:indianred;
        }
        #span-200px{
            display:inline-block;
            width:200px;
            margin-left:-200px;
            clip-path:polygon(0 0,0 0,0 0,0 0);
            background-color:yellow;
        }

当然，隐藏时没必要把width设置的那么大，通常1px就行。

<body>
    <span id='span-1px'>hello world hello world</span><span class='ha'>have a nice day</span>
</body>

        .ha{
            background-color:indianred;
        }
        #span-1px{
            display:inline-block;
            width:1px;
            margin-left:-1px;
            clip-path:polygon(0 0,0 0,0 0,0 0);
            background-color:yellow;
        }

呃，把200px改成1px后，出问题了。
在这里插入图片描述
#span-1px的高度变高了！
是的，在css里文本很重要，1px宽度的空间放不下‘hello world hello world’这么多内容，所以“一柱擎天”了。
把clip-path:polygon(0 0,0 0,0 0,0 0);删掉试试看，就更好理解了。

好吧，怎么解决？

        #span-1px{
            display:inline-block;
            width:1px;
            margin-left:-1px;
            clip-path:polygon(0 0,0 0,0 0,0 0);
            background-color:yellow;
            position:absolute;
        }

因为position:absolute会块状化元素，所以display:inline-block没有必要了，删掉。
最终的样式如下：

        #span-1px{
            background-color:yellow;
            width:1px;
            margin-left:-1px;
            clip-path:polygon(0 0,0 0,0 0,0 0);
            position:absolute;
            overflow:hidden;
        }

看个实际应用吧。

<label for="search" class='hidden'>Search</label>
<input type='text' id='search' name='search'/>
<button type='submit'>Search</button>

        .hidden{
            padding:0;
            border:0;
            width:1px;
            height:1px;
            margin-left:-1px;
            clip-path: polygon(0 0,0 0,0 0,0 0);
            position:absolute;
            overflow:hidden;
        }

在这里插入图片描述

等间隔分布

<body>
 <div class="container">
  <ul>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
  </ul>
 </div>
</body>

  .container{
    display:inline-block;
    border:1px solid lightblue
  }
  ul{
    list-style: none;
    margin:0;
    padding:0;
    margin-right:-15px;
  }
 li{
    width:50px;
    height:100px;
    background-color:lightblue;
    margin-right:15px;
    float:left;
  }

在这里插入图片描述

图标占位

<body>  
    <span class="icon-box"><i class="icon-delete"></i>删除</span>
</body>

.icon-box{
    padding-left:16px;
    line-height:16px;
    vertical-align:top;
}
.icon-delete{
    background:url(./imgs/delete.png) no-repeat center;
    display:inline-block;
    width:16px;height:16px;
    margin-left:-16px;
    position:absolute;
}

在这里插入图片描述

块级元素内绝对定位图片的水平居中

margin-left等于图片宽度的一半，当然，margin-left为负值。

<body>
    <div class="container">
        <img src="./imgs/PC.png" alt="PC">
    </div>
</body>

.container{
    width:300px;
    height:200px;
    background-color:lightskyblue;
    text-align:center;
}
img{
    position:absolute;
    margin-left:-64px;
}