前端常用布局

Posted 2020-10-28 liuxu_xrl

（1）单列布局：
水平居中：
1>div 使用父标签text-align:center和子标签display:inline-block 。优点：兼容性好；不足：需要同时设置子元素和父元素
2>使用margin:0 auto来实现。优点：兼容性好缺点: 需要指定宽度
3>使用table实现display: table; 优点:只需要对自身进行设置不足:IE6,7需要调整结构
4>使用绝对定位实现 父标签position:relative; 子标签{position:absolute; left:50%; transform:translate(-50%);}不足：兼容性差,IE9及以上可用
5>实用flex布局实现
/*第一种方法*/
.parent{display:flex; justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}
缺点：兼容性差，如果进行大面积的布局可能会影响效率

（2）垂直居中
1>vertical-align:middle
/*第一种方法*/ .parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/ .parent{display:inline-block;vertical-align:middle;line-height:20px;}
2>实用绝对定位 .parent{position:relative;} .child{positon:absolute; top:50%; transform:translate(0,-50%);}
3>实用flex实现 .parent{display:flex; align-items:center;}

 

（3）水平垂直全部居中
1>利用vertical-align,text-align,inline-block实现
.parent{display:table-cell; vertical-align:middle; text-align:center;}
.child{display:inline-block;}
2>利用绝对定位实现
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
3>利用flex实现
.parent{display:flex;justify-content:center;align-items:center;}

（4）多列布局
左列定宽，右列自适应 利用float + margin-left实现
右列定宽，左列自适应
两列定宽，一列自适应
两侧定宽，中栏自适应
列不定宽，一列自适应

（5）多列等分布局
1>实用float实现 2>利用table实现 3>利用flex实现
.parent{margin-left:-20px}/*假设列之间的间距为20px*/
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

（6）九宫格布局
1>使用table实现

2>实用flex实现

出自 https://www.cnblogs.com/langzi1989/p/5965816.html