css盒子模型

1.组成

W3School给出很好的解释

2.内容区（content）

/*
                 * 使用width来设置盒子内容区的宽度
                 * 使用height来设置盒子内容区的高度
                 * 
                 * width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
                 *     盒子可见框的大小由内容区，内边距和边框共同决定
                 */

3.边框区（border）

/*
				 * 为元素设置边框
				 * 	要为一个元素设置边框必须指定三个样式
				 * 		border-width:边框的宽度
				 * 		border-color:边框颜色
				 * 		border-style:边框的样式
				 */

使用border-width可以分别指定四个边框的宽度
                     如果在border-width指定了四个值，
                         则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
                         
                     如果指定三个值，
                         则三个值会分别设置给    上  左右 下
                         
                     如果指定两个值，
                         则两个值会分别设置给 上下 左右    
                         
                     如果指定一个值，则四边全都是该值    
                     
                     除了border-width，CSS中还提供了四个border-xxx-width
                         xxx的值可能是top right bottom left
                     专门用来设置指定边的宽度    

	/*
				 * border
				 * 	- 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
				 * 	- 而且没有任何的顺序要求
				 * 	- border一指定就是同时指定四个边不能分别指定
				 * 
				 * border-top border-right border-bottom border-left
				 * 	可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
				 */

4.内边距（padding）

内边距（padding），指的是盒子的内容区与盒子边框之间的距离.

*     一共有四个方向的内边距，可以通过：
                 *         padding-top
                 *         padding-right
                 *         padding-bottom
                 *         padding-left
                 *             来设置四个方向的内边距

使用padding可以同时设置四个边框的样式，规则和border-width一致

5.外边距

外边距指的是当前盒子与其他盒子之间的距离

他不会影响可见框的大小，而是会影响到盒子的位置

 * 盒子有四个方向的外边距：
				 * 	margin-top
				 * 	margin-right
				 * 	margin-bottom
				 * 	margin-left
				 * 
				 * 由于页面中的元素都是靠左靠上摆放的，
				 * 	所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
				 * 	而如果是设置右和下外边距会改变其他盒子的位置

 * 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
                 *     就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
                 *     以使子元素在父元素中水平居中
两种情况：

1.兄弟垂直外边距的重叠

所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

2.父子垂直外边距的重叠   

如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

        解决方法：

                为父元素的上边界加一个外边框             

6.display与visibility

display设置隐藏none之后，不占位置

而visibility设置hidden之后相当于变成了透明，依然占据位置