简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2020.10.24第八课：元素大小单位的学习
Blogger Information
Blog 14
fans 0
comment 0
visits 7385
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2020.10.24第八课：元素大小单位的学习
启动未来
Original
738 people have browsed it

2022.10.24 元素大小单位的学习

一、元素单位

1、笔记

  • 元素为什么要有单位
  1. 单位是用来度量元素大小的依据
  2. 确定元素大小之后才知道以后如何渲染页面，如何进行页面布局
  • 元素大小单位分为3大类
    • 绝对单位，名字为像素(px)，无论页面或者css中用什么单位，最终浏览器都会转化为px,像素单位
    1. 优点：精确
    2. 缺点：不灵活，不支持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>
    1.   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;
}

  1. </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>
<td>数学</td>
</tr>
<tr>
<!-- <td>上午</td> -->
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<!-- <td>上午</td> -->
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td colspan="6">中午休息</td>
<!-- <td>中午休息</td> <td>中午休息</td> <td>中午休息</td> <td>中午休息</td> <td>中午休息</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>
<td>美术</td>
</tr>
<tr>
<!-- <td>下午</td> -->
<td>科学</td>
<td>科学</td>
<td>科学</td>
<td>科学</td>
<td>科学</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>备注:</td>
<td colspan="5">每天下午15:30-17:30在校写作业</td>
<!-- <td>每天下午15:30-17:30在校写作业</td> <td>每天下午15:30-17:30在校写作业</td> <td>每天下午15:30-17:30在校写作业</td> <td>每天下午15:30-17:30在校写作业</td> </tr> -->
</tfoot>
</table>
</body>
</html>
```

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的很好，代码内容可以放在代码块中，这样会更容易阅读
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！