css盒模型

什么是盒模型

在html页面中，每一个元素都可以被看作一个盒子
而这个盒子由：内容区（content）、内边距（padding）、边框区（border）、外边距（margin）四部分组成。

盒子模型有哪两种
标准模式下：一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）
（标准模式下：就是除了IE浏览剩下的浏览器）
（怪异模式下：就是IE浏览器）

标准盒模型和怪异盒模型之间的转换

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

JS盒模型

盒模型除了css中的标准盒模型、怪异盒模型，还有js中的盒模型

// 我们要先换取dom节点，只能获取，不能设置
let box = document.getElementById("box")

就可以使用box.clientLeft,box.scrollTop,box.offsetTop,box.style.border获取到值

要想动态设置样式的属性

// 首先获取dom
var obj = document.getElementById("box");
var style = null;
// 需要兼容
if (window.getComputedStyle) {
    // style = window.getComputedStyle(obj, null);    // 非IE
    style = window.getComputedStyle(obj,width='200px')
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);