设置div的时候有时候用到宽度100%会导致撑破盒子的问题解决

相信大家在做网页页面设计的时候，都会遇到这么一个问题：在设计俄罗斯套盒的时候（我在说什么？）咳咳，即当盒子里面再套一个盒子的时候，里面盒子由于外面盒子的border和其本身设置的border，padding，margin等元素，会把外面的盒子给撑破了。即使在外面的盒子加了padding也不能解决这个情况。

我在学习设计一个类似QQ空间的网页的时候也遇到了这个问题，里面text area撑破了外面的div，代码和效果图片如下：

#top{
		border:1px solid #dddddd;
		height:150px;
		width:600px;
		position:absolute;
		left:0;
		right:0;
		margin:0px auto;
		
		padding-left:16px;
		padding-right:16px;
		padding-up:6px;
		
		border-dadius:6px;
		
	}
<div id="top">
	
		<font style="color:#668FB8;font-size:12px;font-family:'微软雅黑';">有什么事情要分享?</font>
		<br />
		<textarea style="border:1px solid #dddddd; width:100%; margin:16px 0px 16px; resize:none;"></textarea>
		<br />
		<a href="#" style="display:inline-block; border-radius:4px;background-color:#FF8140;color:#fff;width:80px;height:28px;line-height:28px;text-align:center;font-size:14px;float:right;text-decoration:none;">发表</a>
		<div class="clearbox"></div>
	
	</div>

即使在外面的div加了padding也无济于事。

当然这个问题可以很粗暴地解决，直接根据外面div的border和里面textarea的border，padding，margin等属性暴力地算出其宽度，然后设置一下即可解决。虽然计算两个这样的宽度对于大部分人来说是小菜一碟，但是一个项目总是遇到要这样的计算，未免也太麻烦了吧。

那么这里就需要用到calc这个函数，就以我这个例子为例来介绍一下calc是如何计算宽度。

首先，根据我给的代码中，造成撑破外面盒子的有两个属性，一个外面div的border，数值1px，另一个是里面的textarea的border，数值是1px，可以得出超过的长度一共为2px * 2 。然后用100%减去超过的总长度，得到的结果带入代calc中，就可以自动计算出合适的宽度了，代码如下：

width:calc(100% - 2px*2)

calc

函数里面加号减号前后要留空格，乘法除法前后可留可不留空格。
括号里面可以是加减乘除运算，可以使用各种单位进行混合运算。

加入这个宽度计算之后，问题得到完美解决。

<textarea style="border:1px solid #dddddd; width:calc(100% - 2px * 2); margin:16px 0px 16px; resize:none;"></textarea>

参考地址：https://www.cnblogs.com/avon/p/5908393.html