css和js盒模型

一、盒模型

1.什么是盒模型？

在HTML页面中，每一个元素都可以看做是一个盒子，而每个盒子都是由：内容区（content）、填充区（padding）、边框区（border），外边界区（margin）四部分组成的。

2.盒模型的模式

盒模型分为两种模式，分别是标准模式和怪异模式

标准模式：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

怪异模式：一个块的总宽度=width+margin(左右) (即width已经包含了padding和border值)

3.标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承box-sizing属性的值

4.JS盒模型

获取和设置box的内容宽高:
IE：dom.currentStyle.width/height
非IE：window.getComputedStyle(dom).width/heigth

let obj=document.getElementById("box");

  let style=null;
  if(window.getComputedStyle){
    style=window.getComputedStyle(obj,null); //非IE
  }else{
    style=obj.currentStyle; //非IE
  }
  alert("width="+style.width+"\nheight="+style.height);