CSS盒模型（BoxModel）每个HTML元素都可以看成一个盒子，父元素和子元素的关系是一样的。一个小盒子放在大盒子里，兄弟元素就像是在一个大盒子里放了两个小盒子。盒子模型包括四个属性：margin、border、padding和content。个人认为盒模型主要是用来区分如何计算元素的大小。标准盒模型（W3C盒模型）由content+padding+border+margin组成。盒子的大小由：内容的宽高+内边距的大小+边框的大小+外边距的大小决定div{width:200px;高度：200px；背景：红色；填充：10px；边框：10px实心#ccc；margin:10px;}//框宽：260px;高度：260px；//div元素宽度：240px；高度：240px；//内容宽度200px，高度：200px；weirdboxmodel（IEboxmodel）weirdboxmodel是由content+padding+border组成盒子的大小由：width和height决定div{width:200px;高度：200px；背景：红色；填充：10px；边框：10px实心#ccc；margin:10px;}//框宽：200px;高度：200px；//div元素宽度：200px；高度：200px；//内容宽度160px，高度：160px；标准盒模型的宽高是指content的大小，怪异盒模型的宽高是指content+padding+border当box-sizing为content-box时，使用W3C盒模型，当box-sizing为border-box时，使用IE框模型。paddingpadding-direction(left,right,top.bottom)表示设置指定方向的padding。padding简写，它的属性值按照top,right,bottom,left的顺序，如果缺少值，就找相反的值。如果只有一个值，则上、右、下、左四个方向的值相同。div{宽度：200px;高度：200px；背景：红色；填充：10px20px；padding-left:30px;}Marginmargin-direction(left,right,top.bottom)表示设置指定方向的边距。margin的简写，它的属性值按照top、right、bottom、left的顺序。如果存在缺失值，则查找反向值。如果只有一个值，则上、右、下、左四个方向的值都相同。div{宽度：200px;高度：200px；背景：红色；边距：10px20px30px40px；margin-top:50px;}边框属性border1。边框宽度border-width2。borderstyleborder-style，属性值：solidreallinedasheddotteddotteddoubledouble3.边框颜色border-colordiv{width:200px;高度：200px；边框宽度：3px；边框样式：双；边框颜色：红色；}4.改变某一个边框的属性值，border-directionleft,right,top,bottom)border-left:2pxdashedred;border-bottom:4px纯橙色;5.改变一个border的具体属性的属性值，border-direction-attribute(width,style,color)border-right-style:dotted;左边框颜色：粉红色；边框顶部宽度：1px；
