CSS 盒模型

一、什么是CSS盒模型

css的盒模型由里到外包括：content（内容）、padding（内边距）、border（边框）、margin（外边距）四个部分。

css盒模型有两种：content-box + border-box

二、content-box和border-box的区别

唯一区别就是元素的宽度

content-box：内容就是盒子的边界 元素的宽度width=内容宽度

border-box：边框才是盒子边界 元素的宽度width=内容宽度 + padding + border

CSS如何设置两种盒模型

在不设置box-sizing的情况下，box-sizing 默认是(标准盒子)content-box

但是border-box会更好用一点。

//在不设置box-sizing的情况下，box-sizing 默认是(标准盒子)content-box .
 
/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;