您的位置：首页 > 其它

width

2016-02-25 09:26 141 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航