<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;
}