div+css的padding和margin问题

<div class="I_Top">
<div class="Top_Bg">黑色背景部分宽度为1004px;加上两边红色的边框宽度，整个是1006px</div>
</div>

相应的css：

.I_Top{width:100%;text-align:center;}
.Top_Bg{width:1004px;border:solid 1px red; background-color:#000000;color:#FFFFFF;text-align:center;margin:0 auto;padding:50px 20px;}

在这里，我们设置叻.Top_Bg的宽度为1004px，而这个Border:solid 1px red,padding:50px;20px;所以对应的这个Div的实际宽度为1004+2（border的宽度）+40（padding的宽度）总共为1046px，所以:

div的宽度=width+border-left+border-right+padding-left+padding-right

<div class="I_Top">
    <div class="Top_Nav">
        <div class="Top_left">
            <div class="lefttop_bg">首先在这里</div>
        </div>
        <div class="Top_center">

        </div>
        <div class="Top_right"></div>
    </div>
</div>

对应的CSS

首先在这里的.Top_Nav的width为1004px,而在里面的.Top_left,.Top_center和.Top_right的三个层呈水平排列，所以这三个层的宽度加起来总的宽度应该为1004px，而层的宽度为：div的宽度=width+border-left+border-right+padding-left+padding+right 所以.Top_left的宽度为196px+1px*2(border)+1px*2(padding-left和padding-right)= 200px ,以此得到，Top_center的宽度为332px，Top_right的宽度为472px ,这样三个层的总的宽度为200+332+472 = 1004 。

在这里我们给.Top_left的padding设置为1px,这样就保证叻，里面背景颜色的色块跟.Top_left之间有1px的间距，而我们又把.lefttop_bg的宽度设置为100%,这样就保证叻这个宽度是自适应的。

起初我们把：

.lefttop_bg{width:100%;background-color:#FF6600;margin:1px;text-align:left;}

这样设置，这里的宽度为100%，而这个100%的宽度，是根据其父层Top-left的width得到的，这里的width是层的内容宽度（196px），即得到lefttop_bg的宽度为196px。

div+css的padding和margin问题

猜你喜欢