zoukankan      html  css  js  c++  java
  • 布局总结记录:居中、整页、多列、圣杯、双飞翼等布局看过来!

    布局大致划分为以下几种,

    1. 浮动布局:float:left/right
    2. 定位布局:position:relative/absolute/fixed
    3. 表格布局:table
    4. 弹性布局:display:flex/inline-flex
    5. 栅格布局:display:grid/inline-grid
    6. 响应式布局:em/rem/vw/vh/vmin/vmax、媒体查询

    在这诸多的布局中,比较喜欢和实用的是浮动布局、定位布局和弹性布局,表格布局实用较少,因为稍有改动就会引起整个table的回流,对于栅格布局目前兼容性不是很好。后面主要介绍常见的实用的布局如居中布局、整页布局、多列布局、圣杯布局和双飞翼布局,下面就开始上代码,大快朵颐吧!

    居中布局:要求水平居中和垂直居中

    案例1:已知外层盒宽高和内层盒宽高

    <div class="outer">
        <div class="center"></div>
    </div>

     方法一:使用margin间距

     1  <style>
     2       .outer{
     3           width: 200px;
     4           height: 200px;
     5           background: #ece6ae;
     6           overflow: hidden;
     7       }
     8         .center{
     9             width: 50px;
    10             height: 50px;
    11             background: #99478d;
    12             margin: 75px auto;
    13         }
    14 </style>

    方法2:使用行内块元素属性text-algin:center,line-height

     1   <style>
     2       .outer{
     3           width: 200px;
     4           height: 200px;
     5           background: #ece6ae;
     6           text-align: center;//水平居中
     7           line-height: 200px;//垂直居中
     8           font-size: 0;//消除居中差异
     9       }
    10         .center{
    11             display: inline-block;//将子元素变为行内款元素
    12             width: 50px;
    13             height: 50px;
    14             vertical-align: middle;//调整垂直居中
    15             background: #99478d;
    16         }
    17     </style>

    方法三:将内层元素变为表格元素,使用属性 vertical-align: middle

     1     .outer{
     2           width: 200px;
     3           height: 200px;
     4           background: #ece6ae;
     5           display: table-cell;
     6           vertical-align: middle;
     7       }
     8         .center{
     9             width: 50px;
    10             height: 50px;
    11             background: #99478d;
    12             margin: 0 auto;
    13         }

     方法三:定位position

     1 .outer{
     2           width: 200px;
     3           height: 200px;
     4           background: #ece6ae;
     5           position: relative;
     6       }
     7         .center{
     8             width: 50px;
     9             height: 50px;
    10             background: #99478d;
    11             position: absolute;
    12             left: 50%;
    13             top: 50%;
    14             margin: -50px 0 0 -50px;
    15         }

     方法四:使用flex最简洁的代码来了

     1  .outer{
     2           width: 200px;
     3           height: 200px;
     4           background: #ece6ae;
     5           display: flex;
     6           justify-content: center;
     7           align-items: center;
     8       }
     9         .center{
    10             width: 50px;
    11             height: 50px;
    12             background: #99478d;
    13         }

    除去宽高背景色代码,最最简洁的代码,有木有!!!

    1  .outer{
    2       display: flex;
    3    } 
    4  .center{
    5      margin: auto;
    6    }

    案例2:已知外层盒宽高,内层盒为行内元素且宽高不详,上面的方法一二三统统不能实现了,喔豁!!!

    别急不是还有方法四flex的两种写法来救场嘛,开始表演

    <div class="outer">
        <span class="center">哈哈哈</span>
    </div>
    .outer{
              width: 200px;
              height: 200px;
              background: #ece6ae;
              display: flex;
          }
     .center{
                margin: auto;
                background: #997890;
     }
    .outer{
        width: 200px;
        height: 200px;
        background: #ece6ae;
        display: flex;
        justify-content: center;
        align-items: center;
     }
    .center{
       background: #997890;
    }

    整页即全屏布局:分为上中下,顶部、底部、主体三部分,三部分占满全屏,顶部和底部固定主体自适应。

     方法一:使用calc属性计算(注意块元素宽高的继承)

     1 <style>
     2         body,html{
     3             width: 100%;
     4             height: 100%;
     5         }
     6         header{
     7             height: 50px;
     8             background: #8e5b8c;
     9         }
    10         main{
    11             height: calc(100% - 100px);
    12             background: aquamarine;
    13         }
    14         footer{
    15             height: 50px;
    16             background: #721e8e;
    17         }
    18 </style>
    19 <body>
    20     <header></header>
    21     <main></main>
    22     <footer></footer>
    23 </body>
    View Code

    方法二:使用position定位

    <style>
            body,html{
               position: relative;
            }
            header{
                position: absolute;
                top: 0;
                height: 50px;
                width: 100%;
                background: #8e5b8c;
            }
            main{
                position: absolute;
                top: 50px;
                bottom: 50px;
                width: 100%;
                background: aquamarine;
            }
            footer{
                position: absolute;
                bottom: 50px;
                width: 100%;
                height: 50px;
                background: #721e8e;
            }
    </style>
    <body>
        <header></header>
        <main></main>
        <footer></footer>
    </body>
    View Code

    方法三:使用flex

    <style>
            .full{
                display: flex;
                flex-direction: column;
                width: 300px;
                height: 300px;
            }
            header {
                height: 50px;
                background-color: #f66;
            }
            footer {
                height: 50px;
                background-color: #66f;
            }
            main {
                flex: 1;
                background-color: #3c9;
            }
    </style>
    <div class="full">
        <header></header>
        <main></main>
        <footer></footer>
    </div>
    View Code

     多列布局:两列布局,一侧固定宽度,另一侧宽度自适应;三列布局,分为左中右,中间内容自适应,两侧固定宽度;其他均等宽度多列布局等;

    两列布局

    方法一:使用间距和浮动

    <style>
            .two-column{
              width: 300px;
                height: 300px;
            }
            .left{
                width: 50px;
                height: 100%;
                float: left;
                background: aquamarine;
            }
            .right{
                height: 100%;
                margin-left: 50px;
                background: #994197;
            }
     </style>
    <div class="two-column">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    View Code

    方法二:BFC不会与float box重叠原理,使用float、overflow

     1 <style>
     2         *{
     3             margin: 0;
     4             padding: 0;
     5         }
     6         .two-column{
     7           width: 300px;
     8             height: 300px;
     9         }
    10         .left{
    11             width: 50px;
    12             height: 100%;
    13             float: left;
    14             background: aquamarine;
    15         }
    16         .right{
    17             overflow: hidden;
    18             height: 100%;
    19             background: #994197;
    20         }
    21 </style>
    22 <div class="two-column">
    23     <div class="left"></div>
    24     <div class="right"></div>
    25 </div>
    View Code

    方法三:使用flex,代码更为简洁

     1  <style>
     2         .two-column{
     3             display: flex;
     4             width: 300px;
     5             height: 300px;
     6         }
     7         .left {
     8             width: 50px;
     9             background-color: #f66;
    10         }
    11         .right {
    12             flex: 1;
    13             background-color: #66f;
    14         }
    15 </style>
    16 <div class="two-column">
    17     <div class="left"></div>
    18     <div class="right"></div>
    19 </div>
    View Code

    三列和两列的布局是一个道理的,这里也不多赘述了,贴贴多列并且均列的布局

    方法一:使用flex

     <style>
            .more-column{
                display: flex;
                width: 300px;
                height: 300px;
            }
            .column{
                flex: 1;
            }
            .column:nth-child(1){
                background: aquamarine;
            }
            .column:nth-child(2){
                background: aqua;
            }
            .column:nth-child(3){
                background: olivedrab;
            }
            .column:nth-child(4){
                background: #3a806b;
            }
        </style>
    <div class="more-column">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
    View Code

    方法二:将块元素变为行内元素

    <style>
            .more-column{
                width: 300px;
                height: 300px;
            }
            .column{
                width: 25%;
                height: 100%;
                display: inline-block;
                margin-left: -5px;
            }
           
    </style>
    <div class="more-column">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
    View Code

    方法三:使用浮动

     1 <style>
     2         .more-column{
     3             width: 300px;
     4             height: 300px;
     5             overflow: hidden;
     6         }
     7         .column{
     8             float: left;
     9             width:calc(100% / 4);
    10             height: 100%;
    11         }
    12     </style>
    13 
    14 <div class="more-column">
    15     <div class="column"></div>
    16     <div class="column"></div>
    17     <div class="column"></div>
    18     <div class="column"></div>
    19 </div>
    View Code

    圣杯和双飞翼是一个布局,只是名字叫法不一样,哈哈被套路了吧!

     1 <style>
     2         body{
     3             display: flex;
     4             min-height: 100vh;
     5             flex-direction: column;
     6         }
     7         header, footer {
     8             flex: 1;
     9         }
    10         .main{
    11             display: flex;
    12             flex: 1;
    13         }
    14         .center{
    15             flex: 1;
    16         }
    17         .left,.right{
    18             flex: 0 0 12em;
    19         }
    20 </style>
    21 <body>
    22 <header>header</header>
    23 <div class="main">
    24     <div class="left">left</div>
    25     <div class="center">center</div>
    26     <div class="right">right</div>
    27 </div>
    28 <footer>footer</footer>
    29 </body>
    佳物不独来,万物同相携。
  • 相关阅读:
    Thinkphp整合最新Ueditor编辑器
    git管理和自动部署项目
    [转]桶
    Linux下ThinkPHP网站目录权限设置
    ThoughtWorks FizzBuzzWhizz 代码实现
    windows bat脚本实现ftp自动下载 删除
    MCM/ICM2018美国大学生数学建模大赛D题翻译
    解决C/C++语言中全局变量重复定义的问题
    使用fabric解决百度BMR的spark集群各节点的部署问题
    解决百度BMR的spark集群开启slaves结点的问题
  • 原文地址:https://www.cnblogs.com/rongrongtu/p/14566718.html
Copyright © 2011-2022 走看看