我给女朋友讲编程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/