Skip to content

Latest commit

 

History

History
1014 lines (830 loc) · 16.1 KB

various-layouts.md

File metadata and controls

1014 lines (830 loc) · 16.1 KB
Raw

各种CSS布局

圣杯布局

当中间部分宽度小于左右部分任意宽度时, 会发生坍塌的现象

圣杯布局

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>圣杯布局</title>

    <style>
        .grail {
            background-color: #ffffff;
            font-size: 14px;
        }

        #hd,
        #ft {
            padding: 20px 3px;
            background-color: #03a9f4;
            text-align: center;
            color: #ffffff;
        }

        .bd-lft,
        .bd-rgt,
        .bd-3-lr,
        .bd-3-ll,
        .bd-3-rr {
            margin: 10px 0;
            min-width: 400px;
        }

        .grail .main {
            background-color: #03a9f4;
            color: #ffffff;
        }

        .aside,
        .aside-1,
        .aside-2 {
            background-color: #00bcd4;
            color: #ffffff;
        }

        .grail p {
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        /* 左侧栏固定宽度，右侧自适应 */

        .bd-lft {
            zoom: 1;
            overflow: hidden;
            padding-left: 210px;
        }

        .bd-lft .aside {
            float: left;
            width: 200px;
            margin-left: -100%;
            /*= -100%*/
            position: relative;
            left: -210px;
            /* = -parantNode.paddingLeft */
            _left: 0;
            /*IE6 hack*/
        }

        .bd-lft .main {
            float: left;
            width: 100%;
        }

        /* 右侧栏固定宽度，左侧自适应 */

        .bd-rgt {
            zoom: 1;
            overflow: hidden;
            padding-right: 210px;
        }

        .bd-rgt .aside {
            float: left;
            width: 200px;
            margin-left: -200px;
            /* = -this.width */
            position: relative;
            right: -210px;
            /* = -parantNode.paddingRight */
        }

        .bd-rgt .main {
            float: left;
            width: 100%;
        }

        /* 左中右 三栏自适应 */

        .bd-3-lr {
            zoom: 1;
            overflow: hidden;
            padding-left: 210px;
            padding-right: 210px;
        }

        .bd-3-lr .main {
            float: left;
            width: 100%;
        }

        .bd-3-lr .aside-1 {
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -210px;
            _left: 210px;
            /*IE6 hack*/
        }

        .bd-3-lr .aside-2 {
            float: left;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -210px;
        }

        /* 都在左边，右侧自适应 */

        .bd-3-ll {
            zoom: 1;
            overflow: hidden;
            padding-left: 420px;
        }

        .bd-3-ll .main {
            float: left;
            width: 100%;
        }

        .bd-3-ll .aside-1 {
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -420px;
            _left: 0px;
            /*IE6 hack*/
        }

        .bd-3-ll .aside-2 {
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -210px;
            _left: 210px;
            /*IE6 hack*/
        }

        /* 都在右边，左侧自适应 */

        .bd-3-rr {
            zoom: 1;
            overflow: hidden;
            padding-right: 420px;
        }

        .bd-3-rr .main {
            float: left;
            width: 100%;
        }

        .bd-3-rr .aside-1 {
            float: left;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -210px;
        }

        .bd-3-rr .aside-2 {
            float: left;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -420px;
        }
    </style>

</head>

<body>
<div class="grail">
    <div id="hd">头部</div>

    <div class="bd-lft">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>

        <div class="aside">
            <p>侧边栏固定宽度</p>
        </div>
    </div>

    <div class="bd-rgt">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>

        <div class="aside">
            <p>侧边栏固定宽度</p>
        </div>
    </div>

    <div class="bd-3-lr">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>

        <div class="aside-1">
            <p>侧边栏1固定宽度</p>
        </div>

        <div class="aside-2">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>

    <div class="bd-3-ll">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>

        <div class="aside-1">
            <p>侧边栏1固定宽度</p>
        </div>

        <div class="aside-2">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>

    <div class="bd-3-rr">
        <div class="main">
            <p>主内容栏自适应宽度</p>
        </div>

        <div class="aside-1">
            <p>侧边栏1固定宽度</p>
        </div>

        <div class="aside-2">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>
    <div id="ft">底部</div>
</div>
</body>

双飞翼布局

双飞翼布局相对于圣杯布局，不再让父元素给左右两边腾出位置，不会发生坍塌

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>双飞翼布局</title>

    <style type="text/css">
        .grail {
            background-color: #ffffff;
            font-size: 14px;
        }

        #hd,
        #ft {
            margin: 10px 0;
            padding: 20px 3px;
            background-color: #03a9f4;
            text-align: center;
            color: #ffffff;
        }

        .grail .main {
            background-color: #03a9f4;
            color: #ffffff;
            width: 100%;
            float: left;
        }

        .left,
        .right {
            background-color: #00bcd4;
            color: #ffffff;
        }

        .grail p {
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        .main-content {
            margin: 0 200px;
            height: 300px;
        }

        .left {
            background-color: #00bcd4;
            width: 200px;
            height: 150px;
            float: left;
            margin-left: -100%;
        }

        .right {
            background-color: #00bcd4;
            width: 200px;
            height: 150px;
            float: left;
            margin-left: -200px;
        }

        .sfy-layout {
            overflow: hidden;
        }
    </style>
</head>

<body>
<div class="grail">
    <div id="hd">头部</div>

    <div class="sfy-layout">
        <div class="main">
            <div class="main-content">主内容栏自适应宽度</div>
        </div>

        <div class="left">
            <p>侧边栏1固定宽度</p>
        </div>

        <div class="right">
            <p>侧边栏2固定宽度</p>
        </div>
    </div>

    <div id="ft">底部</div>
</div>
</body>

双飞翼布局

总结: 圣杯布局与双飞翼布局的优点：利用布局，可优先渲染主要部分

单列布局

<div class="parent">
    <div class="child"></div>
</div>
  1. 水平居中

1.1. 父元素 text-align:center; 子元素：inline-block;

优点: 兼容性好 缺点: 需要同时设置子元素和父元素

.parent {
    text-align: center;
    border: 1px solid #ccc;
    background-color: #fff;
}

.child {
    display: inline-block;
    width: 300px;
    height: 100px;
    background-color: red;
}

1.2. 子元素 margin:0 auto;

优点: 兼容性好 缺点: 需要设置子元素宽度

.parent {
    background: red;
}

.child {
    margin: 0 auto;
    width: 300px;
    height: 100px;
    background: blue;
}

1.3. 父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

优点: 兼容性好 缺点: 需要知道子元素的宽度

.parent {
    position: relative;
    top: 0;
    left: 0;
    height: 400px;
    background: red;
}

.child {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    height: 100px;
    background: blue;
}

1.4. 父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

优点: 不需要知道子元素的宽度 缺点: 兼容性差(特指非现代浏览器)

.parent {
    position: relative;
    top: 0;
    left: 0;
    height: 400px;
    background: red;
}

.child {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 300px;
    height: 100px;
    background: blue;
}

1.5. 父元素：display:flex;justify-content:center;

优点: 简单 缺点: 兼容性差(特指非现代浏览器)

.parent {
    display: flex;
    justify-content: center;
    height: 400px;
    background: red;
}

.child {
    width: 300px;
    height: 100px;
    background: blue;
}
  1. 垂直居中

2.1. 父元素 display: table-cell; vertical-align: middle;

.parent {
    height: 300px;
    background: red;
    display: table-cell;
    vertical-align: middle;
}

.child {
    width: 300px;
    height: 100px;
    background: blue;
}

2.2. 父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

.parent {
    position: relative;
    top: 0;
    left: 0;
    height: 300px;
    background: red;
}

.child {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 300px;
    height: 100px;
    background: blue;
}

2.3. 父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

.parent {
    position: relative;
    top: 0;
    left: 0;
    height: 300px;
    background: red;
}

.child {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -50px;
    width: 300px;
    height: 100px;
    background: blue;
}

2.4. 父元素：display:flex;align-items:center;

.parent {
    height: 300px;
    background: red;
    display: flex;
    align-items: center;
}

.child {
    width: 300px;
    height: 100px;
    background: blue;
}
  1. 水平垂直居中

2.1. 父元素：display:table-cell;vertical-align:middle;text-align:center;子元素；display:inline-block;

.parent {
    width: 400px;
    height: 300px;
    background: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.child {
    width: 300px;
    height: 100px;
    background: blue;
    display: inline-block;
}

2.2. 父元素：position:relative;子元素：position:absolute;top:50%;left:50%;(margin-left:负的宽度的一半；margin-top:负的高度的一半；或者 transform: translate(-50%,-50%);)

.parent {
    width: 400px;
    height: 300px;
    background: red;
    position: relative;
    left: 0;
    right: 0;
}

.child {
    width: 300px;
    height: 100px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* margin-left: -150px; */
    /* margin-top: -50px; */
}

2.3. 父元素{display:flex;justify-content:center;align-items:center;}

.parent {
    height: 300px;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child {
    width: 300px;
    height: 100px;
    background: blue;
}

多列布局

  1. 左侧定宽，右侧自适应

1.1

<div class="left">left</div>
<div class="right">right</div>
.left {
    height: 400px;
    width: 300px;
    background: red;
    float: left;
}

.right {
    height: 400px;
    margin-left: 300px;
    background: blue;
}

1.2

<div class="parent">
    <div class="left">
        left
    </div>
    <div class="right-fix">
        <div class="right">
            right
        </div>
    </div>
</div>
.left {
    width: 300px;
    height: 400px;
    float: left;
    background: red;
}

.right-fix {
    width: 100%;
    margin-left: -300px;
    float: right;
}

.right {
    margin-left: 300px;
    height: 400px;
    background: blue;
}

1.3

<div class="parent">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
/*设置overflow:hidden;创建BFC。根据BFC特性，BFC不会与float box 重叠。*/
.left {
    width: 300px;
    height: 400px;
    float: left;
    background: red;
}

.right {
    height: 400px;
    background: blue;
    overflow: hidden;
}

1.4

<div class="parent">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
.parent {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.left {
    width: 300px;
    height: 400px;
    background: red;
    display: table-cell;
}

.right {
    height: 400px;
    background: blue;
    display: table-cell;
}

1.5

<div class="parent">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
.parent {
    display: flex;
    width: 100%;
}

.left {
    width: 300px;
    height: 400px;
    background: red;
}

.right {
    height: 400px;
    background: blue;
    flex: 1;
}
  1. 右侧定宽左侧自适应

2.1

<div class="parent">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
.left {
    width: 100%;
    height: 400px;
    background: red;
    float: left;
    margin-right: -300px;
}

.right {
    height: 400px;
    background: blue;
    width: 300px;
    float: right;
}

2.2

<div class="parent">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
.parent {
    width: 100%;
    display: table;
    table-layout: fixed;
}

.left {
    width: 100%;
    height: 400px;
    background: red;
    display: table-cell;
}

.right {
    height: 400px;
    background: blue;
    width: 300px;
    display: table-cell;
}

2.3

<div class="parent">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
.parent {
    width: 100%;
    display: flex;
}

.left {
    flex: 1;
    background: red;
}

.right {
    height: 400px;
    background: blue;
    width: 300px;
}
  1. 左边两列定宽，右侧自适应
<div class="parent">
    <div class="left">
        left
    </div>
    <div class="center">
        center
    </div>
    <div class="right">
        right
    </div>
</div>

3.1

.parent {
    width: 100%;
}

.left,
.center {
    background: red;
    float: left;
    width: 300px;
    height: 400px;
}

.center {
    background: yellow;
}

.right {
    height: 400px;
    background: blue;
    margin-left: 600px;
}

3.2

.parent {
    width: 100%;
}

.left,
.center {
    background: red;
    float: left;
    width: 300px;
    height: 400px;
}

.center {
    background: yellow;
}

.right {
    height: 400px;
    background: blue;
    overflow: hidden;
}

3.3

.parent {
    width: 100%;
    display: table;
    table-layout: fixed;
}

.left,
.center {
    background: red;
    display: table-cell;
    width: 300px;
    height: 400px;
}

.center {
    background: yellow;
}

.right {
    height: 400px;
    background: blue;
    display: table-cell;
}

3.4

.parent {
    display: flex;
}

.left,
.center {
    background: red;
    float: left;
    width: 300px;
    height: 400px;
}

.center {
    background: yellow;
}

.right {
    height: 400px;
    background: blue;
    flex: 1;
}

网上资料

  1. The Magic of CSS Float Property