我給女友講編程CSS系列(4) CSS盒子模型

 

什麼是CSS盒子模型？如何學習CSS的盒子模型？

 

這篇文章，以 【分享 + 結論】  的方式來寫。

 

1，  看w3school的【CSS 框模型概述】

 

網址爲：

http://www.w3school.com.cn/css/css_boxmodel.asp

 

接着把【CSS內邊距】，【CSS外邊距】，【CSS外邊距合併】看看。

 

小結：

(1)    通常，在樣式表中，都會先把全部元素的外邊距和內邊距設置爲0

* {   margin: 0;  padding: 0;  }

* 是通配符，就是一個符號，表明是全部的元素。

 

(2)元素框總寬度

元素總寬度 = 左右外邊距寬度 + 左右邊框寬度 + 左右內邊距寬度 + 元素寬度

totalWidth = marginWidth + borderWidth + paddingWidth + elementWidth

 

(3) 元素框總高度

元素總高度 = 上下外邊距高度 + 上下邊框高度 + 上下內邊距高度 + 元素高度

totalHeight = marginHeight + borderHeight  + paddingHeight + elementHeight

 

 

2，  看博客園的【DIV+CSS兩種盒子模型】

網址爲：

http://www.cnblogs.com/releaseyou/archive/2009/04/16/1437456.html

 

只須要看圖和圖下面的結論就好了。下面那個jQuery例子不用看。

 

小結：

爲了兼容IE，網頁頭部要添加 DOCTYPE 聲明，那麼全部瀏覽器都會採用標準 W3C 盒子模型去解釋盒子，網頁就能在各個瀏覽器中顯示一致了。

 

通常使用VS2010或者Dreamweaver這些開發工具時，新建網頁就會在頭部加上DOCTYPE 聲明。

 

 

3, 英文文章【The CSS Box Model】

http://css-tricks.com/the-css-box-model/