CSS 理解盒子模型
發(fā)布時間：2010-01-07 00:10:13 作者：佚名 
我要評論
我要評論盒子模型，是XHTML+CSS布局頁面中的核心！要想學(xué)會用CSS布局頁面，就首先要理解盒子模型！
什么是盒子模型？對于初學(xué)者來說，很難說出來，但是對于生活中的盒子大家熟悉吧，哈哈，這里提到的盒子模型你就可以理解成現(xiàn)實(shí)生活中的盒子就可以了，不然怎么能起個名字叫“盒子模型”呢
好！既然和現(xiàn)實(shí)生活中的盒子一樣，那我們想一下，生活中的盒子內(nèi)部是不是空的好用來存放東西，而里面存放東西的區(qū)域我們給他起個名字叫“content(內(nèi)容)”，而盒子的紙壁給他起個名字叫“border(邊框)”，如果盒子內(nèi)部的東西比如是一塊硬盤，但是硬盤怕震動，所以我們需要在硬盤的四周盒子的內(nèi)部均勻填充一些防震材料，這時硬盤和盒子的邊框就有了一定的距離了，我們稱這部分距離叫“padding(內(nèi)邊距)”，如果我們需要購買許多塊硬盤，還是因?yàn)橛脖P怕震動所以需要在盒子和盒子之間也需要一些防震材料來填充，那么盒子和盒子之間的距離我們稱之為"margin(外邊距)"
OK~！這下盒子模型的四要素就出來了分別是：content(內(nèi)容)、border(邊框)、padding(內(nèi)邊距)、margin(外邊距)，如下圖
我們的頁面就是由許許多多的盒子組成的喲~~~，但是和現(xiàn)實(shí)生活中的盒子我們會忽略外邊距(margin)，但是在頁面中，我們是不能忽略外邊距(margin)的，只有包括外邊距的盒子模型在CSS中才是完整的，即使外邊距為零，我們也不要忽略它，要知道他是存在的。
怎么樣，理解“盒子模型”了沒？就是這么點(diǎn)知識
好！既然和現(xiàn)實(shí)生活中的盒子一樣，那我們想一下，生活中的盒子內(nèi)部是不是空的好用來存放東西，而里面存放東西的區(qū)域我們給他起個名字叫“content(內(nèi)容)”，而盒子的紙壁給他起個名字叫“border(邊框)”，如果盒子內(nèi)部的東西比如是一塊硬盤，但是硬盤怕震動，所以我們需要在硬盤的四周盒子的內(nèi)部均勻填充一些防震材料，這時硬盤和盒子的邊框就有了一定的距離了，我們稱這部分距離叫“padding(內(nèi)邊距)”，如果我們需要購買許多塊硬盤，還是因?yàn)橛脖P怕震動所以需要在盒子和盒子之間也需要一些防震材料來填充，那么盒子和盒子之間的距離我們稱之為"margin(外邊距)"
OK~！這下盒子模型的四要素就出來了分別是：content(內(nèi)容)、border(邊框)、padding(內(nèi)邊距)、margin(外邊距)，如下圖
我們的頁面就是由許許多多的盒子組成的喲~~~，但是和現(xiàn)實(shí)生活中的盒子我們會忽略外邊距(margin)，但是在頁面中，我們是不能忽略外邊距(margin)的，只有包括外邊距的盒子模型在CSS中才是完整的，即使外邊距為零，我們也不要忽略它，要知道他是存在的。
怎么樣，理解“盒子模型”了沒？就是這么點(diǎn)知識
相關(guān)文章
- 什么是CSS盒子模型？CSS盒子模型是為了讓我們充分理解div+css模型的定位功能，盒子模型在學(xué)習(xí)div+css布局方式中必須要學(xué)習(xí)的一個模型2016-05-10
- 這篇文章主要介紹了css盒子模型的使用方法,需要的朋友可以參考下2014-04-22
- 這篇文章主要介紹了css盒子模型詳解加示例,W3C組織建議把所有的網(wǎng)頁上的對象都放在一個盒子中,在定義盒子寬高的時候，要考慮到內(nèi)填充，邊框，邊界的存在,這里講了一個盒子2014-04-15
- 本章將介紹CSS3中各種盒的知識點(diǎn)；主要包含以下內(nèi)容：CSS3中各種各樣盒的類型概念、瀏覽器支持情況2013-04-24
- 本章將介紹CSS3中各種盒的知識點(diǎn)；主要包含以下內(nèi)容：CSS3中各種各樣盒的類型概念、瀏覽器支持情況2013-04-24
css的核心內(nèi)容 標(biāo)準(zhǔn)流、盒子模型、浮動、定位等分析
css的核心內(nèi)容：標(biāo)準(zhǔn)流、盒子模型、浮動、定位（可以說不理解這些概念絕做不出合適的網(wǎng)頁）2009-12-21
這篇文章主要介紹了看完不迷糊的 CSS 盒子模型介紹,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-25
