CSS 日常练习----布局问题

记录日常 CSS 练习的小知识点 —— 布局问题

布局问题

  1. 头部固定

    点击预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>头部固定</title>
    <style>
    *{
    padding: 0;
    margin:0;
    }
    .header {
    width: 100%;
    background: springgreen;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    }
    .first-screen{
    height: 100vh;
    box-sizing: border-box;
    padding-top: 100px;
    background: red;
    }
    .second-screen{
    height: 200px;
    background: #ace;
    }
    </style>
    </head>
    <body>
    <div class="header">
    我是头部
    </div>
    <div class="first-screen">
    我是第一屏
    </div>
    <div class="second-screen">
    我是后面的内容
    </div>
    </body>
    </html>
  2. 头尾固定中间滚动-css

    点击预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>头尾固定,中间滚动-css-absolute</title>
    <style>
    *{
    padding: 0;
    margin:0;
    }
    .header {
    width: 100%;
    background: springgreen;
    height: 100px;
    /* position: absolute; */
    position: fixed;
    top: 0;
    }
    .body {
    position: absolute;
    top: 100px;
    bottom: 100px;
    overflow-y: scroll;
    width: 100%;
    }
    .c{
    height: 1000px;
    }
    .footer {
    width: 100%;
    background: goldenrod;
    height: 100px;
    /* position: absolute; */
    position: fixed;
    bottom: 0;
    }
    </style>
    </head>
    <body>
    <div class="header">
    我是头部
    </div>
    <div class="body">
    我是中间内容层
    <div class="c">

    </div>
    </div>
    <div class="footer">
    我是尾部
    </div>
    </body>
    </html>
  3. 头尾固定中间滚动-flex

    点击预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>头尾固定,中间滚动-flex</title>
    <style>
    *{
    padding: 0;
    margin:0;
    }
    html, body {
    font-family: sans-serif;
    height: 100%;
    width: 100%;
    }

    .container {
    display: flex;
    /*关键, flex布局*/
    flex-direction: column;
    /*关键,三块主题column摆放。*/
    height: 100%;
    /*关键,设置高度为可见高度的100 % ;*/
    }

    .header {
    width: 100%;
    background: springgreen;
    }

    .body {
    flex: 1;
    /*关键, 填充剩余空间*/
    width: 100%;
    background: lightyellow;
    overflow-y: scroll;
    /*关键,超出部分滚动*/
    }
    .c{
    height: 1000px;
    }
    .footer {
    width: 100%;
    background: goldenrod;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="header">
    我是头部
    </div>
    <div class="body">
    我是中间内容层
    <div class="c">

    </div>
    </div>
    <div class="footer">
    我是尾部
    </div>
    </div>

    </body>
    </html>
  4. 伸缩三栏布局

    点击预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" href="e.css" />
    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    html,
    body {
    height: 100%;
    color: #fff;
    }
    body {
    min-width: 100%;

    /*设置body为伸缩容器*/
    display: -webkit-box; /*旧版本:ios 6-,safari 3.1-6*/
    display: -moz-box; /*旧版本:firefox 19-*/
    display: -ms-flexbox; /*混合版本:IE10+*/
    display: -webkit-flex; /*新版本:Chrome*/
    display: flex; /*标准规范*/

    /*伸缩项目换行*/
    /*旧版本:设置伸缩流*/
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -webkit-box-direction: normal;
    /*旧版本:伸缩项目换行*/
    -moz-box-lines: multiple;
    -webkit-box-lines: multiple;
    -webkit-flex-flow: column wrap;
    /*混合版本:伸缩流方向与伸缩项目换行*/
    -ms-flex-flow: column wrap;
    /*最新版本:伸缩流方向与伸缩项目换行*/
    flex-flow: column wrap;
    justify-content: start;
    }
    header {
    background: hsla(200, 10%, 70%, 0.5);
    min-height: 100px;
    width: 100%;
    padding: 10px 20px;
    }
    section {
    margin: 20px 0;
    /*设置section为伸缩容器*/
    display: -webkit-box; /*旧版本:ios 6-,safari 3.1-6*/
    display: -moz-box; /*旧版本:firefox 19-*/
    display: -ms-flexbox; /*混合版本:IE10+*/
    display: -webkit-flex; /*新版本:Chrome*/
    display: flex; /*标准规范*/

    /*伸缩项目换行*/
    /*旧版本:设置伸缩流*/
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -webkit-box-direction: normal;
    /*旧版本:伸缩项目换行*/
    -moz-box-lines: multiple;
    -webkit-box-lines: multiple;
    -webkit-flex-flow: row wrap;
    /*混合版本:伸缩流方向与伸缩项目换行*/
    -ms-flex-flow: row wrap;
    /*最新版本:伸缩流方向与伸缩项目换行*/
    flex-flow: row wrap;
    justify-content: start;

    /*设置伸缩性:可以让元素自适应高度*/
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;

    /*侧轴排列方式*/
    -moz-box-align: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    }
    article {
    /*设置伸缩性*/
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;

    /*重新排列顺序*/
    /*旧版本*/
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    /*混合版本*/
    -ms-flex-order: 2;
    /*新版本*/
    -webkit-order: 2;
    order: 2;

    background: yellowgreen;
    margin: 0 10px;
    }
    aside {
    width: 50px;
    /*重新排列顺序*/
    /*旧版本*/
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    /*混合版本*/
    -ms-flex-order: 3;
    /*新版本*/
    -webkit-order: 3;
    order: 3;
    background: salmon;
    }
    nav {
    width: 50px;
    /*重新排列顺序*/
    /*旧版本*/
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    /*混合版本*/
    -ms-flex-order: 1;
    /*新版本*/
    -webkit-order: 1;
    order: 1;
    background: salmon;
    }
    footer {
    background: hsla(250, 50%, 80%, 0.9);
    min-height: 60px;
    min-width: 100%;
    padding: 1%;
    -webkit-order: 3;
    order: 3;
    }
    </style>
    </head>
    <body>
    <h1 style="height:50px;background:red;">左右两边宽度一定,中间自适应</h1>
    <header>我是页眉</header>
    <section>
    <article>我是主内容</article>
    <nav>我是侧边导航栏</nav>
    <aside>我是右边栏</aside>
    </section>
    <footer>我是页脚</footer>
    </body>
    </html>
0%