CSS 内边距和边框踩坑解决方案之box-sizing属性

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div-a{
                width: 330px;height: 200px;background-color: #00ff00;float: left;
                box-sizing: border-box;
                padding: 30px;
            }
            .img-a{
                width: 100%;
                height: 100%;
            }
            .div-b{
                width: 330px;height: 200px;background-color: #0000ff;float: left;
            }
            .img-b{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <!-- 
        正常情况，内边距和边框在元素设置的宽度和高度之外进行绘制
        box-sizing: 
            content-box：内边距和边框在元素设置的宽度和高度之外进行绘制
            border-box： 
                内边距和边框在元素设置的宽度和高度之内进行绘制
                设置的宽度=左边框+右边框+左内边距+右内边距+元素内容宽度
                设置的高度=上边框+下边框+上内边距+下内边距+内容元素高度
                注意：IE9以下版本浏览器不支持
         -->
        <div class="div-a"><img class="img-a" src="bj.jpg" ></div>
        <div class="div-b"><img class="img-b" src="bj.jpg" ></div>
    </body>
</html>