怎样理解CSS盒子模型内边距、外边距?
理解这个问题，首先得了解什么是CSS盒子模型。
CSS假定每个元素都会生成一个或多个矩形框，这称为元素框。
各元素框的中心有一个内容区。
这个内容区周围有可选的内边距，边框和外边距。

再具体一点就是：
实际上，我们可以看到的是border以内的东西，在border之外（即外边距的区域）对我们来说是不可见的，可以说是透明的，也没有任何手段能够显式地看见它，但它却是真实存在的。
那么我们怎么用盒子模型理解html在浏览器里所表现出来的布局呢？
有人说俄罗斯套娃可以很方便地描述它，但按照我的理解的话，不尽然。
我们可以说盒子模型是一层套一层，但在细节上看起来似乎并不是粗暴的一层套一层。
为了理解这个问题，我写了一个简单的html。
<!DOCTYPE html>
<html>
<head>
<title>box</title>
</head>
<style type="text/css">
body{
margin: 30px;
border:3px solid ;
padding: 10px;
}
.header{
margin: 0;
border:6px solid orange;
padding: 30px;
}
.container{
margin: 30px;
border: 7px solid yellow;
padding: 60px;
}
.footer{
margin: 60px;
border:8px solid gray;
padding: 90px;
}
</style>
<body>
<div class="header">
yangcx
</div>
<div class="container">
xiaosi
</div>
<div class="footer">
chenmj
</div>
</body>
</html>运行的结果如下：
大家可以看到，body是最外面那层的大盒子，body这个盒子的大小是由它的内容所决定的，它肚子里装了多少东西，就显示出多大的体积。
body的CSS样式是：
body{
margin: 30px; //因为margin 是30px,所以黑色边框距浏览器的边缘还有一段距离.
border:3px solid ; //这里设置border实线，大小为3px.
padding: 10px; //padding设置的是border距离content的大小，为10px.
}
第一个div的CSS样式是：
.header{
margin: 0;//margin为0，但橙色的边框距离黑色的边框仍有距离，为什么?
border:6px solid orange;
padding: 30px;//我们可以看到第一个盒子的内容“yangcx”并不是紧贴着橙色边框排放的，这就是padding的功能了。
}
这里我们就可以回答那个为什么margin为0，但橙色的边框距离黑色的边框仍有距离？
每个盒子的结构都是完整的，都有内边距，外边距，内容区。但是不要忘了，内容区是被一个隐形的边框线给包围着的，正是由于这个边框线，我们才有了内边距。正是body这个最外层的大盒子的样式里写着 padding:10px; 所以即使第一个盒子的样式里margin:0 也只是和那个隐形的边框线重叠，距离那个黑色的边框线仍旧有一段距离。
这里眼尖的读者是不是发现了一个问题？
被包含的小盒子模型里最外边的框（即外边框）和包含小盒子的大盒子的最里面的框（内边框）是不是有什么关系？
没错，被包含的小盒子模型里最外边的框（即外边框）正是包含小盒子的大盒子的最里面的框（内边框）。因为被包含的小盒子正是包含小盒子的大盒子的内容（content）。
所以这也就是为什么不能把盒子模型的包含粗暴的理解为俄罗斯套娃。
2777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
