• 一站式百度SEO排名優化!-找老劉博客 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

    首頁>>前端開發

    因為padding和border寬度導致子元素超過父元素的解決方法

    首頁 2022-09-24 前端開發 893 ℃Tags:


    在 CSS 盒子模型的默認定義里,對一個元素所設置的 width 與 height 只會應用到這個元素的內容區。如果這個元素有任何的 border 或 padding ,繪制到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值。

    如對child container賦予如下的css,最終的樣式將會變成這樣。

    .child{
    width: 100%;
    border: solid #5B6DCD 10px;
    padding: 5px;
    }

    image.png

    為了讓子元素被完全包在父元素中,可以這樣修改代碼。

    image.png

    但如果每一層都要這樣,豈不是過于麻煩。為了簡單方便解決這個問題,就要用到css中一個叫‘box-sizing’的屬性,‘box-sizing’有content-box和border-box兩個值,一般的盒子模型默認是content-box,所以我們只要將子組件的box-sizing改為寬度包含border和padding的border-box就可以了。

    .child{
    box-sizing: border-box;
    width: 100%;
    border: solid #5B6DCD 10px;
    padding: 5px;
    }


    搜索
    分類
    熱門標簽
  • 首頁
  • 電話
  • QQ
  • ?
    聯系老劉手機
    1043025812
    聯系老劉微信
    掃描微信二維碼
    34pao国产成视频永久免费_国产精品专区第5页_无码精品A∨在线观看_国色天香精品一卡二卡三卡_ww.国产精品