CSS布局方案

迷南。 2022-05-28 23:17 150阅读 0赞

# 居中布局（以下居中布局均以不定宽为前提，定宽情况包含其中） #

## 1、水平居中 ##

![70][]

### a) inline-block + text-align ###

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

tips：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用css hack进行兼容

### b) table + margin ###

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

tips：此方案兼容至IE8，可以使用`<table/>`代替css写法，兼容性良好

### c) absolute + transform ###

.parent{
        position: relative;
        height:1.5em;
    }
    .child{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

tips：此方案兼容至IE9，因为transform兼容性限制，如果`.child`为定宽元素，可以使用以下写法，兼容性极佳

.parent{
        position: relative;
        height:1.5em;
    }
    .child{
        position: absolute;
        width:100px;
        left: 50%;
        margin-left:-50px;
    }

### d) flex + justify-content ###

.parent{
        display: flex;
        justify-content: center;
    }
    .child{
        margin: 0 auto;
    }

tips：flex是一个强大的css，生而为布局，它可以轻松的满足各种居中、对其、平分的布局要求，但由于现浏览器兼容性问题，此方案很少被使用，但是值得期待浏览器兼容性良好但那一天！

## 2、垂直 ##

![70 1][]

### a) table-cell + vertial-align ###

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

tips：可替换成`<table />`布局，兼容性良好

### b) absolute + transform ###

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

tips：存在css3兼容问题，定宽兼容性良好

### c) flex + align-items ###

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

tips：高版本浏览器兼容，低版本不适用

## 3、水平垂直 ##

![70 2][]

a) inline-block + table-cell + text-align + vertical-align

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

tips：兼容至IE8  
b) absolute + transform

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

tips：兼容性稍差，兼容IE10以上  
c) flex

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

tips：兼容差

# 多列布局 #

## 1、一列定宽，一列自适应 ##

![70 3][]

a) float + margin

.left{
        float: left;
        width: 100px;
    }
    .right{
        margin-left: 120px;
    }

tips：此方案对于定宽布局比较好，不定宽布局推荐方法b  
b) float + overflow

.left{
        float: left;
        width: 100px;
        margin-right: 20px;
    }
    .right{
        overflow: hidden;
    }

tips：个人常用写法，此方案不管是多列定宽或是不定宽，都可以完美实现，同时可以实现登高布局  
c) table

.parent{
        display: table; width: 100%;
        table-layout: fixed;
    }
    .left,.right{
        display: table-cell;
    }
    .left{
        width: 100px;
        padding-right: 20px;
    }

d) flex

.parent{
        display: flex;
    }
    .left{
        width: 100px;
        padding-right: 20px;
    }
    .right{
        flex: 1;
    }

## 2、多列定宽，一列自适应 ##

![70 4][]

a) float + overflow

.left,.center{
        float: left;
        width: 100px;
        margin-right: 20px;
    }
    .right{
        overflow: hidden;
    }

b) table

.parent{
        display: table; width: 100%;
        table-layout: fixed;
    }
    .left,.center,.right{
        display: table-cell;
    }
    .right{
        width: 100px;
        padding-right: 20px;
    }

c) flex

.parent{
        display: flex;
    }
    .left,.center{
        width: 100px;
        padding-right: 20px;
    }
    .right{
        flex: 1;
    }

## 3、一列不定宽，一列自适应 ##

![70 5][]

a) float + overflow

.left{
        float: left;
        margin-right: 20px;
    }
    .right{
        overflow: hidden;
    }
    .left p{width: 200px;}

b) table

.parent{
        display: table; width: 100%;
    }
    .left,.right{
        display: table-cell;
    }
    .left{
        width: 0.1%;
        padding-right: 20px;
    }
    .left p{width:200px;}

c) flex

.parent{
        display: flex;
    }
    .left{
        margin-right: 20px;
    }
    .right{
        flex: 1;
    }
    .left p{width: 200px;}

## 4、多列不定宽，一列自适应 ##

![70 6][]

a) float + overflow

.left,.center{
        float: left;
        margin-right: 20px;
    }
    .right{
        overflow: hidden;
    }
    .left p,.center p{
        width: 100px;
    }

## 5、等分 ##

![70 7][]  
a) float + margin

.parent{
        margin-left: -20px;
    }
    .column{
        float: left;
        width: 25%;
        padding-left: 20px;
        box-sizing: border-box;
    }

b) table + margin

.parent-fix{
        margin-left: -20px;
    }
    .parent{
        display: table;
        width:100%;
        table-layout: fixed;
    }
    .column{
        display: table-cell;
        padding-left: 20px;
    }

c) flex

.parent{
        display: flex;
    }
    .column{
        flex: 1;
    }
    .column+.column{
        margin-left:20px;
    }

## 6、等高 ##

![70 8][]  
a) float + overflow

.parent{
        overflow: hidden;
    }
    .left,.right{
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .left{
        float: left; width: 100px;
    }
    .right{
        overflow: hidden;
    }

b) table

.parent{
        display: table; 
        width: 100%;
    }
    .left{
        display:table-cell; 
        width: 100px;
        margin-right: 20px;
    }
    .right{
        display:table-cell; 
    }

c) flex

.parent{
        display:flex;
        width: 100%;
    }
    .left{
        width: 100px;
    }
    .right{
        flex:1;
    }

# 并排等分，单排对齐靠左布局 #

![70 9][]

## flex ##

.main {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    .item {
        display: inline-block;
    }
    .empty{
        height: 0;
        visibility: hidden;
    }

# 圣杯布局&双飞翼布局 #

## 圣杯布局 ##

![70 10][]

<div class="container">
        <div class="header">header</div>
        <div class="wrapper clearfix">
            <div class="main col">main</div>
            <div class="left col">left</div>
            <div class="right col">right</div>
        </div>
        <div class="footer">footer</div>
    </div>

.container {width: 500px; margin: 50px auto;}
    .wrapper {padding: 0 100px 0 100px;}
    .col {position: relative; float: left;}
    .header,.footer {height: 50px;}
    .main {width: 100%;height: 200px;}
    .left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
    .right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
    .clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

## 双飞翼布局 ##

![70 11][]

<div class="container">
        <div class="header">header</div>
        <div class="wrapper clearfix">
            <div class="main col">
                <div class="main-wrap">main</div>
            </div>
            <div class="left col">left</div>
            <div class="right col">right</div>
        </div>
        <div class="footer">footer</div>
    </div>

.col {float: left;}
    .header {height: 50px;}
    .main {width: 100%;}
    .main-wrap {margin: 0 100px 0 100px;height: 200px;}
    .left {width: 100px; height: 200px; margin-left: -100%;}
    .right {width: 100px; height: 200px; margin-left: -100px;}
    .footer {height: 50px;}
    .clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

## 无名布局 ##

<div class="header">header</div>
    <div class="wrapper">
        <div class="main col">
            main
        </div>
        <div class="left col">
            left
        </div>
        <div class="right col">
            right
        </div>
    </div>
    <div class="footer">footer</div>

.wrapper { position: relative; } .main { margin:0 100px;} .left { position: absolute; left: 0; top: 0;} .right { position: absolute; right: 0; top: 0;}

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[70]: /images/20220529/528413dc866f41a6b7968a49011461ba.png
[70 1]: /images/20220529/5c9b59ec52a54fd1af98313f4a7142cc.png
[70 2]: /images/20220529/24db9e4f91804645b038c9740748760b.png
[70 3]: /images/20220529/8b5ad9aad3be4019afb9b022a11f88a1.png
[70 4]: /images/20220529/98f3e48619504ab19eba3b7348e2c8e4.png
[70 5]: /images/20220529/256b59746f6c4026acded9ba40416433.png
[70 6]: /images/20220529/2c5dee10e68946dcaf4fc2cc4c784053.png
[70 7]: /images/20220529/972065739e1c4d89b656c20a3eebb5eb.png
[70 8]: /images/20220529/66f8574d8593468f93c4d7b382cbfb9c.png
[70 9]: /images/20220529/7235396f3e3e4275be1483a1d6ac6f00.png
[70 10]: /images/20220529/58d43974471e46d8a2118122348cd020.png
[70 11]: /images/20220529/0252650445744742a3c3c91a5b3c8986.png
[20191229112121499.png]: /images/20220529/a2d9bcb3948f48fbaf608001f45cf5ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220529/30bdcecf29bc40bab7dc4fb473f0c62f.png