jQuery----获取标签元素的尺寸（width height、innerWidth innerHeight、outerWidth() 、outerWidth(true) ）

<script src="./jquery.min.js"></script>
<script>
    // 获取标签的占位
    //     width 和 height
    //     padding
    //     border
    //     margin

    // 3个方法,4种使用方式

    // width()  和 height() 
    //    获取 标签 的 内容
    //    正常情况下 是 width 和 height
    //    如果有 内减属性  就是  width / height - padding - border

    console.log( $('div').width() ,  $('div').height() );    // 240


    // innerWidth() 和 innerHeight()
    //    获取 标签 的 内容 + padding 
    //    正常情况下 是 width / height + padding
    //    如果有 内减属性  就是  width / height - border

    console.log( $('div').innerWidth() ,  $('div').innerHeight() );   // 260


    // outerWidth() 和 outerHeight()
    //    获取 标签 的 内容 + padding + border
    //    正常情况下 是 width / height + padding + border
    //    有 内减属性  就是  width / height 
    console.log( $('div').outerWidth() ,  $('div').outerHeight() );   // 300


    // outerWidth(true) 和 outerHeight(true)
    //    获取 标签 的 内容 + padding + border + margin
    //    有 内减属性  就是  width / height + margin
    //    正常情况下 是 width / height + padding + border + margin

    console.log( $('div').outerWidth(true) ,  $('div').outerHeight(true) );   // 360

</script>