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

这篇具有很好参考价值的文章主要介绍了uni-app开发微信小程序,textarea组件宽度设置,解决超出父级div。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述

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

u--textarea 宽度,uni-app,微信小程序,小程序

解决方案

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

u--textarea 宽度,uni-app,微信小程序,小程序

属性定义及使用说明

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的固定宽度将不会改变。文章来源地址https://www.toymoban.com/news/detail-839247.html

到了这里，关于uni-app开发微信小程序,textarea组件宽度设置,解决超出父级div的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！