一.标准盒模型与怪异盒模型区别

在了解这两种盒模型的区别之前首先我们要先了解什么是盒模型（box-mold），盒模型顾名思义就是在css中的盒子，把HTML的元素封装成盒子用来设计和布局时使用，盒模型中又包含了以下几个元素： (1) 内容（content） （2）填充（padding) 3.边框（border） （4）边距（margin）

• 标准盒子模型=content(内容)+border(边框)+padding(内边距)
• 怪异盒子模型=content(内容)(已经包含了 padding 和 border)

1.设置标准盒模型

 box-sizing: content-box;

标准盒模型的组成

标准盒模型的宽度高度指的是由content(内容)+border(边框)+padding(内边距)三部分组成的宽高,改变其中任意组成部分宽高会造成盒子整体大小发生改变

2.设置怪异盒模型

box-sizing: border-box;

怪异盒模型的组成

标准盒模型的内容组成是一个整体,改变怪异盒模型的组成部分的宽高不会造成盒子整体大小发生改变,而是内部重新分配组成部分的宽高,如果需要改变怪异盒模型大小,只需设置当前盒子宽高即可