DIV + CSS 盒子模型
盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，
先来看看我们熟悉的标准盒子模型：
从上图可以看到标准 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 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
再用 jQuery 做的例子来证实一下。
代码1：
<html> <head> <title>你用的盒子模型是？</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sBox = $.boxModel ? "标准W3C":"IE"; document.write("您的页面目前支持："+sBox+"盒子模型"); </script> </head> <body> </body> </html>
上面的代码没有加上 DOCTYPE 声明，在 IE 浏览器中显示“IE盒子模型”，在 FF 浏览器中显示“标准 W3C 盒子模型”。
代码2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>你用的盒子模型是标准W3C盒子模型</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sBox = $.boxModel ? "标准W3C":"IE"; document.write("您的页面目前支持："+sBox+"盒子模型"); </script> </head> <body> </body> </html>
代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。
所以为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型
DIV + CSS 盒子模型的更多相关文章
- 【使用DIV+CSS重写网站首页案例】CSS盒子模型
CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
- [CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...
- 前端面试必备的css盒子模型
今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css盒子模型之边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Multithreading: How to Use the Synchronization Classes
(Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu 转载请标明来源) 翻译文章来源: msdn - Multithreading: How to Use t ...
- NSLog用法，打印日志
要输出的格式化占位: %@ 对象 %d, %i 整数 %u 无符整形 %f 浮点/双字 %x, %X 二进制整数 %o 八进制整数 %zu size_t %p 指针 %e 浮点/双字 (科 ...
- android studio 开发android app 真机调试
大家都知道开发android app 的时候可以有2种调试方式, 一种是Android Virtual Device(虚拟模拟器) ,另一种就是真机调试. 这里要说的是真机调试的一些安装步骤: 1. ...
- 安装VMware Sphere ESXi 5.5
安装VMware Sphere ESXi 5.5 1.准备 待安装ESXi 5.5的机器需要大于2GB以上内存,并且支持64位和虚拟化. 下载:VMware-VMvisor-Installer-5.5 ...
- 原生js获取body
1. doucumnet.body 2. document.getElementsByTagName("body")[0]
- android R 文件生成不了
在android中比较头疼的是R文件生成不了.今天总结一下R文件生成不了的一些原因和解决方法 1. xml文件有错, 如果在res文件中的xml文件有错,android不会自动生成R文件,此时仔细查看 ...
- "客户端无法连接到远程计算机"错误的解决方法
问题: 客户端无法连接到远程计算机. 可能没有启用远程连接或者计算机太忙不能接受新的连接. 也可能是网络问题阻止连接.请稍后重新尝试连接. 如果问题仍然存在 请与管理员联系. 解决方法: 1.首先确认 ...
- 访问MySQL数据库时，报“找不到请求的 .net Framework 数据提供程序。可能没有安装。”的解决方案
最近开发了一个系统,在测试环境上进行部署(win7环境)并测试,没有发现问题:但是把系统部署到win Server2008R2上之后,部分页面就报“找不到请求的 .net Framework 数据提供 ...
- （一）backbone - API入门
初探 backbone采用MVC模式,本身提供了模型.控制器和视图从而我们应用程序的骨架便形成. Backbone.js 唯一重度依赖 Underscore.js. 对于 RESTful , hist ...
- SQL 经典练习
SQL 基础练习 CREATE TABLE STUDENT(SNO VARCHAR(3) NOT NULL, SNAME VARCHAR(4) NOT NULL,SSEX VARCHAR(2) NOT ...