在CSS中,"box model"这一术语是用来设计和布局时使用,而后在网页中基本上都会显示一些方方正正的盒子。咱们称为这种盒子叫盒模型。布局
盒模型有两种:标准模型和IE模型。咱们在这里重点讲标准模型。设计
width:内容的宽度blog
height: 内容的高度model
padding:内边距,边框到内容的距离im
border: 边框,就是指的盒子的宽度margin
margin:外边距,盒子边框到附近最近盒子的距离img
若是让你作一个宽高402*402的盒子,您如何来设计呢?di
答案有上万种,甚至上一种。co
若是一个盒子设置了padding,border,width,height,margin(我们先不要设置margin,margin有坑,后面课程会讲解)术语
盒子的真实宽度=width+2*padding+2*border
盒子的真实宽度=height+2*padding+2*border
那么在这里要注意看了。标准盒模型,width不等于盒子真实的宽度。
另外若是要保持盒子真实的宽度,那么加padding就必定要减width,减padding就必定要加width。真实高度同样设置。