内容尺寸

公共CSS

div {
  width: 100px;
  height: 150px;
  background: red;
  padding: 10px;
  border: 10px #fbd850 solid;
  margin: 10px;
}

height()/width()

var $div = $('div')
// 1. 内容尺寸
console.log($div.width(), $div.height())  
// 打印输出到页面上
document.write($div.width()+"," +$div.height())

输入的是div的宽高

innerWidth()/innerHeight()

var $div = $('div')  
// 2. 内部尺寸
console.log($div.innerWidth(), $div.innerHeight()) 
document.write($div.innerWidth()+"," +$div.innerHeight())

输入的是div的宽高+左右内边距

outerWidth()/outerHeight()

var $div = $('div')
  
// 3. 外部尺寸
console.log($div.outerWidth(), $div.outerHeight()) //140 190
console.log($div.outerWidth(true), $div.outerHeight(true)) //160 210

document.write("不加true："+$div.outerWidth()+"," +$div.outerHeight()+"<br/>")
document.write("加true："+$div.outerWidth(true)+"," +$div.outerHeight(true))

输入的是div的宽高+左右内边距+表框

且如果传参为true则额外+外边距