• width


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

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

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

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

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

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

    <body>
        <div id="d1"style="1100px;height:325px;overflow-x:auto;">
            <div id="d2" style="min-1000px; auto; padding: 50px; margin: 50px;"></div>
        </div>
        <script>
            alert($("#d2").css("width"));
        </script>
    </body>
  • 相关阅读:
    《编写高质量代码》读书笔记一
    [转] Markdown
    皓首穷经还是及时行乐!
    有用的iOS网站地址
    [股票] 入市
    https原理 就是两次http
    数据预处理
    重新建立程序员的应对方式
    ROC曲线手画
    机器学习的总结
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/5215823.html
Copyright © 2020-2023  润新知