CSS之----------容器属性

CSS定位主要用到容器属性，容器包括：内容content，补白padding，边框border，边界margin四部分。其关系如下图：

 

 

 

 

 

        以下几条重在理解，理解，如果理解了就不难判断定位一个元素的位置了： 

 

1.如果想控制一个块移动，就使用margin来确定其与父元素的位置关系，如果想控制一个容器的内容文本或者图片的位置，就使用padding，调整位置，而文本或者图片所属的文本位置并不移动

 

2.对于背景颜色或者图片来说，它们一直显示到边框border为止，padding部分也会显示一个元素的背景颜色或者背景图片，而margin部分则不会显示该元素的背景颜色或者图片，而是显示其父元素的背景颜色或者图片，如果没有父元素就会显示浏览器的底色，而margin始终是透明的

 

 

3.两个元素的垂直边界发生重叠时，当两个边界值不同时，元素的实际间距等于其中值较大的一个，当父元素有padding子元素有margin时，同样使用这个原则

 

4.两个元素的水平边界发生重叠时，实际的边界距离等于两个边界值的和

 

5.当边界值取负值的时候，无论垂直还是水平，值都相加，因此会出现重叠现象

 

6.在嵌套关系中，父元素的padding和子元素的margin会相会影响（父元素的margin影响父元素块的位置，子元素的padding影响子元素自身content的位置，这两者无互相影响。又由于子元素是作为父元素的content出现的，而父元素的padding影响其自身的content，同时，子元素的margin也影响整个子元素的位置，故此在嵌套关系中，影响子元素的位置的元素有两个：父元素的padding，子元素的margin），它们的值分别出现有--有，有--无，无--有（无--无当然无影响）的情况的时候会影响最终的子元素的显示位置，只有牢记padding和margin的不同，就会判断出正确的位置

 

 

 

7.容器最后的显示大小等于容器的border及border内的大小加上正的margin值。而负的margin值不会影响容器的实际大小，如果是负的top或left值会引起容器的向上或向左位置移动，如果是bottom或right只会影响下面box的显示的参考线。