盒模型

1.属性:width :内容的宽度 书写内容的宽度

height:内容的高度 书写内容的宽度

padding:内边框 内容到边框的距离  可以有  background-color 

border:边框 可以显示颜色 就是比作一个门框  border: 10px solid green;

margin:外边框 另一个边到另一个变的距离

1  2  3  4     
       5      6     16 17 18 
      
19 20 21 

2.关于移动

padding 是关于父子的移动  就是是本身在整个内容下进行整体的上下左右

用padding-left.top,right,buttom 来进行移动

margin 是关于兄弟之间的移动 可以通过margin-left... 移动像素

1  2  3  4     
       5      6     24 25 26 
      
       27     
       zq28         
       zq29 
      
30 
      
       31     
       zq32 33 
      
34 35 36 

盒模型的计算：    总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height    前提是：在标准文档流          padding：父子之间调整位置          margin: 兄弟之间调整位置 3.浮动 在一个盒子上,包含了许多了不同的div  要是能在一个界面上显示多种不同的颜色就需要颜色划分,但是在一个 已经分配好的布局上怎么加入其他的颜色呢,这就需要浮动,使其变成不标准的界面 float

1  2  3  4     
       5      6     48 49 50     
      
       51         
       
        52             
        
         53             
        
54             
        55             
        
56             
        
57 58         
       
59     
      
60 61