元素大小超出包裹元素,可能出現的原因以及對應的解決方案

今天整裏完flex,突然想到了以前遇見的一個問題,挺有意思的的,今天整裏出來

以前寫小程序的時候遇到過一種情況,就是當我在一個頁面中,給一個按鈕設置寬度100%的時候,按鈕的寬度總是會超出父元素的包裹框(子元素爲了美觀,設置了padding)

當時想的是,手動計算寬度,後來上網看了原因

是因爲當我們給子元素設置padding的時候,我們的元素的實際跨度其實是元素的真實的寬,加上去我們padding的寬度2*

css3引入了一個box-sizing:border-box。可以解決出現的這種問題

box-sizing三個屬性值

content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。

border-box:爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。

inherit:規定應從父元素繼承 box-sizing 屬性的值。

希望能幫到各位!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章