html盒子模型

2021-07-08 22:20:55 字數 833 閱讀 2192

什麼是css的盒子模式呢?為什麼叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), css盒子模式都具備這些屬性。

這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那麼內容就是盒子裡裝的東西;而填充就是怕盒子裡裝的東西(貴重的)損壞而新增的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至於邊界則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。在網頁設計上,內容常指文字、等元素,但是也可以是小盒子(div巢狀),與現實生活中盒子不同的是,現實生活中的東西一般不能大於盒子,否則盒子會被撐壞的,而css盒子具有彈性,裡面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充只有寬度屬性,可以理解為生活中盒子裡的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。

關於margin:

首先你要知道,margin後面是有4個引數的。例如:margin:1px 1px 1px 1px

分別表示 上、右、下、左。如果只寫2個引數的話,比如:margin:1px 2px,那麼著是代表 上下都為1px 左右都為2px.

至於居中,很明顯,margin:0 auto 是標準的寫法.

看下css手冊,margin後跟四個引數:top right bottom left 還可簡寫為兩個引數 即為 上下 左右 也可以設定乙個引數 這樣就代表設定這四個選項了,解釋下margin: 0 auto;0為上下外間距為0px auto代表左右自動適應。

html盒子模型 jquery盒子模型

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

html盒子模型

在css中有乙個需要了解的東西,那就是盒子模型,這是css看待元素的一種方式。可以說頁面就是由乙個個盒模型堆砌起來的,每個html元素都可以叫做盒模型,盒模型由外而內包括 邊距 margin 邊框 border 填充 padding 內容 content 它在頁面中所佔的實際寬度是margin bo...

html 盒子模型

網頁的布局本質就是把網頁上的元素,如,文字,都放入盒子裡面,然後按照自己的需要擺放盒子的過程就是網頁布局 1.盒子模型的組成 1.width 內容寬度 padding 內邊距 border 邊框 margin 外邊距 2.邊框 邊框有三部分組成 border 邊框大小 邊框樣式 solid 實線 d...