页面布局类

• 水平居中问题
  • 行内元素的水平居中
    • 　　　　要实现行内元素的水平居中，在父级元素中设置css：适用于文字、链接等

   #container{
        text-align: center;
    }

• • 块状元素的水平居中
    • 　　　　将该块状元素的左右外边距设置为auto即可：

    .center{
        margin:0 auto;
    }

• • 多块状元素水平居中
    • 将多个块级元素设置为display：inline-block；然后父级元素设置text-align：center；

    #container{
        text-align: center;
    }
    .center{
        display: inline-block;
    }

• • • 父级使用flexbox实现子元素多个块状元素的水平居中
      • 　　注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

    #container{
        display: flex;
　　　　　　display: -webkit-flex;
        justify-content: center;
    }

• 已知宽高元素的水平垂直居中
  • 绝对定位与负边距实现，将元素的top和left都设为50%，再利用margin边距，将元素回拉它本身宽高的一半，实现垂直居中。

    #container{
        position: relative;
    }
    .center{
        position: absolute;
         100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin:-50px 0 0 -50px;
    }

• • 　绝对定位与margin，无需知道被垂直居中元素的宽高

    #container {
        position: relative;
    }

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

• 未知宽高元素的水平垂直居中
  • 　　当被居中元素是inline 或者 inline-block元素，将父元素设为display：table-cell；配合text-align 和vertical-aligh使用

    #container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    .center {

    }

• • 　　利用CSS3的transform，可以轻松实现未知元素水平垂直居中

    #container {
        position: relative;
    }

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

• • 　　使用flex布局，无需绝对定位，即可实现

    #container {
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
    }

    .center {
        
    }

• 假设高度已知，请写出三栏布局，其中左右两栏宽度各为300px；中间自适应
  • 　　全局样式如下：

  html * {
        padding: 0;
        margin: 0;
    }
  .layout {
        margin-top: 10px;
    }

    .layout article div {
        min-height: 100px;
    }

• • 　　方法1：浮动：兼容性好，但是浮动后元素脱离文档流要清浮动

    <section class="layout float">
        <style media="screen">
        .layout.float .left {
            float: left;
             300px;
            background: red;
        }

        .layout.float .right {
            float: right;
             300px;
            background: green;
        }

        .layout.float .center {
            background: blue;
        }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>这是float的方案</h1> 1/这是float的方案 2/这是float的方案
            </div>
        </article>
    </section>

• • 方法2：绝对定位，快捷！但是会脱离文档流，后面的布局都要脱离文档流，最好不要用！

<section class="layout absolute">
        <style media="screen">
        .layout.absolute .left-right-center>div {
            position: absolute;
        }

        .layout.absolute .left {
            left: 0;
             300px;
            background: red;
        }

        .layout.absolute .center {
            left: 300px;
            right: 300px;
            background: blue;
        }

        .layout.absolute .right {
            right: 0;
             300px;
            background: green;
        }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>这是决定定位方案</h1> 1、这是绝对定位方案 2、这是绝对定位方案
            </div>
        </article>
    </section>

• • 方法3：flex，CSS3中出现的方法，可以解决浮动和绝对定位的不足。

<section class="layout flexbox">
        <style>

        .layout.flexbox .left-right-center {
            display: flex;
            display:-webkit-flex;
        }

        .layout.flexbox .left {
             300px;
            background: red;
        }

        .layout.flexbox .center {
            flex: 1;
            background: blue;
        }

        .layout.flexbox .right {
             300px;
            background: green;
        }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>这是flexBox的方法</h1> 1这是flexBox的方法 2这是flexBox的方法
            </div>
            <div class="right"> </div>
        </article>
    </section>

• • 方法4：table布局，兼容性好，但是存在历史诟病

 <section class="layout table">
        <style>
        .layout.table .left-right-center {
            display: table;
             100%;
            height: 100px;
        }

        .layout.table .left-right-center>div {
            display: table-cell;
        }

        .layout.table .left {
             300px;
            background: red;
        }

        .layout.table .center {
            background: blue;
        }

        .layout.table .right {
             300px;
            background: green;
        }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>这是table的方法</h1> 1这是table的方法 2这是table的方法
            </div>
            <div class="right"> </div>
        </article>
    </section>

• • 　　方法5：grid，可做复杂的事情，代码量少很多

<section class="layout grid">
        <style>
        /*1容器声明为网格布局*/
        .layout.grid .left-right-center {
            display: grid;
             100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }

        .layout.grid .left {

            background: red;
        }

        .layout.grid .center {
            background: blue;
        }

        .layout.grid .right {

            background: green;
        }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>这是grid的方法</h1> 1这是grid的方法 2这是grid的方法
            </div>
            <div class="right"> </div>
        </article>
    </section>

• 如果上述高度未知，有哪些能用？
  • flex布局和table能用

三栏布局：

　　1、上下高度固定中间自适应

　　2、左右宽度固定中间自适应

两栏布局：

　　1、左宽度固定，右自适应

　　2、右宽度固定，左自适应

　　3、上高度固定，下自适应

　　4、下高度固定，上自适应