商业网站开发入门上机指导

技术支持：河北工业大学梦云智软件开发团队

View on GitHub Download .zip

第二节：盒子模型

•

提到html并不得不提css,如果把html比做是一个校园，那么css就是校园的花花草草，绿树景观。html让我们看到一个校园，css则让我们看到了一个漂亮的校园。提到css，就不得不得box model盒子模型。

那么什么是盒子模型呢？

简单来说，就是把我们在网页上想呈现给大家内容都看成一张张照片，然后把这个照片放在一个相框里，我们把这个相框就叫做盒子。而这个相框对应的模型，就叫做相框模型（模型：现实的抽象）。

是的，我们看到的每个相框，都是一个盒子！

比如下图中，有10个相框，每个相框都是一个盒子。

/WebCourse2017/assets/image/chapter3/1.png

菜鸟教程中，是如此描述盒子模型的。

/WebCourse2017/assets/image/chapter3/8.png

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

反映到相框上：Margin(外边距)、Border(边框)、Padding(内边距)、Content(内容)依次如下图所示:

/WebCourse2017/assets/image/chapter3/10.png /WebCourse2017/assets/image/chapter3/11.png /WebCourse2017/assets/image/chapter3/11.png /WebCourse2017/assets/image/chapter3/9.png

同时，我们均可以定义它们的大小。Margin(外边距)、Border(边框)、Padding(内边距)分别可以定义top、right、bottom、left。Content(内容)可以定义width与height。

所以，盒子模型还可以这样描述：

/WebCourse2017/assets/image/chapter3/1.jpeg

一切皆盒子

其实，我们前面学过的所有的标签，都可以看作一个盒子。比如h标签、p标签、a标签等。

菜鸟教程中，是这样描述的：

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

在具体的编写中，标准的盒子div标签在网页布局中，被广泛的采用。

用盒子模型开发照片墙

参考上节中的代码描述：

  • 上下分成两行，编号为：行1，行2.
    • 将行1划分为3列，编号为:列1.1, 列1.2, 列1.3
      • 将列1.1划分为2行，编号为行1.1.1, 行1.1.2
        • 将行1.1.1划分为2列，编号为列1.1.1.1，列1.1.1.2
      • 将列1.2划分为2行，编号为行1.2.1， 行1.2.2
    • 将行2划分为4列，编号为列2.1, 列2.2, 列2.3, 列2.4

初始化

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
</head>
<body>
</body>
</html>

上下两行

<body>
    <!-- 画一个大框 -->
    <div>
        <!-- 行1 -->
        <div></div>
        <!-- 行2 -->
        <div></div>
        <!-- 1.3 -->
        <div></div>
    </div>
</body>

开发子盒子

<body>
    <!-- 画一个大框 -->
    <div>
        <!-- 行1 -->
        <div>
            <!-- 1.1 -->
            <div></div>
            <!-- 1.2 -->
            <div></div>
            <!-- 1.3 -->
            <div></div>
        </div>
        <!-- 行2 -->
        <div>
            <!-- 2.1 -->
            <div></div>
            <!-- 2.2 -->
            <div></div>
            <!-- 2.3 -->
            <div></div>
            <!-- 2.4 -->
            <div></div>
        </div>
    </div>
</body>

开发子子盒子

<body>
    <!-- 画一个大框 -->
    <div>
        <!-- 行1 -->
        <div>
            <!-- 1.1 -->
            <div>
                <!-- 1.1.1 -->
                <div></div>
                <!-- 1.1.2 -->
                <div></div>
            </div>
            <!-- 1.2 -->
            <div>
                <!-- 1.2.1 -->
                <div></div>
                <!-- 1.2.2 -->
                <div></div>
            </div>
            <!-- 1.3 -->
            <div></div>
        </div>
        <!-- 行2 -->
        <div>
            <!-- 2.1 -->
            <div></div>
            <!-- 2.2 -->
            <div></div>
            <!-- 2.3 -->
            <div></div>
            <!-- 2.4 -->
            <div></div>
        </div>
    </div>
</body>

再拆分

<body>
    <!-- 画一个大框 -->
    <div>
        <!-- 行1 -->
        <div>
            <!-- 1.1 -->
            <div>
                <!-- 1.1.1 -->
                <div>
                    <!-- 1.1.1.1 -->
                    <div></div>
                    <!-- 1.1.1.2 -->
                    <div></div>
                </div>
                <!-- 1.1.2 -->
                <div></div>
            </div>
            <!-- 1.2 -->
            <div>
                <!-- 1.2.1 -->
                <div></div>
                <!-- 1.2.2 -->
                <div></div>
            </div>
            <!-- 1.3 -->
            <div></div>
        </div>
        <!-- 行2 -->
        <div>
            <!-- 2.1 -->
            <div></div>
            <!-- 2.2 -->
            <div></div>
            <!-- 2.3 -->
            <div></div>
            <!-- 2.4 -->
            <div></div>
        </div>
    </div>
</body>

添加内容

<body>
    <!-- 画一个大框 -->
    <div>
        <!-- 行1 -->
        <div>
            <!-- 1.1 -->
            <div>
                <!-- 1.1.1 -->
                <div>
                    <!-- 1.1.1.1 -->
                    <div>照片</div>
                    <!-- 1.1.1.2 -->
                    <div>照片</div>
                </div>
                <!-- 1.1.2 -->
                <div>照片</div>
            </div>
            <!-- 1.2 -->
            <div>
                <!-- 1.2.1 -->
                <div>照片</div>
                <!-- 1.2.2 -->
                <div>照片</div>
            </div>
            <!-- 1.3 -->
            <div>照片</div>
        </div>
        <!-- 行2 -->
        <div>
            <!-- 2.1 -->
            <div>照片</div>
            <!-- 2.2 -->
            <div>照片</div>
            <!-- 2.3 -->
            <div>照片</div>
            <!-- 2.4 -->
            <div>照片</div>
        </div>
    </div>
</body>

查看效果

/WebCourse2017/assets/image/chapter3/13.png

说好的照片墙呢？

只所以没有看到墙的效果，这是由于div有个默认的属性：独占一行。在此默认属性的作用的下，每个div都占满父元素100%的宽度。那么如何使用div达到表格中列的效果呢？在下节中，我们进行讲解。

参考: 菜鸟教程 w3cshool在线 w3schools