2016-07-28学习日志
	
     
	
CSS盒模型
	
什么是盒模型
	
     
		
      
由margin/border/padding/content组成
	
     
	
     
	
margin属性
	
     
		
      
top-right-bottom-left:顺时针
		
      
具体方位单独设置: margin-top|margin-right|margin-bottom|margin-left
		
      
margin: top-right-bottom-left
		
      
margin: top left+right bottom
		
      
margin: top+bottom left+right
		
      
marign: 一个值代表四个方向上一样
		
      
margin: 20px auto意思是上下两个方位的外边距为20px,左右方向上实现居中
		
      
竖向margin的叠加
			
      
				
       
margin在横向上是加法，但在竖向上却会产生叠加，并会取上下间距的其大者生效
			
      
		
      
margin对行标签的影响
			
      
				
       
行属性标签设置margin时,横向起作用，竖向无效
			
      
		
      
margin-top的bug
			
      
				
       
当两个容器嵌套时，如果外层容器和内层容器之间没有别的元素，有些浏览器会把内层元素的margin-top作用于父元素
				
       
解决方法：浮动,display:inline-block,
			
      
		
      
IE6下的横向双倍margin bug
			
      
				
       
IE6会在特定的条件下，将设置的横向margin值变成双倍，条件
					
       
						
        
元素必须浮动
						
        
元素必须具有横向的margin即margin-left,margin-right
						
        
原色是块元素
						
        
必须是IE6
						
        
解决：display:inline;
					
       
			
      
	
     
	
     
	
padding属性
	
     
		
      
	
     
	
     
	
border属性
	
     
		
      
solid/dotted:点线/dashed：虚线
	
     
	
     
	
display属性
	
     
		
      
block/none:元素隐藏/inline/inline-block
	
     
	
     
	
标准模式与怪异模式
	
     
		
      
怪异模式是在IE6及更早的IE版本下的和模型所占的空间总宽度=内容+外边距
			
      
				
       
box-sizing:content-box;采用标准模式解析，是默认模式
				
       
box-sizing:border-box;采用怪异模式解析