原来的盒子，添加border,padding都可以让盒子本身变大，为了解决这个问题，css3推出了新的盒子模型
实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ width: 300px; height: 300px; border: 1px solid red; } .box{ width: 100px; height: 100px; float: left; border: 1px solid #ccc; box-sizing: border-box; } .box:first-child{ background: green; } .box:nth-child(2){ background: yellow; } .box:nth-child(3){ background: blue; } </style> </head> <body> <!--盒子模型 的计算方式 margin+padding+border+content--> <!--新的css3盒子模型，可以在不改变父元素宽高等属性的情况下，让子元素一行显示--> <div class="wrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>1：box-sizing:content-box,border-box content-box是默认值 计算方式 padding+border+width border-box 盒子大小始终是元素width
实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ width: 100px; height: 100px; background: red; margin: 100px auto; padding: 10px 20px; border: 15px solid yellow; } .wrap1{ width: 100px; height: 100px; background: red; margin: 100px auto; padding: 10px 20px; border: 15px solid yellow; box-sizing: border-box; /*box-sizing: content-box;*/ } </style> </head> <body> <div class="wrap"> </div> <div class="wrap1"> </div> </body> </html>2:盒子阴影（边框阴影）： box-shadow:x y 模糊度（可选） 颜色 内阴影; box-shadow: 20px 20px 20px yellow,30px 30px 30px green;
实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 300px; background: #ccc; margin: 100px auto; box-shadow:5px 5px red ; /*box-shadow:10px 10px red 10px;/*20px 20px 20px yellow,30px 30px 30px blue;*/*/ } </style> </head> <body> <div></div> </body> </html>