CSS教程:3.1 盒子的内部结构

来源：互联网发布：硬盘安装ubuntu 17.10 编辑：程序博客网时间：2024/06/06 03:27

在学习盒子模型之前，先来看一个例子。假设在墙上有4幅画，整齐地排列着，如图1所示。对于每幅画来说，都有一个“边框”，在英文中称为"border”；每个画框中，画和边框通常都会有一定的距离，这个距离称为“内边距”，在英文中称为“padding”；各幅蓟之间通常也不会紧贴着，它们之间的距离称为“外边距”，在英文中称为“margin”。

图1 画框示意图

这种形式实际上存在于我们生活中的各个地方，如电视机，显示器和窗户等，都是这样的。因此，padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法。这些矩形对象可以被统称为“盒子”。英文为“Box”。

了解了盒子之后，还需要理解“模型”这个概念。所谓模型就是对某种事物的本质特性的抽象。

模型的种类很多，例如物理上有“物理模型”，科学家牛顿提出了著名的F=ma公式，就是对物体运动的本质特性进行抽象后的精确描述。类似地，创办企业也有其“商业模型”，它是对企业运作和盈利过程的本质进行抽象后，对它的描述。

同样，在网页布局中，为了能够使纷繁复杂的各个部分合理地进行组织，这个领域的一些有识之士对它的本质进行充分的研究后，总结出了一套完整的、行之有效的原则和规范。这就是“盒子模型”的由来。

在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成，如图1所示。

可盒子的概念是非常容易理解的，但是如果需要精确地排版，有的时候1个像素都不能差，这就需要非常精确地理解其中的计算方法。

一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border，padding和margin，因此只要利用好这些属性，就能够实现各种各样的排版效果。

注意：并不仅仅是用div定义的网页元素才是一个盒子，事实上所有的网页元素本质上都是以盒子的形式存在的。在人的眼中，一个两页上有各种内容，包括文本、图像等，而在浏览器看来，就是许多盒子在一起或者相互嵌套。

CSS教程:3.2 边框(border)

http://www.wangyexx.com/css/jc/665.html

CSS教程:3.3 内边距(padding)

http://www.wangyexx.com/css/jc/668.html

CSS教程:3.4 外边距(margin)

http://www.wangyexx.com/css/jc/669.html

外边距的margin-width的值类型有：auto | length | percentage

percentage：百分比是由被应用box的containing block（注：一个元素的containing block是该元素产生的box(es)在计算位置和大小时参考的一个矩形，详细阅读可看：《Containing Block》）的大小所决定。对于margin-top和margin-bottom也同样成立。

margin的默认值为0，并且margin支持负值。

如果属性margin有四个值，那么值将按照上-右-下-左的顺序作用于四边，即从元素的上边开始，按照顺时针的顺序围绕元素。表达式如下：

margin：top right bottom left；

四个数值中间以空格分隔。效果等同于：

margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;

并且规范还提供了省略的数值写法，基本原则如下：

引用:
1.如果没有left值，则使用right代替；
2.如果没有bottom值，则使用top代替；
3.如果没有right值，则使用top值代替。

根据这些基本原则，我们可以有三种省略方式，但不管怎样省略margin的数值都会大于等于一个，而margin的默认数值是从top开始至left结束，那么对于省略的具体情况，我们可以从left反推理回去。

1.如果margin只有三个值，按照值的顺序为margin：top right bottom; 缺少了left，根据原则，则left的值有right来代替。

margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;

2.如果margin只有两个值，按照值的顺序为margin：top right; 缺少了bottom和left，根据原则left的值由right来代替，bottm的值由top来代替。

margin:10px 20px;就等于margin:10px 20px 10px 20px;

3.如果margin只有一个值，按照值的顺序为margin:top; 缺少了bottom、left和right，根据原则left的值由right来代替，bottom的值由top来代替，right的值右top来代替，也就是说left的值也由top来代替。

margin:10px;就等于margin:10px 10px 10px 10px;

CSS教程:3.5 盒子之间的关系

http://www.wangyexx.com/css/jc/670.html

三、<div>标记与<span>标记

为了能够更好地理解“块级元素”和“行内元素”，这里重点介绍在CSS排版的页面中经常使用的<div>和<span>标记。利用这两个标记，加上CSS对其样式的控制，可以很方便地实现各种效果。本节从二者的基本概念出发，介绍两个标记，并且深人探讨两种元索的区别。

<div>标记早在HTML 3.0时代就已经出现，但那时并不常用，直到CSS的普及，才逐渐发挥出它的优势。<span>标记在HTML 4.0时才被引入，它是专门针对样式表而设计的标记。

<div>( division)简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对<div>进行相应的控制，其中的各标记元素都会随之改变。

一个ul是一个块级元素，同样div也是一个块级元素，二者的不同在于ul是一个具有特殊含义的块级元素，具有一定的逻辑语义，而div是一个通用的块级元素，用它可以容纳各种元素，从而方便排版。

下面举一个简单的例子，示例文件位于网页学习网CSS教程资源“第3章\05.htm”。

<html> 
<head> 
<title>网页教学网-div 标记范例</title> 
<style type="text/css"> 
div{  
    font-size:18px;                     /* 字号大小 */  
    font-weight:bold;                   /* 字体粗细 */  
    font-family:Arial;                  /* 字体 */  
    color:#FFFF00;                      /* 颜色 */  
    background-color:#0000FF;           /* 背景颜色 */  
    text-align:center;                  /* 对齐方式 */  
    width:300px;                        /* 块宽度 */  
    height:100px;                       /* 块高度 */  
}  
</style> 
</head> 
<body> 
    <div> 
    这是一个div标记  
    </div> 
</body> 
</html>

通过CSS对<div>块的控制，制作了一个宽300像素、高100像素的黄色区块，井进行了文字效果的相应设置，在IE中的执行结果如图3所示。

图3 div块示例

<span>标记与<div>标记一样，作为容器标记而被广泛应用在HTML语言中。在<span>与</span>中间同样可以容纳各种HTML元素，从而形成独立的对象。如果把“<div>”替换成“<span>”，样式表中把“div”替换成“span”，执行后就会发现效果完全一样；可以说<div>与<span>这两个标记起到的作用都是独立出各个区块，在这个意义上说二者没有不同。

<div>与<span>的区别在于，<div>是一个块级元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素(inline elements)，在它的前后不会换行。<span>没有结构上的意义．纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。

例如有如下代码。WANGYEXX.COM

<html> 
<head> 
<title>网页教学网-div与span的区别</title> 
</head> 
<body> 
<p>div标记不同行：</p> 
<div>网页学习网WANGYEXX.COM</div> 
<div>网页学习网WANGYEXX.COM</div> 
<div>网页学习网WANGYEXX.COM</div> 
<p>span标记同一行：</p> 
<span>网页学习网WANGYEXX.COM</span> 
<span>网页学习网WANGYEXX.COM</span> 
<span>网页学习网WANGYEXX.COM</span> 
</body> 
</html>

其执行的结果如图4所示。<div>标记的3条语句被分在了3行中，而<span>标记的语句没有换行。

图4 <div>与<span>标记的区别

此外，<span>标记可以包含于<div>标记中，成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记。从div和span之间的区别和联系，就可以更深刻地理解块级元素和行内元素的区别了。