CSS盒子模型

CSS盒子模型（上）

盒子模型（Box Model）是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。

所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。可以通过调整盒子的边框和边距等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响。

掌握盒子模型需要从两方面来理解：一是理解单个的盒子的内部结构；二是理解多个盒子之间的相互关系。

本文首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。下一次将更深入地讲解浮动和定位的相关内容。

一．盒子模型概念

1.现实生活中的盒子：

图1 现实生活中的盒子

2. 盒子模型（Box Model）

在网页布局中，为了能够使纷繁复杂的各个部分合理地进行组织，通过研究，总结出了一套完整的、行之有效的原则和规范，这就是“盒子模型”的由来。

在CSS中，一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成：

内容(content)：对应盒内物品

边框(border)：对应包装盒的纸壳，具有厚度

填充(padding)：位于边框内部，是内容与边框的距离，对应包装盒的填充部分

边界(margin)：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙

图2 标准盒子模型

3. 盒子模型的三维立体结构图

图3 CSS2.0盒子模型的三维立体结构图

▪边框（border），位于盒子的第一层。

▪元素内容（content）、内边距（padding），两者同位于第二层。

▪背景图（background-image），位于第三层。

▪背景色（background-color），位于第四层。

▪整个盒子的外边距（margin），位于第五层。

二．盒子模型属性

1. 边框（border）：用于分隔不同元素、会占据空间、有4条边框、可无边框（设置为0）。

语法：

border : border-width || border-style || border-color

取值：

该属性是复合属性。默认值为： medium none 。 border-color 的默认值将采用文本颜色。

边框属性简写

同时设置边框的三个属性：border: 3px solid blue;

示例代码1：边框属性简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性简写</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <div>盒子</div>
</body>
</html>

① border-width：设置对象边框的宽度。

语法：

border-width : medium | thin | thick | length

取值：

medium : 默认值。默认宽度

thin : 小于默认宽度

thick : 大于默认宽度

length : 由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框（顺时针）。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

设置border-width、border-color前要设置border-style。

分别设置四条边框：

属性	语法规则	说明
border-top-width	border-top-width:5px;	上边框粗细为5px
border-right-width	border-right-width:10px;	右边框粗细为10px
border-bottom-width	border-bottom-width:8px;	下边框粗细为8px
border-left-width	border-left-width:22px;	左边框粗细为22px

示例代码2:分别设置四条边框（修改示例代码1的style）

<style>
        div{
            border-top-width:5px;
            border-right-width:10px;
            border-bottom-width:8px;
            border-left-width:22px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

同时设置4条边框：

属性	语法规则	说明
border-width	border-width:5px;	4条边框粗细均为5px
border-width	border-width:20px 2px;	上、下边框粗细为20px 左、右边框粗细为2px
border-width	border-width:5px 1px 6px;	上边框粗细为5px 左、右边框粗细为1px 下边框粗细为6px
border-width	border-width:1px 3px 5px 2px;	上边框粗细为1px 右边框粗细为3px 下边框粗细为5px 左边框粗细为2px

示例代码3:同时设置4条边框（修改示例代码1的style）

<style>
        div{
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

② border-color: 指定颜色。

语法：

border-color : color

取值：

color:指定颜色。附：CSS 颜色十六进制值表

说明：

▪从#后第1位开始每2位为一组,表示一个颜色的值（这是以十六进制来算的）：第1组为红色，第2组为绿色，第3组为蓝色。根据三基色的原理，红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色。

▪数值大颜色亮

▪十六进制值是成对重复的可以简写，效果一样。例如:#FF0000 可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B 必须写满六位。

▪红色#FF0000，绿色#00ff00，蓝色为#0000ff，黄色为#FFFFOO，紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000，要记住（上面所提到的都是饱和色）。

分别设置四条边框和同时设置4条边框语法同border-width

示例代码4:同时设置4条边框的颜色（修改示例代码3的style）

<style>
        div{
            border-color: gold pink blue red;
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

③ border-style：设置对象边框的样式。

语法：

取值：

none : 默认值。无边框。不受任何指定的 border-width 值影响

hidden : 隐藏边框。IE不支持

dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线

dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线

solid : 实线边框

double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值

groove : 根据 border-color 的值画3D凹槽

ridge : 根据 border-color 的值画3D凸槽

inset : 根据 border-color 的值画3D凹边

outset : 根据 border-color 的值画3D凸边

分别设置四条边框和同时设置4条边框语法同border-width

示例代码5:同时设置4条边框（修改示例代码4的style）

<style>
        div{
            border-style: dotted;
            border-color: gold pink blue red;
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
        }
</style>

④ inherit：规定应该从父元素继承 border 属性的设置。

注:当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。

2. 填充(padding)：用于控制内容与边框之间的距离；会占据空间；

可设置盒子模型上、右、下、左4个方向的内边距值；padding属性的值可以为0，即无内边距。

分别设置4个方向的内边距：

属性	语法规则	说明
padding-left	padding-left:10px;	左内边距为10px
padding-right	padding-right:5px;	右内边距为5px
padding-top	padding-top:20px;	上内边距为20px
padding-bottom	padding-bottom:8px;	下内边距为8px

同时设置4个方向的内边距：

属性	语法规则	说明
padding	padding:10px ;	设置4个方向内边距均为10px
padding	padding:10px 5px;	上、下内边距为10px 左、右内边距为5px
padding	padding:30px 8px 10px ;	上内边距为30px 左、右内边距为8px 下内边距为10px
padding	padding:20px 5px 8px 10px ;	上内边距为20px 右内边距为5px 下内边距为8px 左内边距为10px

示例代码6:同时设置4个方向的内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填充(padding)</title>
    <style>
        #box1{
            width: 400px;
            height: 300px;
            background: pink;
        }
        #box2{
            padding: 30px 8px 10px;
            width: 300px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">同时设置4个方向的内边距</div>
    </div>
</body>
</html>

3.边界(margin)：用于控制元素与元素之间的距离；会占据空间；

可设置盒子模型上、右、下、左4个方向的外边距值；margin属性的值可以为0，即无外边距。

分别设置4个方向的内边距和同时设置4个方向的内边距语法同padding属性设置方法类似。

示例代码7:同时设置4个方向的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边界(margin)</title>
    <style>
        #box1{
            border:1px solid red;
            width: 400px;
            height: 300px;
            background: pink;
        }
        #box2{
            margin: 10px 30px;
            padding: 30px 8px 10px;
            width: 300px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">同时设置4个方向的外边距</div>
    </div>
</body>
</html>

注：body的外边距，本身是一个盒子，默认情况下，有若干像素外填充。

由于各个浏览器存在着默认的内外边距值且不相同，我们需要将所有浏览器的默认内外边距，都从0计算。所以，我们用

body,div{/*清除默认外边距和内边距*/
    margin: 0;
    padding: 0;
}

去除浏览器的默认内外边距。建议要去除的写上，不建议使用*{margin:0;padding:0;}。

示例代码8:去除body外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除body外边距</title>
    <style>
        body,div{
            margin: 0px;
            padding: 0px;
        }
        div{
            border:1px solid red;
            width: 400px;
            height: 300px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">此时是贴在body边框上</div>
</body>
</html>

效果：

图4 去除body外边距

4. 内容(content)

内容本身的宽=width

内容本身的高=height

5.盒子模型总尺寸

盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）

图5 盒子模型总尺寸

三．盒子之间的关系

单独的一个盒子不难理解，实际上网页往往是很复杂的，一个网页可能存在着大量的盒子，并且它们之间以各种关系相互影响着。为了适应各种排版要求，CSS规范的思路是：首先确定一种标准的排版模式，这个就是“标准流”。

但仅通过标准流方式，很多排版是无法实现的，CSS规范中又给出了另外几种对盒子进行布局的方法，包括“浮动”和“定位”等属性，对某些元素进行特殊排版。

1. DOM树

一个HTML从表面看是文本文件，从逻辑上看则具有内在的层次关系。“树”可以表示具有层次关系的结构。

任意一个HTML文档都对应一棵DOM树，body是所有对象的根节点。而该DOM树的节点如何在浏览器中表现，则由CSS确定。即HTML控制网页的结构，CSS控制网页的表现。

图6 HTML文档对应DOM树

2. 标准文档流

“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

如上图共有四层结构，顶层为body，第二层为ul，第三层为li，第四层为文本。这四种元素分为两类：

① 块级元素（block level）

li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。这类元素称为“块级元素” ，即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

常见的块标记：address、block、div、dl、fieldset、form、h1 ~ h6、menu、ol、ul、p、table

② 行内元素（inline）

对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”。比如<strong></strong>标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的<a>、<span>标记。

3.浏览器处理元素过程：

第1步：从body开始，依次把两个ul块竖直排列。

第2步：分别进入每一个ul查看它的下级元素，把两个li块竖直排列在ul中。

第3步：进入li内部，是一行文本，按行内元素排列文字。

4．<div>标记与<span>标记

为了更好地理解“块级元素”和“行内元素”，这里重点介绍在CSS排版的页面中经常使用的<div>和<span>标记。

div简单而言就是一个块级容器标记，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。可以把div当做一个独立的对象，用CSS进行控制。<span>和<div>一样，在HTML元素中可以作为独立的对象进行处理。

两者的区别在于：div是一个块级元素，span仅仅是一个行内元素，在它的前后都不会换行。span没有结构上的意义，纯粹是应用样式，当其他行内元素都不适合时，就可以用span标记。div标记可以包含span，span不可以包含div。

5. 盒子在标准流中的定位原则

如果要精确地控制盒子的位置，就必须对margin有更深入的了解。padding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同的盒子之间的位置关系。

① 行内元素之间的水平margin

图7 行内元素之间的水平margin

两个块之间的距离为：30px+40px=70px。

② 块级元素之间的竖直margin

图8 块级元素之间的竖直margin

如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。

两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图所示。这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。

6. 嵌套盒子之间的margin

除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种父子关系，它的margin值对CSS排版也有重要的作用。当一个<div>块包含在另一个<div>块中时，便形成了典型的父子关系。

其中子块的margin将以父块的内容为参考，如图4.22所示。

图9 嵌套盒子之间的margin

在没有设置width和height的情况下，高度和宽度都会自动延伸和收缩。在标准流中，一个块级元素的盒子水平方向的宽度会自动延伸，直至上一级盒子的限制位置。对于高度，div都是以里面的内容的高度来确定的，也就是会自动收缩到能包容下内容的最小高度。

示例代码7:在没有设置width和height的情况下，高度和宽度都会自动延伸和收缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的嵌套</title>
    <style>
        #box1{//父盒子 设置宽度
            border:1px solid red;
            width: 300px;
            height: 150px;
            background: pink;
        }
        #box2{//子盒子 不设置宽度
            border:1px solid red;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">父盒子
        <div id="box2">子盒子宽度 自动延伸为 父盒子宽度</div>
    </div>
</body>
</html>

效果：

图10 子盒子宽度延伸为父盒子宽度

如果更改代码：父盒子不设置高度，子盒子设置高度，则父盒子高度会收缩至子盒子的高度，效果如下：

图11 父盒子高度收缩为子盒子高度

7. margin属性可以设置为负值

上面提及margin的时候，它的值都是正数。其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多。

图12 margin-left=-50px