css 盒子模型

前述

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

css盒子模型

基本概念

css盒子模型分为标准模型及IE模型

区别

标准模型和IE模型的区别

1. 计算的宽度和高度不同
2. 标准模型的宽和高，指的是content的内容，不包含padding和border
3. IE模型的宽高，是指content+padding+border的内容

实现

css如何设置标准模型和IE模型

标准模型，浏览器默认的box-sizing:content-box
IE模型，box-sizing:border-box

js如何设置获取盒子模型对应的宽和高

dom.style.width/height (只可获取内联样式)
dom.currentStyle.width/height (只适用IE，可获取内联样式，内联表，联表渲染后样式)
window.getConputedStyle(dom).width/height (获取渲染后所得样式)
dom.getBoundingClientRect().width/height