css常用单位-在线源码网

单位类型

绝对：像素（px），不管元素用什么单位，浏览器统一转换为px
相对：百分比（%），继承字号（em），根字号（rem），视口（vw、vh）
其他：厘米（cm），毫米（mm），英寸（in=2.54cm=96px），磅（pt=1/72in）
移动端布局：rem + vw

字号单位em/rem

浏览器默认值为1em=16px，当然我们可以在html中自定义。

浏览器会将所有的单位转换为px

em与元素位置/层级相关，导致不统一，可以用rem来进行规范

em：根据自身或者父元素变换

rem：根元素（固定）

当我们在html中设置font-size: 10px;之后，2em则等于20px

<body>
    <div style="font-size: 2em">昊森</div>
  </body>
  <style>
    html {
      font-size: 10px;
    }
  </style>

视口单位vw/vh

优点：永远以当前可视窗口为参照物，动态调整元素大小，实现轻松布局。

缺点：以窗口百分比为依据，不够精细，通常与rem配合工作

<body>
    <header>头</header>
    <main>身子</main>
    <footer>脚</footer>
  </body>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: content-box;
    }
    body * {
      outline: 1px solid;
      background: #5bb1b7;
    }
    body header {
      height: 5vh;
    }
    body footer {
      height: 5vh;
    }
    body main {
      min-height: calc(100vh - 5vh - 5vh);
      background: #7f0f78;
    }
  </style>

vh永远相对视口，可以让我们的页面在手机端永远占满页面

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

文章版权声明 1、本网站名称：在线源码网
2、本站永久网址：https://zaixym.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

CSS笔记笔记教程
# css # 常用单位

css常用单位

单位类型

字号单位em/rem

视口单位vw/vh

感谢您的来访，获取更多精彩文章请收藏本站。

请登录后发表评论