CSS盒子模型

CSS的盒模型分為:content-box 和 border-box 兩種

元素的盒模型組成

??元素的盒模型主要由:margin、border、padding、content(由外到內(nèi))組成

CSS盒模型樣式的設(shè)定:box-sizing:content-box(默認(rèn))/border-box

content-box 與 border-box的區(qū)別

??content-box 與 border-box 的區(qū)別主要就是它們的width、height計(jì)算方法不同。
??顧名思義 content-box 的 width、height 只由 content 決定
??同樣的 border-box 的 width、height 由 content + padding + border 決定
兩種盒模型
相同樣式,content-box 與 border-box 的區(qū)別
相同樣式不同盒模型的區(qū)別

???。?! 當(dāng)涉及到margin padding border 樣式的時(shí)候,建議使用border-box盒模型

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 其實(shí),CSS就三個(gè)大模塊: 盒子模型 、 浮動(dòng) 、 定位,其余的都是細(xì)節(jié)。要求這三部分,無(wú)論如何也要學(xué)的非常精通...
    王玉偉的偉閱讀 1,192評(píng)論 0 2
  • 前言 總括: 對(duì)于盒子模型,BFC,IFC和外邊距合并等概念和問(wèn)題的總結(jié) 原文地址:從CSS盒子模型說(shuō)起 知乎專欄...
    秦至閱讀 845評(píng)論 0 3
  • 盒子模型用于處理元素的內(nèi)容、內(nèi)邊距、邊框和外邊距的方式簡(jiǎn)稱。元素框的最內(nèi)部分是實(shí)際的內(nèi)容,直接包圍內(nèi)容的是內(nèi)邊距。...
    Be_somebody閱讀 1,210評(píng)論 0 0
  • 盒子的屬性:width、height、padding、border、margin 盒子分兩種: 1.標(biāo)準(zhǔn)W3C盒子...
    HUAC閱讀 512評(píng)論 0 0
  • 今天是星期五,下午的社團(tuán)活動(dòng)是彩泥。 材料是一個(gè)圓盤、彩泥。步驟是。 1,先用彩泥在圓盤做成一個(gè)花瓶。...
    小鬧哥閱讀 891評(píng)論 0 0

友情鏈接更多精彩內(nèi)容