11、像素和百分比

最新推荐文章于 2023-10-10 10:59:42 发布

五仁卤鸡翅

最新推荐文章于 2023-10-10 10:59:42 发布

阅读量619

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106854777

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
像素和百分比

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

像素和百分比

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:200px;
    height:200px;
    background-color:orange
}
.box2{
    width:50%;
    height:50%
}
.box3{
    width:10em;
    height:10em;
    background-color:green
}

长度单位：
    像素
      -屏幕（显示器），实际上由一个个小点组成
      -不同屏幕像素大小不同，像素越小的屏幕显示效果越清晰
      -所以，同样的200px在不同设备下，显示效果不一样
    百分比
      - 也可将属性值设置为相对于其父元素的属性的百分比
      - 设置百分比，可以跟随父元素的改变而改变
    em:
      - 相对于元素的字体大小来计算的 
         1em = 1 font-size
       - 根据字体大小改变而改变  
    rem:
       - 相对于根元素的字体大小计算
          
</style>
<body>
  <div  class="box1" >
       <div  class="box2" ></div>  
  </div> 
  <div  class="box3" >
  </div>    
</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11、像素和百分比

文章目录介绍像素和百分比介绍本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记像素和百分比<html lang="en"><head> <meta charset="UTF-8"> <title>meta</title></head><style>.box1{ width:200px; height:200px; background-color:oran
复制链接

扫一扫

专栏目录