本文探讨了CSS布局中常见的一个问题——内部元素的border和padding导致外部div盒子被撑破。通过举例说明了一个在制作类似QQ空间网页时遇到的textarea撑破div的情况。文章提出使用calc函数来动态计算宽度，避免手动计算和调整，从而简化了此类问题的解决方案。通过calc(100% - 2 * (border值 + padding值))，可以确保内联元素不会超出其容器。
相信大家在做网页页面设计的时候，都会遇到这么一个问题：在设计俄罗斯套盒的时候（我在说什么？）咳咳，即当盒子里面再套一个盒子的时候，里面盒子由于外面盒子的border和其本身设置的border，padding，margin等元素，会把外面的盒子给撑破了。即使在外面的盒子加了padding也不能解决这个情况。
我在学习设计一个类似QQ空间的网页的时候也遇到了这个问题，里面text area撑破了外面的div，代码和效果图片如下：
#top{
border:1px solid #dddddd;
height:150px;
width:600px;
position:absolute;
left:0
最低0.47元/天 解锁文章
扫一扫
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
