px和em和rem的区别

riverrun_z

已于 2022-07-15 15:48:56 修改

阅读量58

点赞数

文章标签： css3

于 2022-04-15 11:29:37 首次发布

本文链接：https://blog.csdn.net/weixin_48047636/article/details/124191068

版权

px和em的区别

em指的是子元素相对于父元素的大小, 如果父元素是8px 那么子元素如果是1em那子元素就也是8px,如果子元素是2em 那子元素就是8*2=16px

<body>
    <h1>em和px的区别</h1>
    <ul style="font-size: 16px;">我是父元素
        <li style="font-size: 0.5em;">我是子元素</li>
        <li style="font-size: 2em;">我是子元素</li>
        <li style="font-size: 4em;">我是子元素</li>
    </ul>
</body>

结果截图

在这里插入图片描述

rem指的是html这个网页的倍数

<html lang="en" style="font-size: 50px;">

<body>
    <h1>em和px的区别</h1>
    <ul style="font-size: 16px;">我是父元素
        <li style="font-size: 0.5em;">我是子元素</li>
        <li style="font-size: 2em;">我是子元素</li>
        <li style="font-size: 4em;">我是子元素</li>
        <li style="font-size: 3rem;">我是html的rem字体大小</li>
    </ul>
</body>

结果截图

在这里插入图片描述
笔记

<!DOCTYPE html>
<html lang="en" style="font-size: 50px;">
<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>
        .wt{
            width: 800px;
            height: 800px;
            border: 1px solid red;
            background-image: url(../img/logo.webp);
            background-repeat: no-repeat;
            background-position-x: center;background-position-y:center ;
        }
    </style>
</head>
<body>
    <!-- <h1>em和px的区别</h1> -->
    <ul style="font-size: 16px;">我是父元素
        <li style="font-size: 0.5em;">我是子元素</li>
        <li style="font-size: 2em;">我是子元素</li>
        <li style="font-size: 4em;">我是子元素</li>
        <li style="font-size: 3rem;">我是html的rem字体大小</li>
    </ul>
    <!-- 字体的样式 -->
   <UL>
       <li style="font-weight: normal;">字体正常粗细</li>
       <li style="font-style:italic">字体倾斜</li>
       <li style="font-weight: bold;">字体粗</li>
       <li style="font-weight: lighter;">字体细</li>
       <li style="font:italic lighter 80px Arial;">简写</li>
   </UL>
   <!-- 
       垂直居中
    -->
    <div style="width: 100; height: 100px;line-height: 100px; border: 3px solid red;text-align: center;">我要垂直和水平居中</div>

    <!-- 强制不换行+文本溢出隐藏 -->
    <div style="width: 300px; height: 100px; border: 1px solid red ;white-space: nowrap;overflow: hidden; text-overflow:ellipsis;">今天推荐的文章来自《森林如何思考》，作者是美国人类学家爱德华多·科恩。 这是一本迷人的人类学著作。它的基本研究方法仍然是民族志田野调查，但它的目标却不同于传统的人类学</div>

    <!-- 图片文字在一行 -->
    <div>今天推荐的文章来自《森林如何思考》，作者是美国人类学家爱德华多·科恩。 这是一本迷人的人类学著作。它的基本研究方法仍然是民族志田野调查，但它的目标却不同于传统的人类学<img src="../img/logo.webp" alt="" style="vertical-align: middle;"></div>

    <!-- 盒子阴影 -->
    <style>
        .item2,.item3,.item4{
            width: 100px;
            height: 100px;
            float: left;
            margin-left:70px;
            box-shadow: 5px 5px 10px 20px red;
        }
        .item2{background-color: blue;}
        .item3{background-color: blueviolet;}
        .item4{background-color: deeppink;}
    </style>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>

    <!-- 鼠标设置 -->
    <h1>鼠标设置</h1>
    <ul>
        <li style="cursor: help;">帮助</li>
        <li style="cursor: wait;">等待</li>
        <li style="cursor: pointer;">小手</li>
        <li style="cursor: default;">箭头</li>
    </ul>
    <!-- 背景图的设置 -->
    <div class="wt"> 
    </div>
</body>
</html>

在这里插入图片描述

riverrun_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
px和em和rem的区别

px和em的区别em指的是子元素相对于父元素的大小, 如果父元素是8px 那么子元素如果是1em那子元素就也是8px,如果子元素是2em 那子元素就是8*2=16px<body> <h1>em和px的区别</h1> <ul style="font-size: 16px;">我是父元素 <li style="font-size: 0.5em;">我是子元素</li> <li sty
复制链接

扫一扫