1. css盒模型由两个盒子组成，外在的控制是否换行的盒子，以及内在的控制元素内容的盒子。比如：display: inline-block, 则它的外在的盒子就是inline也就是不占据一行，而block则表示内部的元素具有块状特性。所以，display: inline其实就是display: inline-inline的缩写，display: block就是display: block-block的缩写。
2. 每一个内在的盒子有: width/height, padding, border, margin这几个控制盒子大小的属性。其中 width/height控制元素内容大小，padding则控制元素内容到border线内侧距离，border则是元素外围边框大小，而margin则是控制与其他元素的间距，它的背景透明。
3. 对于早期，计算一个元素的占据大小，需要通过width +2* padding + 2*border来计算，css3中提出了box-sizing：border-box，通过这样设置，就可以使元素最终的宽高就是设定的width/height, 浏览器会根据width/height, padding, border的大小来自动调整内部元素的大小。

盒子模型分为ie盒子模型和标准盒子模型

1. ie盒子模型 padding+content+border border-box
2. 标准盒子模型 content content-box

1.基本概念：标准模型+IE模型

标准盒子模型：包括margin,border,padding,content,并且content部分不包括其他部分
IE盒子模型：包括margin,border,padding,content，content包含了border和padding

2.css如何设置这两种模式

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

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

1. dom.style.width:

只能获取内联样式，因此是不准确的

2. dom.currentStyle.width :

与window.getComputedStyle方法功能相同，实现在旧版本的IE浏览器中
3）window.getComputedStyle(dom).width:
方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性值。因此输出是准确的
4）dom.getBoundingClientRect().width
返回一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合。
DOMRect对象包含了一组用于描述边框的只读属性--left,top,right,bottom,单位为像素。除了width和height外的属性都是相对于视口的左上角位置而言的。

• 盒模型分为： IE盒模型和W3C盒模型

• 盒模型是由 content、padding、border、margin组成的

• 区别：

IE盒模型的width = content + padding + border
W3C盒模型的width = content

• CSS3的属性box-sizing可以指定两种盒模型

其中border-box属性为IE盒模型
content-box属性为W3C盒模型

盒模型分为标准盒模型和IE盒模型
标准盒模型：width=content
IE盒模型：width=content+padding+border

按我的理解盒子就是一个我们平常常见的纸箱，纸箱皮中间有层薄薄的纸板间隔，这层纸板就是border， 在这个纸板的外边就是纸箱皮就是margin，纸板内边的纸箱皮就是padding，纸箱里面能放东西的部分就是css的容器,把纸箱打包起来整个部分就是CSS盒子。

1.基本概念：标准模型+IE模型

标准盒子模型：包括margin,border,padding,content,并且content部分不包括其他部分
IE盒子模型：包括margin,border,padding,content，content包含了border和padding

2.css如何设置这两种模式

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

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

dom.style.width:
只能获取内联样式，因此是不准确的

dom.currentStyle.width :
与window.getComputedStyle方法功能相同，实现在旧版本的IE浏览器中
3）window.getComputedStyle(dom).width:
方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性值。因此输出是准确的
4）dom.getBoundingClientRect().width
返回一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合。
DOMRect对象包含了一组用于描述边框的只读属性--left,top,right,bottom,单位为像素。除了width和height外的属性都是相对于视口的左上角位置而言的。

盒模型有content内容区，border边框、padding内边距、margin外边距
标准盒子：box-size:content-box
width=content
ie盒子：box-size：border-box
width=padding+content+border

概念

当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的CSS基础盒模型，将所有元素表示为一个个矩形的盒子

CSS中组成一个块级盒子需要:

• Content box: 这个区域是用来显示内容，大小通过 width 和 height相关属性设置
• Padding box: 包围在内容区域外部的空白区域， 大小通过 padding 相关属性设置
• Border box: 边框盒包裹内容和内边距，大小通过 border相关属性设置
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin相关属性设置

标准盒子模型

标准盒子模型，是浏览器默认的盒子模型

• 盒子总宽度 = width + padding + border + margin;
• 盒子总高度 = height + padding + border + margin

width/height 只是内容高度，不包含 padding 和 border值

##　替代（IE）盒模型

为元素设置 box-sizing: border-box 来使用替代模型

• 盒子总宽度 = width + margin;
• 盒子总高度 = height + margin;

width/height 包含了 padding和 border值

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing: content-box|border-box|inherit:

• content-box： 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
• border-box ：元素的 width/height 包含 padding，border，与替代（IE）盒模型表现一致
• inherit ：指定 box-sizing 属性的值，应该从父元素继承

盒子模型包括margin,border,padding,width,height几个属性，同时box-sizing有分为标准盒模型和怪异盒模型，区别是盒子大小计算的不同，怪异盒模型包括padding和border的宽度，而标准盒模型只包括自己本身的宽高，一般开发我们用怪异盒模型比较多，因为这样更符合我们的常规理解

在css中，盒子模型可以分成W3C标准盒子模型和IE怪异盒子模型
标准盒子模型=content
怪异盒子模型=content+padding+border

分为标准模型 和 IE盒模型
标准盒模型的计算方式是：content
IE盒模型的计算方式是：content+padding+border

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

盒子模型是由内容content、内边距padding、边框border、外边距margin组成
在css中可以指定box-sizing为content-box或者border-box，
指定content-box，width和height就只包含content
指定border-box，width和height包含content、padding和border