盒模型笔记

img{display:block;} 取消图片下方间距,同时会让图片独占一行
	
	*{margin:0;padding:0;} 取消所有间距
	盒模型的组成:
		内容区域: width height
		内边距区域: padding
		边框区域: border
		外边距区域: margin

	内边距:
		padding-top:上内边距;
		padding-right:右内边距;
		padding-bottom:下内边距;
		padding-left:左内边距;
		padding:数值;(四个方向)
		padding:数值 数值;(上下 左右)
		padding:数值 数值 数值;(上 左右 下)
		padding:数值 数值 数值 数值;(上 右 下 左)
		【注】没有负数,没有auto(自适应)
			  会撑大元素的大小
                          
        外边距:
            margin-top:上外边距;
            margin-left:左外边距;
            margin-bottom:下外边距;
            margin-right:右外边距;
            
            margin:数值;(四个方向)
            margin:数值 数值;(上下 左右)
            margin:数值 数值 数值;(上 左右 下)
            margin:数值 数值 数值 数值;(上 右 下 左)
            【注】有负数,有auto(自适应)
                 不会撑大元素的大小
            margin常见的bug:垂直方向的外边距会重合
            
        边框：
            border:边框大小 边框形态 边框颜色
                border-top:上边框大小 形态 颜色;
                border-top-width:上边框大小;
                border-top-style:上边框形态;
                border-top-color:上边框颜色;
                三角形:
                    width:0;
                    height:0;
                    border:30px solid transparent;
                    border-top-color:red;