页面布局技巧:CSS盒子模型

一.前言

在网页设计中，CSS的盒子模型是至关重要的。简单来说，每个HTML元素都被视为一个盒子，就像是一个容器，用来包裹元素的内容。这个"盒子"不是实体的三维物体，而是在二维平面上的一个虚拟概念。想象一下，你在设计网页时，每个元素都是一个盒子，你可以通过CSS来控制这些盒子的大小、边距、边框和填充，从而实现网页的布局和样式。这种盒子模型的概念是网页布局中的基础，也是我们进行网页设计时必不可少的工具之一。

接下来让我们一起揭开盒子模型的神秘面纱吧!

二.盒子的组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。content是HTML元素的内容，而margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的大小。话不多说，直接上图:

三.盒子的大小

在css中认为盒子的大小指的是盒子的宽度和高度。刚认识盒子模型时容易将宽度和高度误解为width和height属性，实际上width和height属性只是设置content（内容）部分的宽和高。

在默认情况下盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

用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

上面的公式仅仅限于计算在默认情况下盒子的大小，那么在非默认情况下，应该怎么计算盒子的实际大小呢?

在这里要为大家介绍一个新朋友-box-sizing属性值

IE盒子模型（border-box） ：这种盒子模型在早期的Internet Explorer浏览器中被广泛采用，但现在也被其他现代浏览器支持。在IE盒子模型中，width和height属性确定了整个盒子的尺寸，包括内容、内边距、边框。换句话说，内边距和边框会被包含在设定的宽度和高度内，而不会额外增加盒子的尺寸。

四.盒子模型演示

默认属性(content-box):

xml 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title>
<style>
div {
    background-color: lightgrey;
    width: 200px;
    border: 30px solid red;
    padding: 30px;
    margin: 30px;
    /*不会超出容器*/
    /*box-sizing: border-box;*/
    /*会超出容器*/
    /*box-sizing: content-box;*/
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>



<div>我时一个盒子。有 30px 内间距，30px 外间距、30px 红色边框。</div>

</body>
</html>

该盒子宽度为: 320(content + padding * 2 + border * 2) + 30 * 2 (margin * 2) = 380 px

IE盒子模型（border-box） ：

xml 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title>
<style>
div {
    background-color: lightgrey;
    width: 200px;
    border: 30px solid red;
    padding: 30px;
    margin: 30px;
    /*不会超出容器*/
    box-sizing: border-box;
    /*会超出容器*/
    /*box-sizing: content-box;*/
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>



<div>我时一个盒子。有 30px 内间距，30px 外间距、30px 红色边框。</div>

</body>
</html>

该盒子宽度为:200 (width) + 30 * 2 (margin * 2) = 260