常见布局实现 -【干货】

f_人生如戏
107 阅读7分钟

一、水平垂直居中

(1) 行内/行内块级/图片

原理：text-align: center; 控制行内内容相对于块父元素水平居中,然后就是line-height和vertical-align的基友关系使其垂直居中，font-size: 0; 是为了消除近似居中的bug

        .box {
                width: 400px;
                height: 400px;
                margin: 100px auto;
                border: 1px solid #ccc;

                line-height: 400px;
                text-align: center;
                font-size: 0;
            }
    
        img {
                width: 200px;
                vertical-align: middle;
            }

(2) 定位

方式一：子绝父相

        .parent {
                position: relative;
            }

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

方式二：绝对定位

        .parent {
                position: relative;
            }

        .son {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

(3) flex

        .parent {
                display: flex;
            }

        .son {
               margin: auto;
            }
            
        /* 或 */
        
        .parent {
               display: flex; 
               justify-content: center; 
               align-items: center;
            }
            
        /* 或 */
        
        .parent {
               display: flex; 
               justify-content: center; 
            }

        .son {
              align-self: center;
            }

二、两列布局

2.1 左定宽、右自适应

效果图

b1.jpg

（1）float方式

    <body>
        <div id="left">左列定宽</div>
        <div id="right">右列自适应</div>
    </body>

        #left {
                    width: 100px;
                    height: 500px;
                    background-color: #f00;

                    float: left;
                }

        #right {
                height: 500px;
                background-color: #0f0;

                /*大于等于#left的宽度*/
                margin-left: 100px;
            }

清除浮动代码

       .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

（2）table方式

    <body>
        <div id="parent">
            <div id="left">左列定宽</div>
            <div id="right">右列自适应</div>
        </div>
    </body>

       #parent {
            width: 100%;
            display: table;
            height: 500px;
        }

        #left {
            width: 100px;
            background-color: #f00;
        }

        #right {
            background-color: #0f0;
        }

        #left,
        #right {
            /*利用单元格自动分配宽度*/
            display: table-cell;
        }

（3）定位方式

        #parent{
                position: relative;  /*子绝父相*/
        }
        #left {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #f00;
            width: 100px;
            height: 500px;
        }
        #right {
            position: absolute;
            top: 0;
            left: 100px;  /*值大于等于#left的宽度*/
            right: 0;
            background-color: #0f0;
            height: 500px;
        }

（4）flex方式

        #parent{
            width: 100%;
            height: 500px;
            display: flex;
        }
        #left {
            width: 100px;
            background-color: #f00;
        }
        #right {
            flex: 1; /*均分了父元素剩余空间*/
            background-color: #0f0;
        }

（5）grid方式

       #parent {
            width: 100%;
            height: 500px;
            display: grid;
            grid-template-columns: 100px auto;  /*设定2列就ok了,auto换成1fr也行*/
        }
        #left {
            background-color: #f00;
        }
        #right {
            background-color: #0f0;
        }

2.2 左适应、右定宽

效果图

b2.jpg

（1）float方式

   <div id="parent">
        <div id="left">左列自适应</div>
        <div id="right">右列定宽</div>
    </div>

         #parent {
            /*抵消#left的margin-left以达到#parent水平居中*/
            padding-left: 100px;
        }

        #left {
            height: 500px;
            background-color: #f00;
            width: 100%;
            float: left;
            margin-left: -100px;
        }

        #right {
            width: 100px;
            height: 500px;
            background-color: #0f0;

            float: right;
        }

table、子绝父相、flex、grid等方式同理实现

2.3 一列不定、一列自适应

效果图

b3.jpg

（1）float方式

   <div id="parent">
        <div id="left">左列自dsadsadadas适应</div>
        <div id="right">自适应</div>
    </div>

         #left {
            /*只设置浮动,不设宽度*/
            height: 500px;
            background-color: #f00;
            float: left;
        }

        #right {
            height: 500px;
            background-color: #0f0;

            /*触发bfc*/
            overflow: hidden;
        }

（2）flex方式

         #parent{
            display: flex;
        }
        #left { /*不设宽度*/
            margin-right: 10px;
            height: 500px;
            background-color: #f00;
        }
        #right {
            height: 500px;
            background-color: #0f0;
            flex: 1;  /*均分#parent剩余的部分*/
        }

（3）grid方式

   <div id="parent">
        <div id="left">左列自dsadsadadas适应</div>
        <div id="right">自适应</div>
    </div>

         #parent{
            display: grid;
            grid-template-columns: auto 1fr;  /*auto和1fr换一下顺序就是左列自适应,右列不定宽了*/
        }
        #left {
            margin-right: 10px;
            height: 500px;
            background-color: #f00;
        }
        #right {
            height: 500px;
            background-color: #0f0;
        }

三、三列布局

效果图

b1.jpg

双飞翼&圣杯布局 实现原理：

  • 同：两种布局都将将盒子设置为右浮动，同时在HTML中盒子加载的顺序都是中左右，给定中间容器100%的宽度让其可以随着页面宽度的变化而变化。然后再用左边距将左右容器覆盖在中间容器上。
  • 异：当将三个容器拉到同一行时，圣杯布局是调整左右容器的位置，用相对定位的方式将左右容器移出中间容器，同时再给最外层容器一个内边距，防止覆盖中间容器。双飞翼布局是给中间容器再套一层内层容器，将内容在内层容器中显示，而不是在中间容器中。再给内层一个内边距，使内容不会被左右容器遮挡。

圣杯布局

实现思路：

  1. 结构 头、主体、底部；主体中间自适应宽度百分百，padding设置预留出左右盒子的位置。
  2. 3个盒子都浮动，左右盒子分别定宽度
  3. 左盒子通过margin-left:-100%,position: relative left: -200px达到指定位置，右盒子同理
    <div class="wrap">
        <div id="header">header</div>
        <div id="content">

            <div id="middle">
                <p>middle</p>
                <p>middle</p>
                <p>middle</p>
            </div>

            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>

        .wrap {
            min-width: 600px;
        }

        #header,
        #footer {
            height: 50px;
            width: 100%;
            background: grey;
        }

        #left,
        #right,
        #middle {
            float: left;
            height: 200px;
        }

        #middle {
            width: 100%;
            background: greenyellow;
        }

        #left {
            width: 200px;
            background-color: red;

            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        #right {
            width: 150px;
            background-color: plum;

            margin-left: -150px;
            position: relative;
            right: -150px;
        }

        #content {
            /* 清除浮动 */
            overflow: hidden;
            padding: 0 150px 0 200px;
        }

双飞翼布局

实现思路：

  1. 结构 头、主体、底部；主体中间自适应宽度百分百,3个盒子都浮动，左右盒子分别定宽度。
  2. 通过margin-left:-100% 完成在一行上，通过多套的盒子设置padding来达到指定位置
    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
        
            <div id="middle">
                <!-- 双飞翼多套一层 -->
                <div class="middle-inner">
                    <p>middle</p>
                    <p>middle</p>
                    <p>middle</p>
                </div>
            </div>

            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>

        .wrap {
            min-width: 600px;
        }

        #header,
        #footer {
            height: 50px;
            width: 100%;
            background: grey;
        }

        #left,
        #right,
        #middle {
            float: left;
            height: 200px;
        }

        #middle {
            width: 100%;
            background: greenyellow;
        }

        #left {
            width: 200px;
            background-color: red;

            margin-left: -100%;
        }

        #right {
            width: 150px;
            background-color: plum;

            margin-left: -150px;
        }
        
        /* 处理方式不同 */
        .middle-inner {
            padding: 0 150px 0 200px;
        }
        #content {
            /* 清除浮动 */
            overflow: hidden;
        }

小结:

圣杯布局和双飞翼布局实现的效果都是相同的，只是在左右容器覆盖在中间容器中时，处理的容器不同而已。圣杯布局在处理左右容器，用相对定位时要注意左右平移的方向是相反的。双飞翼布局处理中间容器时要注意内层容器的内边距。

flex实现

    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
            <div id="left">left</div>
            <div id="middle">
                <p>middle</p>
                <p>middle</p>
                <p>middle</p>
            </div>
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>

        .wrap {
            min-width: 600px;
        }

        #header,
        #footer {
            height: 50px;
            width: 100%;
            background: grey;
        }

        #content {
            display: flex;
            height: 600px;
        }

        #middle {
            flex: 1;
            background-color: #eeff2b;
        }

        #left {
            width: 200px;
            background-color: red;
        }

        #right {
            width: 200px;
            background-color: #0f0;
        }

grid实现

（1）结构配合行列划分

    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
            <div id="left">left</div>
            <div id="middle">
                <p>middle</p>
                <p>middle</p>
                <p>middle</p>
            </div>
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>

        .wrap {
            min-width: 600px;
            height: 600px;
            display: grid;
            grid-template-rows: 40px auto 30px;
        }

        #header,
        #footer {
            background-color: #ccc;
        }

        #content {
            display: grid;
            height: 100%;
            grid-template-columns: 200px auto 150px;
        }

        #left {
            background-color: red;
        }
        #middle {
            background-color: #eeff2b;
        }
        #right {
            background-color: #0f0;
        }

（2）grid-area命名方式

    <div class="wrap">
        <div id="header">header</div>
        <div id="left">left</div>
        <div id="middle">
            <p>middle</p>
            <p>middle</p>
            <p>middle</p>
        </div>
        <div id="right">right</div>
        <div id="footer">footer</div>
    </div>

        .wrap {
            min-width: 600px;
            height: 600px;
            display: grid;
            grid-template-rows: 40px auto 30px;
            grid-template-columns: 200px auto 150px;
            grid-template-areas: 
                "header header header"
                "sideLeft sideMiddle sideRight"
                "footer footer footer"
            ;
        }

        #header {
            grid-area: header;
            background-color: #ccc;
        }

        #footer {
            grid-area: footer;
            background-color: #ccc;
        }

        #left {
            grid-area: sideLeft;
            background-color: red;
        }

        #middle {
            grid-area: sideMiddle;
            background-color: #eeff2b;
        }

        #right {
            grid-area: sideRight;
            background-color: #0f0;
        }

四、多列布局

4.1 等宽布局

效果图

b1.jpg

(1) float实现

    <div id="parent">
        <div class="column">1 <p>我是文字我是文字我输文字我是文字我是文字</p>
        </div>
        <div class="column">2 <p>我是文字我是文字我输文字我是文字我是文字</p>
        </div>
        <div class="column">3 <p>我是文字我是文字我输文字我是文字我是文字</p>
        </div>
        <div class="column">4 <p>我是文字我是文字我输文字我是文字我是文字</p>
        </div>
        <div class="column">5 <p>我是文字我是文字我输文字我是文字我是文字</p>
        </div>
        <div class="column">6 <p>我是文字我是文字我输文字我是文字我是文字</p>
        </div>
    </div>

        .column {
            float: left;
            width: 15%;
            height: 400px;
            margin-right: 20px;
        }

        .column:nth-child(odd) {
            background-color: #f00;
        }

        .column:nth-child(even) {
            background-color: #0f0;
        }

        .column:last-child {
            margin-right: 0;
        }

        #parent {
            width: 1000px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

(2) flex实现

        #parent {
            width: 1000px;
            height: 500px;
            display: flex;
            justify-content: space-between;
        }

        .column {
            width: 15%;
        }

        .column:nth-child(odd) {
            background-color: #f00;
        }

        .column:nth-child(even) {
            background-color: #0f0;
        }

(2) grid实现

        #parent {
            width: 1000px;
            height: 500px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            /*6就是列数*/
            grid-column-gap: 10px;
        }

        .column:nth-child(odd) {
            background-color: #f00;
        }

        .column:nth-child(even) {
            background-color: #0f0;
        }

4.2 九宫格布局

效果图

b2.jpg

(1) flex实现

        <div id="parent">
            <div class="row">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <div class="row">
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <div class="row">
                <div class="item">7</div>
                <div class="item">8</div>
                <div class="item">9</div>
            </div>
        </div>

        #parent {
            width: 1200px;
            height: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .row {
            display: flex;
            flex: 1;
        }

        .item {
            flex: 1;
            border: 1px solid #000;
        }

(2) grid实现

        <div id="parent">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

         #parent {
            width: 1200px;
            height: 500px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3 1fr);
            grid-gap: 10px;
        }

        .item {
            border: 1px solid #ccc;
        }

五、全屏布局

效果图

b3.jpg

5.1flex方式

    <div id="parent">
        <div id="top">top</div>
        <div id="middle">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <div id="bottom">bottom</div>
    </div>

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #parent {
            height: 100%;
        }

        #parent {
            display: flex;
            flex-direction: column;
        }

        #top {
            height: 100px;
            background-color: #ccc;
        }

        #bottom {
            height: 50px;
            background-color: #ccc;
        }

        #middle {
            flex: 1;
            display: flex;
        }

        #left {
            width: 200px;
            background-color: red;
        }

        #right {
            flex: 1;
            overflow: auto;
            background-color: yellowgreen;
        }

5.2 grid方式

    <div id="parent">
        <div id="top">top</div>
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="bottom">bottom</div>
    </div>

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #parent {
            width: 100%;
            height: 100%;
        }

        #parent {
            display: grid;
            grid-template-columns: 200px 1fr;
            grid-template-rows: 100px auto 50px;

            /*方式一定义网格区域分布*/
            /* grid-template-areas:
                "header header"
                "aside main"
                "footer footer"; */
        }

        #top {
            grid-area: header;
            /*指定在哪个网格区域*/
        }

        #left {
            grid-area: aside;
            /*指定在哪个网格区域*/
        }

        #right {
            grid-area: main;
            /*指定在哪个网格区域*/
        }

        #bottom {
            grid-area: footer;
            /*指定在哪个网格区域*/
        }

        /* 方式二: 划区域线 */
        #top,
        #bottom {
            grid-column: 1/3;
        }

六、移动端布局

avatar
文章
阅读
粉丝