問題描述
當我們使用textarea組件時,會出現(xiàn)設(shè)置寬度100%,但其超出了父級Div,如下圖
解決方案?
添加box-sizing:border-box;屬性,即可完美解決。
屬性定義及使用說明
box-sizing 屬性定義如何計算一個元素的總寬度和總高度，主要設(shè)置是否需要加上內(nèi)邊距(padding)和邊框等。
例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"。這樣就可以讓瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。
默認情況下，元素的寬度(width) 和高度(height)計算方式如下：
width(寬度) + padding(內(nèi)邊距) + border(邊框) = 元素實際寬度 height(高度) + padding(內(nèi)邊距) + border(邊框) = 元素實際高度
參數(shù)說明
border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒，就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。文章來源：http://www.zghlxwxcb.cn/news/detail-839247.html
通俗而言
給div一個特定的寬度，再給div添加padding或者border時，div的寬度和高度都會根據(jù)padding或border的值而變大。而使用box-sizing：border-box屬性后，再給div添加padding或border時，div的固定寬度將不會改變。文章來源地址http://www.zghlxwxcb.cn/news/detail-839247.html
到了這里，關(guān)于uni-app開發(fā)微信小程序,textarea組件寬度設(shè)置,解決超出父級div的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
