css的几种布局方式都在这

说道布局方式，是我们经常遇到的问题，下面我们就来讲解css的常见的一些布局方式。

1.双飞翼布局（两边定宽，中间自适应）

主要是通过浮动与margin实现，代码如下：

	
		
		
		
		
	

	
		

			
header
		
		

			

				
main
			
		
		

			
left
		

		

			
right
		
		

			
footer
		
	

效果图如下： 

2.圣杯布局（两边定宽，中间自适应的另一种实现方式，这两种方式在结构的书写上还是有不一样的）

主要是用相对定位与浮动和padding实现，代码如下：

    
header


    

        
middle
   
    
    

        
left
  
    
    

        
right
    


    
footer

效果图如下： 

3.常见的也是最普通的盒模型布局，定位

这种主要就是利用padding,margin，float ，相对定位，绝对定位以及固定定位的几种方式布局。

4.flex弹性盒子布局：

flex是css提出的一个新属性，一般只兼容IE10以上的浏览器（现在大部分的新属性都选择只兼容IE10+），主要用法有这几个：把容器变成弹性盒子：display：flex ，决定主轴方向：flex-direction：colum(默认为主轴)，换不换行：flex-wrap，主轴对齐方式：justify-content，交叉轴对齐方式：align-items，更多详细用法可以去flex网站上看。

5.媒体查询@media，主要是用在移动端的兼容不同设备上的布局上

运用媒体查询注意点：必须在头部添加约束视口的这句代码，否则媒体查询可能有点会有的无效

width=device-width   视口为设备宽度（就是人设置的一个宽度）//不设置的话默认为980px
initial-scale=1.0    初始化的视口大小是1.0倍
maximum-scale=1.0    最大的倍数是1.0倍
user-scalable=0      不允许缩放视口

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

6.通过rem单位（这个也不能说是布局方式吧，只是通过屏幕大小自适应字体的变化，rem单位是相对根元素字体大小决定的，我们大可以根据js监听屏幕变化然后改变根元素字体大小，从而达到缩放字体大小的目的）

function getRootFontsize(){
		var root=document.documentElement
		//获取屏幕宽度
		var clientwidth=root.clientWidth
		//改变根元素字体大小
		root.style.fontSize=clientwidth*100/750+"px"
	}
window.addEventListener("orientationchange",getRootFontsize)// 监听横竖屏变化
window.addEventListener("resize",getRootFontsize)//监听浏览器窗口大小变化

7.运用框架：比如elementui有layout布局，bootstrap有栅格系统，每种UI框架都有自己的布局方式

element-ui的布局方式：