CSS padding 如何影响了div大小.docxVIP

今天在搞东西的时候，发现了一问题。就是，Css.ctain{position:relative;width:445px;height:180px;overflow:scroll;background-color:Gray;}.item{position:relative;width:100px;height:160px;background-color:Green;padding:20px;float:left;margin-left:5px;z-index:1}Ctain为父亲divItem为内部的绿色背景色的div我设置父亲div的宽度为445px是因为，理论上正好可以放下4个子div因为子div的宽度是100，设置了margin-left为5，那么相当于每个div的宽度为105px105*4+20的滚动条宽度，再加上，在后面的5px宽度。。开始我感觉，padding因为是设置的内部的。所以，不用计算。于是，结果却是这样的。。。我不是理解….再请教了一些网页后。我想利用dreamweaver的可视效果进行研究。于是，结果出来了。我的原先的知识点理解错误了。=================首先是我设置了这个div的margin注意.ac{line-height:normal;width:150px;height:100px;background-color:green;z-index:1;position:relative;margin:10px;}HTMLdivclass=ac米AA号/div先来理解一下这个内容。因为我为这个div设置了宽度和高度。width:150px;height:100px;使其长宽为100px。在其内部又一个段文字。米AA号。。那么使其上次div的内容为整个div…..而不是单纯的一个米AA号。看上面的图其div的内容的范围为绿色的部分。。。条纹部分为margin其其外边距。所以这里padding我是理解错误了，因为padding适合content打交道的。而我把content理解错误了。Padding不就是理解错误了=====================Padding表示的是标签和内容之间的间距。那好。现在我开始设置，div的间距为20px。结果是这样的：白色条纹的是padding的…但是值得注意的是，发现一个问题就是，因为内容过大。（在这里是整个div为其内容所以，此时，对div执行padding之后，内容和div的框架分离了。但是，此div也变大了。===========所以用这个来解释，我上面的错误。。。因为，我手动指定了高宽度为100px。、那么，其内部内容的大小。就是100*100。不过因为原先padding为0.所以内容和边框是合并在一起的，当我设置了padding为10px的时候，那么，此时，div边框和内容分离。但是，虽然内容没有改变大小。但是，此div已经改变了大小了变大了。======如果指定了不同的paddingpadding-left:20px;padding-right:15px;padding-top:25px;padding-bottom:32px;那么注意了。变化的是包含此内容的容器，如果手动指定了大小而不是内容本身，内容本身不发生变化。所以修改上面的例子，，，不适用padding。。现在可以正常的显示这个4个div了。。。。在这里，可以设置margin-left单独。来使每个间隔都是相等的。.item{position:relative;width:100px;height:160px;background-color:Green;float:left;margin-left:5px;z-index:1}那么如何使其内容自动编号。。。。那就不设置。width:20px;height:30px