em,rem的总结+课程表

em的特点：

1.em的值不是固定的，只要文本内不修改字体尺寸，浏览器默认是16PX
2.em会继承父级元素的值
3.em比PX更加灵活

rem的特点：

rem是一个相对单位，这单位可谓集相对大小和绝对大小的优点于一身，它是一个根元素，不像em一样使用级联的方式来计算尺寸，默认是16px,除非人为修改,否则不变

使用场景

1.em在移动端，web端均可使用，其参考对象为父元素,设置时都需要知道父元素文本的font-size及当前对象内文本的font-size

2.rem适合在移动端使用，其参考对象为根元素

推荐使用rem

1.rem是根元素不会继承父级元素大小

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        html{
            font-size: 100px;
        }
        table th,
        table td{
            border: 0.1em solid #000;
        }
        table{
            width: 50%;
            border-collapse: collapse;
            margin: auto;
            text-align: center;
            font-size: 0.16em;
        }
        table caption{
            font-size: 0.12em;
            margin-bottom: 0.02em;
        }
        table thead{
            background-color: red;
        }
         .time{
            background-color: cyan;
        }
    </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" class="time">上午</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>
    </tbody>
    <tbody>
        <tr>
            <td colspan="6">中午休息</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3" class="time">下午</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 class="time" colspan="5">每天下午15.30~17.30在校写作业</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

em的特点：

rem的特点：

使用场景

推荐使用rem

相关文章