14 css盒模型

CSS盒模型
	元素占用的页面空间
	根据W3C的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的
	设置内边距和外边距可以放大缩小元素
	
CSS 内边距
	padding 元素内容与元素边框之间的空白区域	
	单位
		h1 {padding: 10px;}
		h1 {padding: 10px 0.25em 2ex 20%;}

	内边距的百分比数值
		可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的。
		所以，如果父元素的 width 改变，它们也会改变。

CSS 外边距
	元素边框外的空白区域
	设置外边距会在元素外创建额外的“空白”
	h1 {margin : 0.25in;}
	p {margin : 10%;}
	百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%

	margin	简写属性。在一个声明中设置所有外边距属性。


* 盒模型
        盒模型 
           width ----- 内容的宽度 而不是盒子的总宽度  
           height ------ 内容的高度 
           padding ------ 内边距
           border ------ 边框
           margin ------ 外边距

因为浏览器有默认样式所以我们需要重置样式