<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取盒子模型的宽高
</title>
<style>
#dv1 {
width: 100px;
height: 100px;
border: 2px solid red;
padding: 2px;
margin: 3px;
/*box-sizing: border-box;*/
}
</style>
</head>
<body>
<div id="dv1"></div>
</body>
<script>
var dv1 = document.getElementById('dv1');
var width1 = window.getComputedStyle ? window.getComputedStyle(dv1).width : 'nothing!';
var width2 = dv1.style.width;
var width3 = dv1.currentStyle ? dv1.currentStyle.width : 'nothing!';
var width4 = dv1.getBoundingClientRect().width;
console.log('1、通用宽（内容宽），(IE9以下无效。)：', width1);
console.log(' 2、只能取到style设置在行内的dom宽度：', width2);
console.log(' 3、IE下使用的获取元素宽度方法： ', width3);
console.log(' 4、真正盒子总宽，width+padding*2+border*2(IE9以下无效。)：', width4);
</script>
</html>主要提下标准盒模型的宽度和IE盒模型的宽度。
当box-sizing: content-box；或不设置的时候。盒子模型总宽为108px = 100 + 2*2 +2*2；即width+padding*2+border*2。
而在IE盒模型下， box-sizing: border-box。这时100px就成了盒子模型的总宽度，内容宽就变小了，成了92px。
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
