盒子模型（标准盒子模型与怪异盒子模型）

一、什么是盒子模型:

CSS盒子模型 (Box model) 就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性

首先一个盒模型包含了padding (内边距) margin (外边距) border(边框) 内容 (content) 也就是元素本身的width,height

！margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
！padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

padding和margin的异同点：

padding：

1. 语法结构

（1）padding-left:10px; 左内边距
（2）padding-right:10px; 右内边距
（3）padding-top:10px; 上内边距
（4）padding-bottom:10px; 下内边距
（5）padding：10px; 四边统一内边距
（6）padding:10px 20px; 上下、左右内边距
（7）padding:10px 20px 30px; 上、左右、下内边距
（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

2. 值描述

（1）length 规定具体单位记的内边距长度
（2）% 基于父元素的宽度的内边距的长度
（3）auto 浏览器计算内边距
（4）inherit 规定应该从父元素继承内边距

3. 浏览器兼容问题

（1）所有浏览器都支持padding属性
（2）任何版本IE都不支持属性值“inherit”

margin

1. 语法结构

（1）margin-left:10px; 左外边距
（2）margin-right:10px; 右外边距
（3）margin-top:10px; 上外边距
（4）margin-bottom:10px; 下外边距
（5）margin:10px; 四边统一外边距
（6）margin:10px 20px; 上下、左右外边距
（7）margin:10px 20px 30px; 上、左右、下外边距
（8）margin:10px 20px 30px 40px; 上、右、下、左外边距

2. 值描述

（1）length 规定具体单位记的外边距长度
（2）% 基于父元素的宽度的外边距的长度
（3）auto 浏览器计算外边距
（4）inherit 规定应该从父元素继承外边距

3. 浏览器兼容问题

（1）所有浏览器都支持margin属性
（2）任何版本IE都不支持属性值“inherit”

二、盒子模型能够给我们解决什么问题:

盒子模型主要是针对页面布局的时候来使用，他规范了我们页面的所有所有元素的一个布局规范是由外向内进行布局。

三、标准盒子模型盒怪异盒子模型:

在标准的盒模型中一个盒子的宽度是: margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width).而在怪异盒模型中:一个快的宽度=内容的(width)+margin(左右(这里的内容width包含了padding(左右内边距)+border(左右边框))。

四、标准盒模型怪和异盒模型的转换:

box-sizing中比较常用的两个属性值为 content-box 和 border-box，它可以改变盒子模型的解析计算模式

当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式，

当设置box-sizing:border-box时，采用怪异模式进行计算。