小结

  1. display: none; 和 visibility: hidden; 都是不可见，且不支持页面交互。前者不占空间，后者仍然占据空间

  2. 文档大小默认占满整个页面

    1
    2
    3
    4
    5
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

  3. div 容器占满整个页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div style="height:100%; background: #0b97c4"></div>
    </body>
    </html>

  4. 容器不透明度设置 opacity, 颜色透明度 rgba

  5. 单词换行

    • white-space，控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line
    • word-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all
    • word-wrap（overflow-wrap）控制长度超过一行的单词是否被拆分换行，是 word-break 的补充，它有两个值：normal | break-word

问题

  1. 引入css文件时，必须指定 rel="stylesheet" 否则会加载失败

    1
    <link rel="stylesheet" href="iconfont.css" />