码迷,mamicode.com
首页 > Web开发 > 详细

我给女朋友讲编程CSS系列(4) CSS盒子模型

时间:2014-08-21 00:08:53      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:blog   http   使用   ar   div   html   log   htm   

 

什么是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/

 

我给女朋友讲编程CSS系列(4) CSS盒子模型,布布扣,bubuko.com

我给女朋友讲编程CSS系列(4) CSS盒子模型

标签:blog   http   使用   ar   div   html   log   htm   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!