CSS盒子模型

　

　　盒子模型：可以用来对元素进行布局，包括内边距(padding)，边框(border)，外边距(margin)，和实际内容(content)这几个部分。

 

　　   盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型）--- content-box 、第二种IE标准的盒子模型（怪异盒模型）--- border-box

 

　　　　一、标准盒模型和怪异盒模型的区别在哪里

　　　　　　在标准盒模型下，设置元素的width/height ，只是包括content 内容部分，而在怪异盒模型下，还会包括 width=content+padding+border

　　　　意思就是

　　　　　　在标准下： 元素的大小=content(width) + padding +border +margin

　　　　　　在怪异下：元素的大小=(content+padding+border)width + margin

 

　　　　二、如何设置盒模型

　　　　　　CSS属性中有一个属性为 box-sizing

　　　　　　box-sizing 有三个值

　　　　　　　　1 content-box : 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

　　　　　　　　2 border-box : border和padding划归到width范围内，可以理解为是IE的怪异盒模型

　　　　　　　　3 padding-box : 将padding算入width范围