前端页面几大布局

从纯html结构加上css代码堆出来的页面，到类似bootstrap框架的栅格化布局，再到flex流式布局，随着不同框架、新css特性的诞生，前端页面整体布局，越来越灵活，代码量越来越小，不同浏览器兼容性越来越好。对于工作中常用的几类布局，做个小结。

一、传统布局

• 浮动
• 定位
• 基本css

浮动（float）

    
    
    


    

        
left
        
right
    

不结合任意UI框架，css的float属性使用过程对html结构也有一定的要求，浮动之后，脱离文档流，块元素会转行内，如果有父元素必须清除浮动，否则页面整体样式会乱，不同浏览器下会出现各种兼容性问题。

• 若n个子元素，合理化的结构是加上外层父级元素，且父级要清除浮动，以保证正确的文档流，不影响后续结构；
• 若n个子元素，不加外层父级元素，每个元素需写明元素宽高，且多个元素的总宽总高需保证页面结构按设计的铺排；
• 一般文字环绕图形的样式会涉及到浮动，该布局可由文字撑起整个父元素的宽高

定位（position）

常用相对定位、绝对定位、固定定位。

• 固定定位：一般项目页面的头部、尾部或侧边导航、小工具，常用position：fixed，再制定相对于正常可视区文档流的left、top值
• 相对定位、绝对定位：页面常用父级元素position：relative，子元素position：absolute，left、right、top、bottom根据实际项目需求设置相关的参数（px、百分比）

基本css（行内元素）

    
    
    


    

        
left
        
right
    

css属性display：inline-block能实现浮动相同的效果

二、flex布局

父元素display：flex，子元素：flex：1（flex为1，子元素均分父元素的宽度或高度，若子元素单独设置flex：2、3、5等，会占有对应的比例宽度），父元素flex-direction决定了自适应的方向，垂直或者水平。

    
    
    


    

        
111
        
222
        
333
    

三、网格布局

相比传统、flex一维布局，grid可视为二维布局,可同时指定x、y方向，也就是行（rows）和列（column），容器指定为网格布局属性display：grid，再指定行列数及元素大小，grid-template-columns及grid-template-rows，rows可不指定，按column的参数自适应。

div{
    display: grid;
    grid-template-columns: 10px 10px 10px;
    grid-template-rows: 10px 10px 10px;
    gap: 10px 10px；// 行、列间隔10px
}
// repeat简写
div{
	display:grid;
	grid-template-columns:repeat(3,10px);
}
// 当repeat的第一个次数参数不确定，不确定容器大小的时候，可用auto-fill关键字，让单元格自适应容器的大小，自动填充
div{
	display:grid;
	grid-template-columns:repeat(auto-fill,10px);
}
//fr关键字，用比例表示
div{
	display:grid;
	grid-template-columns:1fr，2fr; //两列，第二列是第一列的两倍
	grid-template-columns:100px，1fr，2fr; //三列，第一列100px，第三列是第二列的两倍
}
//minmax（），min、max最大最小值
div{
	display:grid;
	grid-template-columns:1fr 1fr minmax(100px, 1fr);// 列宽不小于100px，不大于1fr
}
//auto关键字，浏览器自己决定
div{
	display:grid;
	grid-template-columns:100px auto 100px;//
}
//

网格布局在设定行列相关参数之后可定义自动填充，grid-auto-flow默认先行后列，也可手动设置先列后行grid-auto-flow：column。

div{
	display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-auto-flow: row dense; //dense参数定义了先行后列之后，让单元格尽可能填充，不出现空白区域
}

例如页面常见水平、垂直都居中的效果。

    
    
    


    

		
1
		
2
		
3
		
4
		
5
		
6
	

页面效果