CSS3基础教程(八) - 博客详情

1.什么是盒子模型

盒子模型，顾名思义，盒子就是用来装东西的容器，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，每个盒子又是由：内容(content)、内边距(padding)、边框(border)、外边距(margin)四个部分组成。如下图所示：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距可以是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

我们发现，margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容（不属于css能控制的范畴）。

那一个盒子的宽度和高度的完整计算公式如下：

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

2.padding/border/margin的对比

margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。 border，表示盒子的边框，它可以设置成可见的，样式多样的。具体用法参照border属性。 padding，表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

3.盒子模型实例

使用盒子模型实现分别在盒子元素中包裹一段文字和图片。并且要求文字和图片都是在盒子的水平和垂直方向上居中显示。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>

        #box1 {
            width: 380px;
            height: auto;
            border: 5px solid #ccc;
            margin: 0px auto; /*水平居中*/
            padding: 30px 20px;
        }

        #box2 {
            width: 400px;
            height: 300px;
            border: 8px dashed #7A67EE;
            margin: 0px auto;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="box1">
    北国风光，千里冰封，万里雪飘。
    望长城内外，惟余莽莽；大河上下，顿失滔滔。
    山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。
    江山如此多娇，引无数英雄竞折腰。
    惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。
    俱往矣，数风流人物，还看今朝。

</div>
<br>
<div id="box2">
    <img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg" />
</div>
</body>
</html>

运行效果：