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

原文地址:https://www.cnblogs.com/workest/p/3925930.html