关于CSS盒模型（box model）

深入理解CSS盒模型

刚完过年，大家是不是都在物色新的工作机会呢？可能在面试的时候，我们大多数人都会被问到一个问题，那就是CSS盒模型。这个看似简单的问题，实际上却不太好回答，今天我们从以下几个方面谈一谈CSS盒模型：
1、什么是盒模型
2、标准盒模型和怪异盒模型（IE盒模型）的区别
3、我们应该如何设置和选择盒模型
4、浏览器兼容问题

1. 基本概念: 什么是盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，从内到外它包括：
内容（content）、内边距（padding） 、边框（border）、外边距（margin）

content： 盒子的内容，显示文本和图像
padding： 清除内容周围的区域
border： 包裹内容和内边距的外框
margin： 清除边框外的区域

2. 标准盒模型和怪异盒模型（IE盒模型）的区别

在标准盒模型下，设置的width和height就是content的width和height
盒子总宽度 = width + margin(left + right) + border(left + right) + padding(left + right)
盒子总高度 = height + margin(top + bottom) + border(top + bottom) + padding(top + bottom)

而怪异盒模型（IE盒模型）下，设置的width和height包括了content、padding和border。
盒子总宽度 = width + margin(left + right)
盒子总高度 = height + margin(top + bottom)

3. 我们应该如何设置和选择盒模型

页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：

content-box (W3C 标准盒模型)
border-box (IE 盒模型)
padding-box
margin-box (浏览器未实现)

那我们应该在什么时候使用怪异盒模型什么时候不使用怪异盒模型呢？
假如我们接的需求是需要我们写两个div元素占满父元素（如下图）这两个元素大小完全相同：

这个时候就是我们的标准盒模型

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

    
我是上边
    
我是下边

但是如果突然该需求了，产品经理说我需要上边的有个边框，但是还让他们的大小保持一致，这时候如果在原来的基础上直接加边框的话，上边的元素宽高会溢出，使上下两个元素大小不一致，影响页面布局。如下图：

    
我是上边
    
我是下边

这个时候上面的元素内容虽然大小仍然和下面的元素保持一致，但是因为加上了边框，使上面的元素宽高溢出，这时候如果我们如果有两种处理方式：
一、将上面的元素的width减去border（left+right），height减去border（top+bottom）

    
我是上边
    
我是下边

二、将css属性box-sizing设置为border-box：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    
我是上边
    
我是下边

进行修改之后就会变成下图：

4. 浏览器兼容问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

喜欢前端技术的小伙伴可以添加博主个人vx进行讨论：