4当前位置:网页制作CSS教程-CSS盒子模型图解
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
视频 | 其它
4赞助商链接
4最新网页制作
·CSS盒子模型图解
·设置span宽度和高度的方法
·CSS3通过scale()和rotate()实现放大和旋转
·ASP中空字符串、IsNull及IsEmpty的区别
·CSS Bug顺口溜
·CSS实现未知高度的DIV垂直居中
·CSS实现水平垂直居中的两种方法
·简述css中em和px的区别
·兼容各种浏览器的css:fixed定位效果
·CSS分隔线的几种方法
4热门网页制作
·使网页变灰的代码(包括FLASH等所有网页元素)
·应用CSS美化网页
·CSS实现文字底部对齐
·一款DIV+CSS制作的导航条
·CSS隐藏表格超出的内容
·CSS使网页背景图片居中的三种方法
·用CSS改变鼠标箭头
·表格边框CSS语法大全
·CSS制作文本或图片闪烁效果
·几种常用的新闻列表样式
4相关网页制作
·DIV+CSS布局和Web标准对网站优化和SEO的好处
·IE9的bug:有序列表项为0
·CSS实现文字变图象效果
·深入理解display:inline-block属性
·层叠样式表(CSS)全接触之二
·CSS十大经典问题及解决方案
·常用CSS缩写语法总结
·CSS盒子模型图解
·《十天学会web标准(div+css)》之第十天(二)
·《十天学会web标准(div+css)》之第十天(三)
CSS盒子模型图解
类别:CSS教程    来源:网络    时间:2014/4/22    贴士:推荐给好友
收藏本页 8 
点击图片打开新窗口浏览

  从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

点击图片打开新窗口浏览

  从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

  例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,如果用标准 W3C 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;如果用 IE 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。

  那应该选择哪中盒子模型呢?当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢?很简单,就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。
·上一篇:设置span宽度和高度的方法
·下一篇:这已经是本类最后一篇记录了!
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2010 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备12017729号