標準盒模型和怪異(IE)盒模型

2021-09-25 21:46:02 字數 499 閱讀 7446

盒子模型的本質就是乙個盒子,是乙個包圍html元素的空間,包括:content,border,margin,padding

盒模型分為標準盒模型和怪異(ie)盒模型兩種

標準盒模型的計算為:標準盒模型的寬度 =  width + 左右margin + 左右padding + 左右border

怪異盒模型的計算為:怪異盒模型的寬度 = width + 左右margin 其中,怪異盒子的內容寬度width包含了左右padding和左右border

css如何讓設定這兩種模型:

box-sizing:content-box    //標準盒子模型

box-sizing:border-box   //怪異盒子模型

標準盒模型和怪異盒模型

ie盒模型 怪異盒模型 和標準盒模型的區別就是,ie盒模型中width和height除了content區域外,還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下,width和heigh...

標準盒模型和怪異盒模型

盒子模型眾所周知,這裡先簡單介紹一下。可以看到,在標準盒模型 box sizing content box 下,width和height是內容區域即content的width和height。而盒子總寬度為 在標準模式下,乙個塊的總寬度 width margin 左右 padding 左右 borde...

標準盒模型和怪異盒模型

盒模型的組成,由內而外只要由 content,padding,border和margin組成。標準盒模型和怪異盒模型的主要區別就是所包含的內容。標準盒模型的內容就是content的大小 怪異盒模型的內容是content padding border 怪異盒模型的寬 content的寬 padding...