標(biāo)準(zhǔn)盒模型 + ie怪異盒模型

一、基本概念

什么是盒模型:盒模型包括內(nèi)容(content)、外邊距(margin)、邊框(border)、內(nèi)邊距(padding)

Chrome盒模型

二、標(biāo)準(zhǔn)模型與IE模型區(qū)別

兩者寬度不一樣
標(biāo)準(zhǔn)模型寬度


IE模型

width= border+padding+content 沒有margin


標(biāo)準(zhǔn)模型寬度

width = content 沒有padding、border、margin
兩者的高度計(jì)算一樣

三、盒模型切換

css3新屬性

    box-sizing: border-box;ie模式
border-box

計(jì)算寬度 剛好等于100px

    box-sizing: border-box;標(biāo)準(zhǔn)模式
content-box

四、js獲取寬高

https://segmentfault.com/a/1190000013069516

?著作權(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)容

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,459評(píng)論 0 11
  • 基本慨念 內(nèi)容區(qū)域(content)是包含元素真實(shí)內(nèi)容的區(qū)域。它通常包含背景、顏色或者圖片等,位于內(nèi)容邊界的內(nèi)部,...
    晴天的晴q閱讀 2,405評(píng)論 0 0
  • 其實(shí),CSS就三個(gè)大模塊: 盒子模型 、 浮動(dòng) 、 定位,其余的都是細(xì)節(jié)。要求這三部分,無論如何也要學(xué)的非常精通...
    王玉偉的偉閱讀 1,195評(píng)論 0 2
  • 遠(yuǎn)古以來,潦倒的魔法學(xué)徒們就發(fā)現(xiàn)了小麥的一種特殊食用方法。他們驅(qū)使巨石將麥子一遍遍碾壓,得到了細(xì)碎的麥粉,然后和水...
    秦三十二閱讀 426評(píng)論 0 6
  • https://github.com/Zane6w/CoordinateTransformation
    冰霜海膽閱讀 296評(píng)論 0 0

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