盒模型浅谈

盒模型

1、什么是盒模型？

div、p、h1、h2、h3、h4、h5、h6、span、a、img、input、button等等都是盒子模型。
盒模型是由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成的。

2、盒模型的分类

盒模型分为两种：标准盒模型和IE盒模型。

• 标准盒模型：元素的宽度和高度是指content部分的宽度和高度。
• IE盒模型：元素的宽度和高度是指content部分+padding+border的宽度和高度。

3、如何设置盒模型

• 标准盒模型：box-sizing: content-box;
• IE盒模型：box-sizing: border-box;

4、盒模型的浏览器兼容性问题

• IE6、IE7不支持box-sizing属性。
• IE8支持box-sizing属性，但是不支持content-box和border-box属性值。
• IE9+、Firefox、Chrome、Safari、Opera支持box-sizing属性。
  那么我们怎么解决IE6、IE7不支持box-sizing属性的问题呢？
  我们可以使用hack的方式来解决，如下：

4.1、IE条件注释法

<!-- lt是小于 gt是大于 lte是小于等于 gte是不小于 ！是不等于-->
<!--[if lt IE 8]>
  <link rel="stylesheet" href="style.css">
  <style>
    div {
      box-sizing: border-box;
    }
  </style>
<![endif]-->
<!--[if IE 6]>
  <link rel="stylesheet" href="style.css">
  <style>
    div {
      box-sizing: border-box;
    }
  </style>
<![endif]-->

4.2、css属性前缀法

比如我们可以使用*、_、/9来进行hack。
其中*是IE6、IE7专有属性，_是IE6专有属性，/9是IE6、IE7、IE8专有属性。
举个例子：

div {
  box-sizing: border-box; /* 标准盒模型 */
  box-sizing: border-box\9; /* IE6、IE7、IE8 */
  *box-sizing: border-box; /* IE6、IE7 */
  _box-sizing: border-box; /* IE6、IE7 */
}

4.3、选择器前缀法

IE6可以使用div
IE7可以使用 + div
IE8可以使用:root div

*div {
  box-sizing: border-box; /* IE6 */
}
* + div {
  box-sizing: border-box; /* IE7 */
}
:root div {
  box-sizing: border-box; /* IE8 */
}

4.4、JS判断法

if (navigator.userAgent.indexOf('MSIE 6') > -1) {
  // IE6
}
if (navigator.userAgent.indexOf('MSIE 7') > -1) {
  // IE7
}
if (navigator.userAgent.indexOf('MSIE 8') > -1) {
  // IE8
}

5、面试中的盒模型问题

IE盒模型和W3C标准盒模型的区别：

（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content
+padding+border。

// js获取盒模型的宽高
var div = document.getElementById('div');
// 内联样式的获取方式：
var width = div.style.width;
var height = div.style.height;
// 渲染样式的获取方式：
var width = window.getComputedStyle(div, null).width; // 非IE
var height = window.getComputedStyle(div, null).height; // 非IE
var width = div.currentStyle.width; // IE
var height = div.currentStyle.height; // IE
// 获得dom到浏览器边缘的距离：
var left = div.offsetLeft;
var top = div.offsetTop;
// 获得dom到文档的距离：
var left = div.getBoundingClientRect().left;
var top = div.getBoundingClientRect().top;