CSS 理解盒子模型

2021-08-02 20:40:39 字數 685 閱讀 9115

什麼是盒子模型?對於初學者來說,很難說出來,但是對於生活中的盒子大家熟悉吧,哈哈,這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了,不然怎麼能起個名字叫「盒子模型」呢

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

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

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

css 盒子模型理解

盒子模型是html css中最核心的基礎知識,理解了這個重要的概念才能更好的排版,進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識 希望對初學者有用。一 css盒子模型概念 css css盒子模型 又稱框模型 box model 包含了元素內容 content 內邊距 padding 邊...

css 理解 盒子模型

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

css 盒子模型理解

1 盒子模型作用 盒子模型就是乙個盒子,封裝周圍的html元素。允許我們在其他元素和周圍元素邊框的空間放置元素。2 組成 外邊距 margin 相鄰的兩個盒子margin,會發生摺疊,可為負數 邊框 border 內邊距 padding 實際內容 content 百分比相對于父容器的content ...