最近在做一个小游戏时发现了一个问题，总是在弹出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:;

        }

第一个为属性选择器（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;

        }

-------------------

作者：chancejl
来源：CSDN
原文：https://blog.csdn.net/qq_39833794/article/details/79922355
版权声明：本文为博主文章，转载请附上博文链接！

img 灰色默认外边框的去除的更多相关文章

  1. 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 【SAP BO】处理掉BOE打开Xcelsius报表时，外围出现的外边框(转)

    原帖地址:http://blog.csdn.net/liyi199488/article/details/8943286 通过BOE打开Xcelsius报表时,总是出现一个外边框. 处理办法: Xce ...

  3. border 外边框

    语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...

  4. android 自定义按钮的外边框

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  5. css总结4：input 去掉外边框,placeholder的字体颜色、字号

    1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...

  6. HTML&CSS基础-外边框

    HTML&CSS基础-外边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...

  7. HTML 学习笔记 CSS样式（外边框 外边框合并）

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  8. （谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  9. jquery实现无外边框table

    jquery实现无外边框table 在需要设为无外边框的table上加上class noOutBorder <tableclass="noOutBorder"> < ...

随机推荐

  1. 数据库中row_number()、rank()、dense_rank() 的区别

    row_number的用途非常广泛,排序最好用它,它会为查询出来的每一行记录生成一个序号,依次排序且不会重复,注意使用row_number函数时必须要用over子句选择对某一列进行排序才能生成序号. ...

  2. IsNullOrEmpty与IsNullOrWhiteSpace性能比较

    IsNullOrEmpty与IsNullOrWhiteSpace性能谁比较高呢? 在string都是空字符串的情况下: IsNullOrWhiteSpace要比IsNullOrEmpty快大约 1~5 ...

  3. C++ 进制转换 十进制十六进制八进制二进制相互转换

    思路: 下面我把相互转换的所有类型都写出来了.实际上都是通过十进制中转的,这样比较简单,写出X进制转成十进制和从十进制转成X进制的两份代码直接拷贝就完成了剩余的部分.哦,对,自己封装了一个charTo ...

  4. 日常踩坑笔记：spring的context:property-placeholder标签

    背景: 原来的项目一直跑着没有问题,今天突然想在原有项目的基础上,加上redis进行数据的缓存,原来项目的架构就是传统的SSM框架,于是,大刀阔斧的开始改装了... 编写redis的配置文件——red ...

  5. hadoop环境运行程序出现 Retrying connect to server 问题

    程序运行时出现如下问题: 从网上查资料,有说重启format的..有说/etc/hosts出问题的... 反正都试了一遍..还是有这个问题 后来看日志,发现问题是访问服务器9001端口访问不到..开始 ...

  6. JDK及JRE目录结构

    JDK文件结构及目录: c:\jdk1.7.0: JDK安装根目录,包括版权.许可证和READEME文件,还包含ser.zip记录Java平台档案. c:\jdk1.7.0\bin 包含在Java开发 ...

  7. Gradle连接Maven仓库直接从仓库 更新JAR包

    一般情况下服务器编写好服务程序  会用Maven打成JAR包,放在Maven仓库里管理,我们在用的时候直接引用就可以, 那么如何在Gradle项目中使用本地的  或者远程的Maven仓库呢    当M ...

  8. 洛谷 P1430 解题报告

    P1430 序列取数 题目描述 给定一个长为\(n\)的整数序列\((n<=1000)\),由\(A\)和\(B\)轮流取数(\(A\)先取).每个人可从序列的左端或右端取若干个数(至少一个), ...

  9. Python_eval()

    ''' eval()用来把任意字符串转化为Python表达式并进行求值 ''' print(eval('3+4')) #计算表达式的值 a=3 b=4 print(eval('a+b')) #这时候要 ...

  10. python_汉塔诺

    '''据说古代有一个梵塔,塔内有三个底座A.B.C,A座上有64个盘子,盘子大小不等,大的在下,小的在上.有一个和尚想把这64个盘子从A座移到C座,但每次只能允许移动一个盘子,在移动盘子的过程中可以利 ...