CSS盒子模型学习笔记

前言

盒子模型是CSS控制页面时一个很重要的概念。所有的页面中的元素都可以看成是一个盒子，占据着一定的页面空间。通常来说这些被占据的空间往往都要比单纯的内容大。一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构，二是理解多个盒子之间的相互关系。

盒子模型的内部结构

在一本书上看到一个很好地例子。假设在墙上有4幅画，整齐的排列着，如上图所示，对于每一幅画来说，都有一个边框，在英文中称为“border”；每个画框中，画和边框通常都会有一定的距离，这个距离称为“内边距”，在英文中称为“padding”；各幅画之间通常也不会紧贴着，他们之间的距离称为“外边距”，在英文中称为“margin”。这种padding-border-margin模型是一个极其通用的描述矩形对象形式的方法。这些矩形对象可以被统称为“盒子”，英文为box。

而所谓的模型的概念就是对某种事物的本质特性的抽象。例如物理上有“物理模型”，牛顿提出的F=ma公式等。同样，在网页布局中，为了能够使纷繁复杂的各个部分合理地进行组织，这个领域的一些有识之士对它的本质进行充分的研究后，总结出了一套完整的、行之有效的原则和规范。这就是“盒子模型”。

在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）、和margin（外边距）四个部分组成。如下图CSS2.0盒子模型层次3D示意图。

一个盒子实际所占用的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。

在比如说我们可以将页面中的任何一个元素形容成邮局中的每个邮包，一般情况下邮包都是用矩形纸盒包装需要邮寄的物品的，并在贵重物品边缘塞入海绵等物品保护邮寄物。那么可以想象一下所举例的形容：

邮寄的物品——页面中元素的内容（content）

塞入的海绵——内边距（padding）

邮局的纸盒邮包——边框（border）

邮包堆积之间的距离——外边距（margin）

但是我们也可以想象一个问题，邮局的纸盒邮包中无论塞入多少海绵保护邮寄的物品，邮局的纸盒邮包的大小是不会改变的，而页面中的元素却不同，内边距的属性值越大，那么该元素所占用的空间也就越大。

现在有如下html代码：

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

</head>

<body>

<div class="mainDiv1">mainDiv1</div>

<div class="mainDiv2">mainDiv2</div>

the border-style of dashed<br>

the border-style of dashed<br>

the border-style of dashed<br>

</div>

<div class="mainDiv3" style="border-style: dotted;">the border-style of dotted</div>

<div class="mainDiv3" style="border-style: double;">the border-style of double</div>

<div class="mainDiv3" style="border-style: groove;">the border-style of groove</div>

<div class="mainDiv3" style="border-style: inset;">the border-style of inset</div>

<div class="mainDiv3" style="border-style: outset;">the border-style of outset</div>

<div class="mainDiv3" style="border-style: ridge;">the border-style of ridge</div>

<div class="mainDiv3" style="border-style: solid;">the border-style of solid</div>

</body>

</html>

现有如下CSS代码：

.mainDiv3

{

border-width: 6px;

border-color: #000000;

margin: 10px;

padding: 5px;

background-color: #FFFFCC;

width: 450px;

height: 20px;

}

在IE和FF浏览器显示的结果如下：

相同的代码在IE浏览器和在火狐浏览器中显示的结果不一样，为什么会产生这样的问题，就要先了解<!DOCTYPE>标签。(X)HTML代码必须有<!DOCTYPE>标签，主要对(X)HTML文档进行类型声明。在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有DOCTYPE声明，他就会以默认的DOCTYPE解释上面的HTML。所以学习网页标准和浏览器兼容、认识DOCTYPE是有必要的。

DOCTYPE

DOCTYPE是Document Type的简写，称为DTD声明，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。制作符合标准的页面，必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，（X）HTML中的标签和CSS才能正常生效，甚至对Javascript脚本都会有影响。

1.STRICT（严格类型）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

在此情况下使用：需要使用符合该类型的（X）HTML标签，避免添加过多无意义的标签属性；页面表现避免使用标签属性，而选择CSS样式表。

2.TRANSITIONAL(过滤类型)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型。

3.FRAMESET(框架类型)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">

Frameset DTD 在使用HTML框架将浏览器分割成多个窗口时使用。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD。

IE浏览器的怪异模式（Quirks）和标准模式（Standard）

邮局的纸盒邮包情况（随着padding值变大盒子模型的大小不发生改变），在IE中某些情况下却完全等同于邮局的纸盒邮包的情况。下面来说一下计算盒子模型的宽高：

1.盒子模型的宽度

盒子模型的宽度=margin-left的值+border-left-width的值+padding-left的值+width的值+padding-right的值+border-right-width的值+margin-right的值。

2.盒子模型的高度

盒子模型的高度=margin-top的值+border-top-width的值+padding-top的值+height的值+padding-bottom的值+border-bottom-width的值+margin-bottom的值。

IE浏览器存在两种渲染方式：怪异模式（Quirks）和标准模式（Standard）。在标准模式中，浏览器根据规范表现页面；在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

在IE浏览器中一个不小心的操作就有可能会触发浏览器以怪异模式渲染页面。例如：删除了DOCTYPE的声明，就会触发怪异模式。触发怪异模式的IE浏览器的盒子模型的计算方式会发生变化。

下面两张图片是未触发怪异模式和触发怪异模式的对比：

未触发怪异模式（左）触发怪异模式（右）明显怪异模式下的图形变小了

做一个实验验证下在怪异模式下如何计算盒子模型的大小

html代码如下：

<head>

<title>盒子模型的计算</title>

div

{

width:200px;

height:200px;

padding:20px;

border:10px solid #FF0000;

background-color:#000000;

margin:50px;

}

</style>

</head>

<body>

</body>

</html>

在IE和FF运行的结果如下图所示：

1.现在修改边框的属性值为：border:40px solid #FF0000;

html代码如下：

<head>

<title>盒子模型的计算</title>

div

{

width:200px;

height:200px;

padding:20px;

border:40px solid #FF0000;

background-color:#000000;

margin:50px;

}

</style>

</head>

<body>

</body>

</html>

在IE和FF运行情况如下：

很明显感觉火狐浏览器的盒子模型变大了，而IE浏览器中只是边框加大了并没有因为边框的加大而改变盒子模型的宽度。从图中可以看出IE的宽度（没有计算外边距）还是200px，而火狐浏览器的宽度（没有计算外边距）变为320px符合上述的算法：即320px=200px（width）+20px（padding）*2 + 40px（border）*2；

2.现在继续修改内边距的值为：padding:50px;

html代码如下所示：

<head>

<title>盒子模型的计算</title>

div

{

width:200px;

height:200px;

padding:50px;

border:40px solid #FF0000;

background-color:#000000;

margin:50px;

}

</style>

</head>

<body>

</body>

</html>

运行后IE和火狐浏览器情况如下：

很明显感觉火狐浏览器的盒子模型变大了，而IE浏览器中只是边框加大了并没有因为边框的加大而改变盒子模型的宽度。从图中可以看出IE的宽度（没有计算外边距）还是200px，而火狐浏览器的宽度（没有计算外边距）变为380px符合上述的算法：即380px=200px（width）+50px（padding）*2 + 40px（border）*2；

根据以上两点可以总结出触发怪异模式后的IE浏览器的盒子模型的计算方式是将边框（border）和内边距（padding）的数值归入盒子模型的宽度及高度中，也就是盒子模型的总高度及总高度应该为：

盒子模型的宽度=margin-left的值+width的值+margin-right的值

盒子模型的高度=margin-top的值+height的值+margin-bottom的值

3.现在在代码中div中添加字符如下形式：

<head>

<title>盒子模型的计算</title>

div

{

width:200px;

height:200px;

padding:50px;

border:40px solid #FF0000;

background-color:#000000;

margin:50px;

}

</style>

</head>

<body>

</body>

</html>

在FF和IE运行情况如下：

由上面可以知道盒子的模型的高度计算方式为：margin*2 + height；

height=padding*2+content + borter*2；现在总高度为200px，内边距50px，边框40px。由此可以看出conten的大小占据着content=200px-50*2px-40*2px=20px；

4.现在在代码中div中添加字符如下形式：

<head>

<title>盒子模型的计算</title>

div

{

width:200px;

height:200px;

padding:50px;

border:40px solid #FF0000;

background-color:#000000;

margin:50px;

}

</style>

</head>

<body>

</body>

</html>

在IE和火狐中运行情况如下：

由步骤3中可以看出IE中的content只有20px，在上图中可以看出IE浏览器的高度发生了变化，由原先的200px变为218px。上面不是说IE浏览器中在怪异模式下高度是不变的么？为什么现在发生变化，这点需要考虑的方向是IE浏览器对空标签的解析，IE浏览器对于一个空标签带有一个空的占位符，该占位符以默认的文字高度为基准，即18px的高度，因此才会显示218px.

5.现在在代码中div中添加字符如下形式：

html代码如下：

<head>

<title>盒子模型的计算</title>

div

{

width:200px;

height:200px;

padding:50px;

border:40px solid #FF0000;

background-color:#000000;

margin:50px;

color:red;

}

</style>

</head>

<body>

<div>怪异的盒子模型<br>

怪异的盒子模型<br>

</div>

</body>

</html>

在IE和火狐中的运行情况如下：

由3、4、5步骤主要说明了再触发怪异模式后的IE浏览器对盒子模型的解析将根据模型的边框及内边距的变化而变化，更重要的是会根据盒子的模型的内容而产生高度的变化，即自适应高度。

总结

盒子模型是CSS布局中的基本组成部分，主要了解怪异模式（Quirks）和标准模式（Standard）这两种模式下的计算方式。一般情况下使用的都是标准模式（Standard），即不删除DOCTYPE类型声明并且保证该声明是出现在（X）HTML代码的第一行；而怪异模式一般需要注意在使用CSS布局页面时出现盒子模型宽高问题。

posted on 2014-01-08 18:06 @風鈴@ 阅读(130) 评论(0) 收藏举报

刷新页面返回顶部

@風鈴@

CSS盒子模型学习笔记

导航

公告