CSS常用单位的特点及应用实例

1.CSS中常用的单位主要由:px、em、rem、vw、vx等

a.em 是继承字号，受自身和祖先的特征影响
b.rem 是根字号，主要决定于页面的font-size.是字号常量，不变。默认的font-size为16px
c. vw/vx 决定于视口的宽度。
1vw = 1/100(视口宽度 ,可用window.innerWidth获取)
1vh = 1/100(视口高度，可用window.innerHeight获取)

在使用中经常使用rem，原因在于其不收父级元素的印象，变化方便

2.rem及vw在表格中的应用

效果如图所示：
课程表
代码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的应用</title>
    <style>
        table th,
        table td{
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
            text-align: center;
            width: 90vw;
            margin: auto;
        }
        table th{
            background-color:cadetblue;
        }
        table caption{
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1em;
        }
     /* 通过下面表格的伪类,将第一行和第六行取出来,设置背景颜色 */
        table tbody tr:nth-of-type(5n+1) td:first-of-type{
            background-color:chartreuse;
        }
    </style>
</head>
<body>
    <table>
        <caption>小学生课程表</caption>
        <thead>
            <tr>
                <th>时间</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
            </tr>
            <tr>
                <td colspan="6">中午休息</td>
            </tr>
            <tr>
                <td rowspan="3">音乐</td>
                <td>音乐</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>美术</td>
                <td>美术</td>
                <td>美术</td>
                <td>美术</td>
                <td>美术</td>
            </tr>
            <tr>
                 <td>科学</td>
                <td>科学</td>
                <td>科学</td>
                <td>科学</td>
                <td>科学</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>备注</td>
                <td colspan="5">每天下午13:30~15:30在学校做作业</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

1.CSS中常用的单位主要由:px、em、rem、vw、vx等

2.rem及vw在表格中的应用

相关文章