zoukankan      html  css  js  c++  java
  • 解决CSS图片底部3像素问题总结

    解决三像素问题的总结:

    1.img标签的父标签增加font-size:0;

    如、body{
        font-size: 0;
      }

    2.img标签增加display:block;

    img{
    display:block;
    }

    3.img标签增加vertical-align: middle;

    img{
    vertical-align: middle;//或者vertical-align:top;
    }

    4.img标签增加float:left

    img{
    float:left;
    }

    为了更好地看效果,读者可以通过运行代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>三像素问题</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    list-style: none;

    }
    #box{
    500px;
    margin: 0 auto;
    }
    /*解决三像素问题*/
    /*//方法一
    body{
    font-size: 0;
    }*/
    /*//二
    img{
    display:block;
    }*/
    /*//方法三
    img{
    //vertical-align: top;//vertical-align: top|middle;都可以
    vertical-align: middle;
    }*/
    //方法四
    img{
    /*float: left;*/
    display: block;
    }
    </style>
    </head>
    <body>
    <div id="box">
    <img width="300" height="300" src="http://p2.so.qhmsg.com/bdr/200_200_/t0170482b9930a35857.jpg" alt="加载" title="">
    <img width="300" height="300" src="http://p2.so.qhmsg.com/bdr/200_200_/t0170482b9930a35857.jpg" alt="加载" title="">
    </div>
    </body>
    </html>

  • 相关阅读:
    Java服务停止与开启
    跨域,php后端处理
    Mac 504 gateway timeout nginx
    Tp3.2 多数据库链接
    Redis 设置密码
    Redis 如何对外访问 lnmp安装
    tensorflow gpu安装
    ngx_http_upstream_check_module
    Nginx负载均衡+监控状态检测
    springboot+log4j2+slf4j控制台打印带sql日志
  • 原文地址:https://www.cnblogs.com/lvxisha/p/9658287.html
Copyright © 2011-2022 走看看