html標籤的盒子模型

2021-08-31 19:14:46 字數 652 閱讀 6772

在html 的標籤中

標籤被稱作盒子模型,也就是說我們把整個網頁當做是乙個大盒子,在網頁裡我們放許多小盒子

標籤,我們可以用

來搭建整個網頁的框架,可以設定

盒子的大小、邊框、背景色等等,也可以在盒子裡面填充內容。舉個例子,就像是我們在一間大房子裡面放了乙個紙箱子一樣,我們可以根據自己的需求來選擇紙箱子的大小,厚度以及顏色等,那我們可以直接在紙箱子裡面放入我們需要的東西,也可以在箱子裡面再放箱子來裝東西。

如上圖所示,我們用padding來表示我們填充的內容到盒子的距離,padding-top、padding-bottom、padding-left、padding-right分別表示內容到盒子的上下左右距離;用margin來表示盒子到網頁邊緣的距離,margin-top、margin-bottom、margin-left、margin-right分別表示盒子到網頁的上下左右距離。我們用width來表示盒子的寬度,height來表示盒子的高度。

如上圖所示,是乙個簡單的盒子模型

如上圖所示,是乙個盒子模型裡面巢狀乙個子盒子模

html盒子模型 jquery盒子模型

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

html盒子模型

什麼是css的盒子模式呢?為什麼叫它是盒子?先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子 箱子 上來理解,日常生活中所見的盒子也具有這些屬性,所以叫...

html盒子模型

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