CSS的盒子模型太抽象了,通俗講是什麼意思?

時間 2021-06-08 07:54:48

1樓:小叮噹

盒子模型分為標準盒子模型怪異的盒子模型

1.標準的盒模型 (content-box)

你設定的寬和高(width/height)是內容的部分寬高,所以盒子的實際寬度=內容的寬高+boder+padding

我設定的寬為100px高為100px,是內容的寬高,實際盒子的寬150px高為150px 寬=100px(conttent)+20px(padding)+5*2(border)

所以可以得出:如果你想要的盒子就是寬100px 高為100px的話,就不能再改變盒子的padding和border的值,選用border-box

2.怪異的盒子模型(border-box)

你設定的寬和高(width/height)就是盒子的大小,設定的padding和border不會改變盒子的大小,相反的是內容區的高度會隨之而改變

從上面的圖可知,只是改變了box-sizing為border-box

設定的寬高都為100px 盒子的padding值20px border值為5px,盒子的寬度沒有改變內容的寬度卻減小了,變成了50px,下面我繼續變大padding可以明顯的看見變化

padding為25px border為5px content寬度為40px ,盒子的大小沒有變化,還是100px(25*2+40+5*2)

padding為20px border為10px content寬度為40px ,盒子的大小沒有變化,還是100px(20*2+40+10*2)

這麼說你能理解吧

說一說CSS盒子模型,盒子模型裡面有哪些坑嗎?

貝努力 不同人對 坑 的概念都有不同,如果你認為box sizing,外邊距合併,浮動,垂直居中,水平居中,負邊距,z index這些都算的話,那就有的說了 有人覺得的話我就把上面說的都補充 1.IE11 只支援 ms flexbox,完全不支援 box 以及其延伸屬性 box pack box a...

關於粒子模型的疑問?

馬晨 是的,確實是完全一樣的。並且已經被類似交換效應這樣的現象證實。但是,說是因為我們沒有關心他們的不同也是對的,因為這些粒子在不同的情況下可能表現出不同的性質。例如在統計學上,如果粒子是可區分的,它們應當服從經典的玻爾茲曼統計 如果他們是不可區分的,按照對稱性質的不同它們應當服從費公尺狄拉克統計或...

為什麼 d 1 維經典模型對應於 d 維的量子模型?

liyouxi 這是典型的物理研究者的思維,其實只找到了幾個特例,並且對應也不都是完美的,缺乏普遍性。然後,總結這句話,讓人誤以為是很普遍的。其實,既然只是特例,那就能看懂幾個特例是幾個特例就行吧。 風雪凌塵 1.d維時空 的歐幾里得場論等價於d維空間 的經典統計力學 標量場的路徑積分的生成函式,在...