css常用单位em,rem
1.特点
| 单位 |
特点 |
推荐场景 |
| em |
继承字号,受自身和祖先影响 |
PC端 |
| rem |
根字号, 字号常量不变, 不受父元素影响 |
移动端 |
2.示例
<!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>表格中常用的样式</title> <style> /* 1. 添加表格线: 一定要添加到单元格中 td , th */ table td, table th { font-size: 1rem; border: 0.0625rem solid #000; } /* 2. 折叠表格线: table */ table { border-collapse: collapse; } /* 3. 对表格进行一些布局设置 */ table { width: 90vw; /* margin-left: auto; margin-right: auto; margin: auto auto; */ /* 块级元素在父级中的居中 */ margin: auto; /* 文本水平居中 */ text-align: center; } /* 标题 */ table caption { font-size: 1.2rem; margin-bottom: 0.72rem; } table thead { background-color: lightcyan; } /* table tbody .period { background-color: lightgreen; } */ /* table tbody tr:first-of-type td:first-of-type { */ /* 第二个tbody应该去掉,作用:not 取反的伪类 */ table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type { background-color: lightgreen; } </style></head><body> <table> <caption> 合肥市同安小学五年级课程表 </caption> <thead> <tr> <th>时间</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> </tr> </thead> <!-- 上午 --> <!-- 第一个tbody --> <tbody> <tr> <td rowspan="4" class="period">上午</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 --> <tbody> <tr> <td colspan="6">中午休息</td> </tr> </tbody> <!-- 下午 --> <!-- 第3个tbody --> <tbody> <tr> <td rowspan="3" class="period">下午</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">每天下午15:30-17:30在校写作业</td> </tr> </tfoot> </table></body></html>
