2020.10.24第八课：元素大小单位的学习 - 2020.10.24第八课：元素大小单位的学习

一、元素单位

1、笔记

元素为什么要有单位

单位是用来度量元素大小的依据

确定元素大小之后才知道以后如何渲染页面，如何进行页面布局

元素大小单位分为3大类

绝对单位，名字为像素(px)，无论页面或者css中用什么单位，最终浏览器都会转化为px,像素单位

优点：精确
缺点：不灵活，不支持IE的缩放

相对单位，主要有百分比，继承字号em ，根字号rem,视口宽高vw/vh等；
其他单位，主要有厘米cm,毫米mm，inch英寸（1inch=2.54cm=96px）,磅（pt=1/72in）

使用字号属性font-size作为元素单位的优势

可继承，大大简化代码
主流浏览器默认字号是font-size:16px,较为统一

盒模型属性不可继承

使用视口比例：vw/vh作为元素单位的优势是什么

参照物永远是当前可视端口，轻松实现联动调整，简化代码
可保证元素在任何视口中，呈现统一外观，并可轻松判断横竖
2、em主要特点

1em=浏览器文本的默认字号，即根元素html.font-size=16px

如果设置了父元素文本字号的font-size,由于父元素继承样式的阻断特征，em继承父元素的font-size

em不是固定的

3、rem主要特点

rem是css3中新增的一个相对单位，即root em,根em

rem锚定的是根元素root或者叫html的font-size大小；

二、table表格大小重新调整，用rem

思路：

rem锚定的是根元素，我们把根元素html的font-size大小设置为10px,那么1rem=10px;

table表格设置过程中，需要用到合并单元格，跨行rowspan、跨列colspan等语法

设置一个块元素居中显示的方法为设置它的外边距为自动margin:auto

设置表格中单元格边框折叠的方法为border-collapse:collapase

实例代码如下：
```html
<!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>

  table caption {

margin-bottom:1rem;
}

th {
border:1px solid #000;
}

td {
border:1px solid #000;
}

table {
/ 设置表格居中，以下三个都不行 /
/ position:relative;
left:0;
right:0; /
/ !这个可以 /
/ !块级元素在父元素中的居中显示 */
width:90%;
margin:auto;
text-align:center;
border-collapse: collapse;
}

th:nth-of-type(n) {
background-color: lightcyan;
}

/ 上午+下午变成浅绿色 /
tbody>tr:first-of-type>td:first-of-type {
background-color: lightgreen;
}

tbody>tr:nth-of-type(6)>td:first-of-type {
background-color: lightgreen;
}

:root {
font-size:8px;
}
table {
font-size:2rem;
}
td {
width:2em;
}

</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">每天下午15:30-17:30在校写作业</td>

</tfoot>
</table>
</body>
</html>
```

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：完成的很好，代码内容可以放在代码块中，这样会更容易阅读

2022.10.24 元素大小单位的学习

一、元素单位

1、笔记

2、em主要特点

3、rem主要特点

二、table表格大小重新调整，用rem

思路：