css盒子介绍(1)（小白文）(参考<<css世界>>)
css盒子有很多，这里只要介绍两种类型盒子（block和inline）
在css中，一个css标签就是一个css盒子。css盒子就像月饼盒、层层包装，从里到外，足足有四层，分别为content-box（内容盒子）、padding-box（内边距盒子）、border-box（边框盒子）、margin-box（外边距盒子 （自己加的））。不同的css标签对应着不同的css盒子，如div标签对应block盒子，span标签是inline盒子，它们虽然从里到外都是四层、还都是content-box、padding-box、border-box、margin-box，但是它们对css的默认值却有着不同的理解，这也是css盒子为何不同的原因。
接触过css的人都知道（div）和（span）,这俩是css的代表，div（display:block）用于结构、span用于内容(display:inline)。现
在我们先搞div盒子，一会再说span盒子。
div盒子的width:auto; 、height:auto;。虽然它们的默认值相同，但是它们有不同的解释，width的auto(自动)说的是 百分百自适应于父类（扩展型）。height的auto却解释为 百分百自适应于子类（收缩型） 。 通俗的说父类有多宽，它子类div就默认有多宽（不太正确，看下面的解说）。
<style>
body{
margin:0px;
}
#div1{
background-color:red;
}
.div2{
height:100px;
background-color:blue;
margin:50px;
padding:20px;
border:10px dotted yellow;
background-clip:content-box;
}
</style>
<body>
<div id="div1"><div class="div2"></div></div>
</body>
在这里插入图片描述可以看出来，当margin-box 、border-box和padding-box占了所需的空间后，content-box（width:auto）就填充完剩下的空间。
div盒子height:auto;是收缩型的，子类高的总和就是height的值。没啥特别。
span盒子和div盒子最大也是最必要的区别就是对width:auto;的理解不同于div盒子。span盒子width:atuo;和height;auto;有着一样的解释 <百分百适应于子类>。
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
