制作网页时候总会碰到div里面的boxdiv比外面div大的这种情况，导致把元素盒子撑破
<html>
<head>
<style>
.domo{
width: 300px;
background: #00bafa;
padding: 3px 0;
}
.box{
width: 100%;
background:#f0c040;
height: 50px;
padding: 10px;
border:5px solid green;
/*width: -moz-calc(100%-(10px+5px)*2);
width:-webkit-calc(100%-(10px+5px)*2);
width: calc(100% - (10px + 5px) * 2);*/
}
</style>
</head>
<body>
<div class="domo">
<div class="box"></div>
</div>
</body>
</html>
效果图为
外面box超出父div
calc()能很好的解决这个问题
.box{ width: 100%; background:#f0c040; height: 50px; padding: 10px; border:5px solid green; width: -moz-calc(100%-(10px+5px)*2); width:-webkit-calc(100%-(10px+5px)*2); width: calc(100% - (10px + 5px) * 2); }
添加calc（）后效果图为
原文：http://www.cnblogs.com/shineda/p/5014190.html