<style>
div{
200px;
height: 200px;
padding: 100px;
border: 10px solid #000;
margin: 50px;
/* 内减模式 怪异盒模型 */
/* box-sizing: border-box; */
}
</style>
</head>
<body>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// 3个方法,4种语法,获取标签的占位
// 执行结果没有 px 单位
// $().width() $().height()
// 获取标签的 内容
// 正常情况下就是宽度高度
console.log( $('div').width() );
console.log( $('div').height() );
// $().innerWidth() $().innerHeight()
// 获取标签的 内容 + padding
console.log( $('div').innerWidth() );
console.log( $('div').innerHeight() );
// $().outerWidth() $().outerHeight()
// 获取标签的 内容 + padding + border
console.log( $('div').outerWidth() );
console.log( $('div').outerHeight() );
// $().outerWidth(true) $().outerHeight(true)
// 获取标签的 内容 + padding + border + margin
console.log( $('div').outerWidth(true) );
console.log( $('div').outerHeight(true) );
// 获取元素的坐标位置
// 不需要通过事件对象,可以直接通过标签对象获取
// 1 , offset()
// 获取标签对象,到页面左上角的间距
// 执行结果是对象 top 上距离 left 左距离
// 获取与页面左上角的间距
// console.log( $('p').offset() );
// 可以设定参数,设定与页面的间距
// 设定的是总间距,如果已经有了间距,例如 margin
// 实际执行时,设定的定位数值是 设定的总距离 - 已经定义的距离
console.log( $('p').offset({left:500,top:500}) );
// 2 , position()
// 与父级标签的定位关系
// 只获取通过定位产生的距离,margin的不算
// 不能设定参数
console.log( $('p').position() );