前端之CSS（二）

一、盒子模型

前端之CSS（二）

说到盒子模型，我们不得不提一下，W3C标准和IE浏览器是有区别的，我昨天就在写抽屉作业的时候踩过坑，建议用谷歌浏览器，并推荐一篇博文：http://www.osmn00.com/translation/213.html

在W3C盒模型中，一个块级元素的总宽度(总高度同理)按照如下的方程式计算：

总宽度 = margin_left + border_left + padding_left + width + padding_right + border_right + margin_right

在IE盒模型中：总宽度 = margin_left + width + margin_right

IE盒模型的计算方式和W3C的很相似，但有一点是非常不同的，这就是：填充和边框并不被包含在计算的范围内。

这就意味着一旦元素拥有横向的填充和/或边框，实际的内容区域（content area ）就要扩大来创造出他们占据的空间。

下面来详细说一下盒子模型中的一些概念：

1、margin：外边距，用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

<!DOCTYPE html>
<html lang="en">
<!--外边距-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 12px auto;
            background-color: #2459a2;
            width: 980px;
            height: 100px;
        }
        div p{
            margin: 100px;
            background-color: #bebebe;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

外边距

外边距