CSS基礎入門教程:理解盒子模型

2024-07-11 09:03:12

字體：大中小

來源：轉載

供稿：網友

武林網(www.49028c.com)文章簡介：什么是盒子模型？對于初學者來說，很難說出來，但是對于生活中的盒子大家熟悉吧，哈哈，這里提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎么能起個名字叫“盒子模型”呢

盒子模型，是XHTML+CSS布局頁面中的核心！要想學會用CSS布局頁面，就首先要理解盒子模型！
什么是盒子模型？對于初學者來說，很難說出來，但是對于生活中的盒子大家熟悉吧，哈哈，這里提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎么能起個名字叫“盒子模型”呢

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

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

CSS基礎入門教程:理解盒子模型

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

怎么樣，理解“盒子模型”了沒？就是這么點知識

上一篇：CSS控制頁面樣式的4種方式和優先級問題

下一篇：CSS實例:盒模型、塊狀元素與內聯元素、CSS選擇器

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注