css盒模型与js盒模型

css盒模型

• 传统css盒模型 box-sizing:content-box (相当于这个设置),width/height是content内容的宽度/长度,不包括padding & border,所以改变padding或border时要计算手动修改width

• 新css盒模型 box-sizing:border-box;width/height包含padding和border的值,修改padding和border时会自动改变content的大小

  总结

  传统css盒模型:width=contentWidth box-sizing:content-box 新版css盒模型:width=contentWidth+padding+border box-sizing:border-box

js盒模型

domObject.style.xxx="xxx" 一般style是用来赋值的,它获取到的只能是内嵌样式 一般使用以下属性获取元素大小

• client 溢出不计,得到整数无单位

  • width
    可视化区域的宽/高 (左右/上下padding+content),
  • height
  • top
    调用元素的 border-top的宽
  • left
    调用元素的 border-left的宽

• offset 溢出不计,得到整数无单位

  • width
    整个元素的宽/高 (左右/上下border+左右/上下padding+content),
  • height
  • top
    距离第一个定位(absolute,fixed,relative)父元素/body内边距的top距离
  • left
    距离第一个定位(absolute,fixed,relative)父元素/body内边距的left距离
  • parent 距离第一个定位(absolute,fixed,relative)父元素/body

• scroll 内容的总长

  • width
    总宽
  • height 总长
  • top top卷去的长度
  • left left卷去的长度

ie8中的offsetLeft和offsetTop

这里是距第一个定位父元素/body 的外边距距离(包括父元素的border)