width - Mr.He多多指教

1、在没有添加padding等额外属性的时候，火狐、谷歌、IE都是输出1100px;无横向滚动条

<body>
    <div id="d1"style="width:1100px;height:325px;overflow-x:auto;">
        <div id="d2" style="width:auto;"></div>
    </div>
    <script>
        alert($("#d2").css("width"));
    </script>
</body>

2、在里面的DIV添加padding:50px的属性之后，火狐、谷歌、IE都是输出1000px；无横向滚动条

<body>
    <div id="d1"style="width:1100px;height:325px;overflow-x:auto;">
        <div id="d2" style="width:auto;padding:50px;"></div>
    </div>
    <script>
        alert($("#d2").css("width"));
    </script>
</body>

3、在里面的DIV添加padding:50px的属性之后，又加上margin:50px，火狐、谷歌、IE都是输出900px；无横向滚动条

　　结论:由于有了margin和padding的影响，width属性又设为auto，输出的width由没有这两个属性的时候的1100变成900px

<body>
    <div id="d1"style="width:1100px;height:325px;overflow-x:auto;">
        <div id="d2" style="width:auto;padding:50px;margin:50px;"></div>
    </div>
    <script>
        alert($("#d2").css("width"));
    </script>
</body>

在里面的DIV添加padding:50px;margin:50px的属性之后，又加上min-width:1000px，火狐、谷歌、IE都是输出1000px；出现横向滚动条

可以得出结论，在例子3中，由于有了margin和padding的影响，width属性又设为auto，输出的width是900px，但是我们在这里又加上了min-width:1000px，显然以前的900px已经小于了min-width，故现在的width应该等于min-width，为1000,又加上padding和margin，共200，超过了1100，所以会出现滚动条。如果此时把min-width的值设置为小于等于900的值，滚动条是不会出现的。

<body>
    <div id="d1"style="width:1100px;height:325px;overflow-x:auto;">
        <div id="d2" style="min-width:1000px;width: auto; padding: 50px; margin: 50px;"></div>
    </div>
    <script>
        alert($("#d2").css("width"));
    </script>
</body>

posted on 2016-02-25 09:26 Mr.He多多指教阅读(519) 评论(0) 收藏举报