最近在做一个小游戏时发现了一个问题,总是在弹出img时先出现一个灰色的边框,所以为了查找问题,查找了一些关于img 默认边框的小知识点。
在这里整理了一些知识点:
一. 下面代码都试验过后会发现,img会有外边框,这个也是使用img元素的一个坑
一般在img为空时出现,因为浏览器找不到图,就会用一个边框来代替
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img外边框</title>
</head>
<body>
<p class="container-img">
<img class="common-icon login-icon" src="">
</p>
</body>
<style type="text/css">
.container-img {
display: inline-block;
width: 36px;
height: 36px;
overflow: hidden;
}
.common-icon {
display: inline-block;
width: 36px;
height: 36px;
}
</style>
为了解决这个问题,整理了几个方法:
1. 设置空img的css样式
img[src=""],img:not([src]){
opacity:0;
}
第一个为属性选择器(img中src为空的元素),第二个为反选伪类选择器(src没有的img元素),将其的opacity设置为空
2.img剪裁方法
(1)负margin
.container-img img {
display: inline-block;
margin: -1px;
width: 38px;
height: 38px;
}
负的边距像能减小元素在文档流中的尺寸一样,但其实它的尺寸大小并没变,只是文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,所以位置也就发生变化了。还有,文档流只能是后面的流向前面的,即文档流只能向左或向上流动,不能向下或向右移动。所以margin = -1px相当于向左上方移动一个像素,所以margin = -1px相当于向左上方移动一个像素,为了让父级元素可以遮住img的边框,需要将img width/height 均加2px,相当与对图片进行剪裁,定位元素方法与这个原理一样。
负margin的使用场景很多,我们很多用的三栏布局的圣杯布局,双飞翼布局都是这么使用的。
(2)绝对定位
.container-img{
position:relative;
}
.container-img img {
position: absolute;
top: -1px;
right: -1px;
width: 38px;
height: 38px;
}