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>

  • 相关阅读:
    HDU-5980
    HDU-5974
    HDU-5979
    关于position的定位
    javascript学习笔记w3chool
    表单相关css技巧
    fis压缩工具的使用
    将HTML页面内容存入json数组
    中介PHP连接前台HTML与数据库MySQL
    lesscss的使用
  • 原文地址:https://www.cnblogs.com/lvxisha/p/9658287.html
Copyright © 2011-2022 走看看