CSS属性介绍 - textarea样式

在网页开发中，textarea（文本域）是常见的一种表单元素，常常用于用户输入多行文本，如评论框、发帖框等。为了美观和功能性，我们需要对textarea进行一定的样式设置。

以下是对应用的CSS属性介绍：

textarea {
  -webkit-box-sizing: border-box; /* Safari和Chrome内核的box-sizing，一些旧版浏览器也支持 */
  -moz-box-sizing: border-box; /* Firefox内核的box-sizing */
  box-sizing: border-box; /* 标准盒子模型 */
  width: 100%; /* 设置宽度为100% */
}

box-sizing

box-sizing属性用于控制元素的盒子模型，可取的值包括content-box、padding-box、border-box。

• content-box：CSS默认值，表示盒子模型的大小仅包括元素的content部分，不包括padding、border和margin等部分，也就是元素的宽度等于content的大小。
• padding-box：表示盒子模型的大小包括元素的content和padding部分，但不包括border和margin等部分。元素宽度等于content和padding的大小之和。
• border-box：表示盒子模型的大小包括元素的content、padding和border部分，但不包括margin等部分。元素宽度等于content、padding和border的大小之和。

在以上代码片段中，我们使用的是border-box模型，意味着元素的大小包括content、padding和border部分，宽度等于这三者的大小之和。

width

width表示元素的宽度，可以使用具体数值如100px，也可以使用百分比如100%。

在以上代码片段中，我们将textarea的宽度设为100%，即与其父元素的宽度相等。

兼容性

以上代码片段涉及到较新的CSS3属性，可能不被部分旧版浏览器所支持。

其中，box-sizing属性Safari、Chrome、Firefox等主流浏览器都已经支持，但IE8及以前的版本不支持该属性。

若需要兼容到IE8及以下版本，可以使用box-sizing的Hack写法或Javascript兼容方案。详细可参考前端开发实用技巧之——盒子模型的兼容性处理。

参考资料

• CSS3 box-sizing 属性
• CSS3 width 属性