div+css的padding和margin问题

 1:


    黑色背景部分宽度为1004px;加上两边红色的边框宽度,整个是1006px


相应的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

2:

复制代码


    
        
            首先在这里


        

        
            
        

        

    

复制代码

对应的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问题)