表单文本域和文本区域

Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily there's a quick CSS solution to this problem!

如果您希望文本区域跨越100％的宽度，则使用文本区域宽度可能会很痛苦。 为什么会痛？ 因为如果textarea的包含元素具有填充，则您的"width:100%" textarea可能会延伸到父容器之外-至少可以说这是令人沮丧的前景。 幸运的是，有一个快速CSS解决方案可以解决这个问题！

CSS (The CSS)

box-sizing to the rescue!

box-sizing以进行救援！

textarea {	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;	width: 100%;}

Setting the box-sizing to border-box allows the textarea to respect its parent container's padding and border, recalculating what 100% actually means.  If the box-sizing were content-box, the textarea would continue to stretch outside the parent container as it would have before.

将box-sizing设置为border-box可使textarea尊重其父容器的填充和边框，重新计算100%实际含义。 如果box-sizing为content-box ，则文本区域将像以前一样继续延伸到父容器之外。

翻译自:

表单文本域和文本区域