本文探讨了CSS中的盒模型问题，特别是在父元素有padding时，textarea元素100%宽度会超出边界。解决方案是使用box-sizing:border-box属性，使元素的边框和内填充计算在宽度之内。box-sizing属性有content-box和border-box两种模式，前者默认将边框和内填充计算在元素外部，后者则包含在内。通过调整box-sizing，可以更好地控制元素尺寸。
<div style="padding-left: 10px;padding-right: 10px;">
<textarea style="width:100%; height:220px;border: 1px solid #F2F2F2;"></textarea>
</div>上述代码，父元素加了padding填充，<textarea> 的width再设置为100% 就会超出div的范围，
即使父元素不加padding填充，由于设置了<textarea>的border是1px, 所以左右边框会占据2px的宽度，也是会超出2px的，这时可以给textarea加如下样式解决：
textarea{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}在盒子模型中，padding 、margin、border等的宽高是计算在盒子外的，
而 box-sizing : border-box 表示盒子的宽高计算在盒子内部，
box-sizing共有3种取值：
content-box ：padding 、margin、border等的宽高是计算在盒子外的
border-box：padding 、margin、border等的宽高是计算在盒子内部的
inherit：从父类继承box-sizing的值
扫一扫
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
