uni-app开发微信小程序,textarea组件宽度设置,解决超出父级div

问题描述

当我们使用textarea组件时,会出现设置宽度100%,但其超出了父级Div,如下图

解决方案 

添加box-sizing:border-box;属性,即可完美解决。

属性定义及使用说明

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认情况下，元素的宽度(width) 和高度(height)计算方式如下：

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度

参数说明

border-box：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

通俗而言

给div一个特定的宽度，再给div添加padding或者border时，div的宽度和高度都会根据padding或border的值而变大。而使用box-sizing：border-box属性后，再给div添加padding或border时，div的固定宽度将不会改变。