css2.1--笔记3

等高布局：

当有定位元素（position），和浮动元素（float）时，margin：0 auto会失效。如果是标准的块级元素，margin：0 auto正常使用。

如果写样式，最好是用class的方式引用，id的方式最好是最外层的盒子使用。也就是说只有最外层的盒子使用id方式，内部全部用class的方式。

清除浮动（clearfix）：让子元素可以撑开父元素的高度。

 可以使用  :after伪元素  清除浮动，给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素（Block element）清理浮动。

练习：

首先给需要等高的元素加padding-bottom：10000px，margin-bottom：-10000px；

然后给他们总的盒子加overflow：hidden

这个是模拟网页布局的大概写的，使用了圣杯布局和等高布局 

	
		
		
		
	
	
		
header
		

			
middle
			
left
			
right
		
		
footer
	

双飞翼布局：

两组实现的对比:
        1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
        2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
        3.两种布局方式的不同之处在于如何处理中间主列的位置：
                圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
                双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

 

	
		
		
		
	
	
		

			
header
		
		

			

				

					
middle
				
				
left
				
right
			
		
		

			
footer