• 解决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>

  • 相关阅读:
    1059. C语言竞赛(20)
    1057. 数零壹(20)
    1056. 组合数的和(15)
    1054. 求平均值 (20)
    1052. 卖个萌 (20)
    1053. 住房空置率 (20)
    第五周课后作业02(动手动脑)
    课堂动手动脑
    课后作业
    课堂测试动手动脑
  • 原文地址:https://www.cnblogs.com/lvxisha/p/9658287.html
Copyright © 2020-2023  润新知