Html-理解前端开发中单位(em单位和rem单位)和网络地址_html em单位

作者：小丑西瓜9 | 2024-02-10 14:43:36

踩

html em单位

Html-理解前端开发单位和网络地址

一、常用的基本单位

em 是CSS2引入的相对单位，作为字体大小使用时和百分比单位类似，都是相对于最近的父元素设置字体大小，为标签元素设置字体大小为100%和设置字体大小为1em是一样的效果，默认情况下浏览器的字体大小为16px，这样只要浏览器默认的字体大小不变，1em = 16px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .control {
        width: 500px;
        height: 200px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background-color:skyblue;
        text-align: center;
      }
      .d1 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        border: 1px solid #424242;
        width: 200px;
        height: 100px;
        font-size: 10px;
        background-color: rgb(211, 250, 36);
      }
      .d2 {
        font-size: 2em;
        width: 50px;
      }
      .d4 {
        font-size: 20px;
        width: 50px;
      }
      .d3 {
        font-size: 2em;
        width: 100px;
        height: 100px;
      }
      .d5 {
        font-size: 32px;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="control">
      <div class="d1">
        可可
        <!-- 相对单位相对于父元素的大小 -->
        <div class="d2">可可</div>
        <div class="d4">可可</div>
      </div>
      <div class="d3">可可</div>
      <div class="d5">可可</div>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

效果图
在这里插入图片描述 px

一般我都是使用px来设置我们的文本，因为它比较稳定和精确。但是px本身却存在一些问题，当用户在浏览器我们的页面时，如果他改变了浏览器的字体大小，这时会使我们的Web页面布局被打破。这样的话对于关心网页布局展示的用户来说，这就是一个必须解决的大问题。因此，就提出了使用em来定义Web页面的字体。

rem

rem root em，CSS3新增的相对单位，相比于其他CSS3单位（ch，vw，vh，vmax，vmin）移动端兼容性强，android2.1+，iso4.1+。作用和em类似，唯一的区别就是em是相对父元素的，rem是相对html根节点的，即所有使用rem单位的子元素的字体大小都是相对根节点的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .control {
        width: 500px;
        height: 200px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background-color:skyblue;
        text-align: center;
      }
      .d1 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        border: 1px solid #424242;
        width: 200px;
        height: 100px;
        font-size: 10px;
        background-color: rgb(158, 238, 169);
      }
      .d2 {
        font-size: 1rem;
        width: 50px;
      }
      .d3 {
        font-size: 16px;
        width: 50px;
      }
   
    </style>
  </head>
  <body>
    <div class="control">
     <div class="d1">
         <div class="d2">可可</div>
         <div class="d3">可可</div>
     </div>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

在这里插入图片描述 vw、vh

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
    .contrast{
        font-size:32px;
    }
    .contrast_2{
        font-size:48px;
    }
    </style>
  </head>
  <body style="font-size:1rem;">
        <div style="font-size:2rem" class="first">
            <p class="first">可可</p>
            <p class="contrast">可可</p>
            <div style="font-size:3rem" class="second">
                <p class="second">可可</p>
                <p class="contrast_2">可可</p>
            </div>
        <div>
   </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

max-width min-width

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .d1{
            width: 100%;
            height: 300px;
            background-color: rgb(3, 179, 248);
            max-width: 1200px;
            min-width: 800px;
            margin: 0 auto;
        }
    </style>
  </head>
<body>
    <div class="d1">

    </div>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

总结：
px像素
em相对单位相对于父元素的大小(不推荐使用)
rem相对单位，相对于根元素r=root根配合jsrem布局使用
vw：viewport视窗的宽度百分百视窗的宽度100vw
vh：viewport视窗的高度百分百视窗的高度100vh
最大的宽度max-width
最小的宽度min-width
最小的高度max-height
最大的高度min-height
如果出现大于或者小于设置的某个单位时，会出现滚动条

二、html文件地址

绝对地址	相对地址
不会随着文件的路径进行改变，而使路径改变	相对于当前的路径，会因为当前文件的位置而使得相对路径改变。随着文件的路径进行改变浏览器会根据当前的位置拼接具体路径

正常的绝对路径
协议+域名+文件路径+文件名称
https://www.mi.com/index.html
省略协议
//www.mi.com/index.html
省略协议和域名和端口号
/index.html

当前文件下相对地址
href="day_09盒子模型.html
./day_09盒子模型.html
返回上一个层级
…/day_09盒子模型.html
返回两个层级进行拼接
…/…/day_09盒子模型.html

绝对地址： 不会随着文件的路径进行改变，而使路径改变
正常的绝对路径：协议+域名+文件路径+文件名称
http://www.mi.com/index.html
相对地址： 相对于当前的路径，会因为当前文件的位置而使得相对路径改变。随着文件的路径进行改变浏览器会根据当前的位置拼接具体路径
当前文件下
<a href="day_09盒子模型.html"></a>等同于
<a href="./day_09盒子模型.html"></a>
返回上一个层级../day_09盒子模型.html
返回两个层级进行拼接 ../../day_09盒子模型.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/74584