我给女朋友讲编程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/
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
