总结下常见布局解决方案

Posted 2020-12-07 baimeishaoxia

总结了几种常见的页面架构布局方案
1.居中布局

a.水平居中
b.垂直居中
c.水平垂直

2.多列布局

a.自适应布局
b.等宽布局
c.等高布局

居中布局

水平居中

<!--水平居中布局-->
<div class="parent">
    <div class="children">demo</div>
</div>

1. inline-block + text-align

.parent{
        text-align:center;
        }
.children{
        display:inline-block;
        }

2. table + margin

.children{
       display: table;
       margin:0 auto;
       }

3. absolute + transform

.parent{
        position: relative;
        }
.children{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        }

4. flex + justify-content/margin

/* 4.flex + justify-content */
.parent{
        display: flex;
        justify-content: center;
        }
/* 5.flex + margin */
.parent{
        display: flex;
        }
.children{
        margin: 0 auto;
        }

垂直居中

1. table-cell + vertical-align

.parent{
        display: table-cell;
        vertical-align: middle;
        }

2. absolute + transform

.parent{
        position: relative;
        }
.children{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        }

3. flex + align-items

.parent{
        display: flex;
        }
.children{
        align-items: center;
        }

水平垂直居中

1.inline-block + text-align + table-cell + vertical-algin

.parent{
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        }
.children{
        display: inline-block;
        }

2.absolute + transform

.parent{
        position: relative;
        }
.children{
        position: absolute;
        top: 50%;
        height: 50%
        transform: translate(-50%, -50%);
        }

3. flex + justify-content + align-items

.parent{
        display: flex;
        justify-content: center;
        align-items: center;
        }

多列布局

自适应布局

1. 定宽 + 自适应

/* 1. float + margin */
.left{
    float: left;
    width: 100px;
 }
.right{
    margin-left: 120px;
}
/* 2. float + overflow BFC */
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
/* 3.table */
.parent{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}
/* 4. flex */
.parent{
    display: flex;
}
.left{
    width: 100px;
    margin-right: 20px;
}
.right{
    flex: 1;
}
/* 5. 三列: 两列定宽 + 一列自适应 */
.left, .center{
    width: 100px;
    float: left;
}
.right{
    overflow: hidden;
}

2. 不定宽 + 自适应

/* float + overflow:hidden BFC */
.left{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
.left p{
    width: 100px;
}
/* table */
.parent{
    display: table;
    width: 100%;
}
.left, .right{
    display: table-cell;
}
.left{
    width: 0.1%;
    padding-right: 20px;
}
/* flex */
.parent{
    display: flex;
}
.left{
    margin-right: 20px;
}
.right{
    flex: 1;
}
.left p{
    width: 100px;
}
/* 三列 */
.left, .center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
.left p, .center p{
    width: 100px;
}

等宽布局

.column{ background-color: #2aabd2;}
/* float */
.parent{
    margin-left: -20px;
}
.column{
    width: 25%;
    float: left;
    padding-left: 20px;
    box-sizing: border-box;
}
/* table */
.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 15px;
}
/* flex */
.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+ .column{
    margin-left: 20px;
}

等高布局

.left{ background-color: #2aabd2;}
.right{ background-color: #00B83F;}
/* flex */
.parent{
    display: flex;
}
.left{
    width: 100px;
    margin-right: 15px;
}
.right{
    flex: 1;
}
/* table */
.parent{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right{
    display: table-cell;
}
.left{
    width: 100px;
    border-right: 15px solid transparent;
    background-clip: padding-box;
}
/*float 伪等高,不好*/
.left{
    float: left;
    width: 100px;
    margin-right: 15px;
}
.right{
    overflow: hidden;
}
.left, .right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.parent{
    overflow: hidden;
}