盒子模型 非常形象

2021-08-27 13:07:37 字數 888 閱讀 5601

盒子模型,是xhtml+css布局頁面中的核心!要想學會用css布局頁面,就首先要理解盒子模型!

什麼是盒子模型?

對於初學者來說,不容易理解,但是對於生活中的盒子大家應該熟悉,大到貨櫃,小到鉛筆盒,盒子模型你完全可以理解成現實生活中的盒子就可以了,不然怎麼能起個名字叫「盒子模型」呢?

好!既然和現實生活中的盒子一樣,那我們想一下,生活中的盒子內部是不是空的好用來存放東西,而裡面存放東西的區域我們給他起個名字叫「content(內容)」,而盒子的盒子壁給他起個名字叫「border(邊框)」,如果盒子內部的東西比如是一塊硬碟,但是硬碟怕震動,所以我們需要在硬碟的四周盒子的內部均勻填充一些防震材料,這時硬碟和盒子的邊框就有了一定的距離了,我們稱這部分距離叫「padding(內邊距)」,如果我們需要購買許多塊硬碟,還是因為硬碟怕震動所以需要在盒子和盒子之間也需要一些防震材料來填充,那麼盒子和盒子之間的距離我們稱之為"margin(外邊距)",請看下面兩圖:

ok~!這下盒子模型的四要素就出來了分別是:content(內容)、border(邊框)、padding(內邊距)、margin(外邊距),如下圖:

我們的頁面就是由許許多多的盒子組成的,但是現實生活中的盒子我們會忽略外邊距(margin),但是在頁面中,我們是不能忽略外邊距(margin)的,只有包括外邊距的盒子模型在css中才是完整的,即使外邊距為零,我們也不要忽略它,要知道他是存在的。

盒子模型與怪異盒子模型

所有html元素可以看作盒子,在css中,box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...

html盒子模型 jquery盒子模型

最近學了jquery的盒子模型之後,感覺真的顛覆我之前對盒子模型的看法,我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件,那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...