css常用单位

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
单位类型
  1. 绝对：像素（px），不管元素用什么单位，浏览器统一转换为px
  2. 相对：百分比（%），继承字号（em），根字号（rem），视口（vw、vh）
  3. 其他：厘米（cm），毫米（mm），英寸（in=2.54cm=96px），磅（pt=1/72in）
  4. 移动端布局：rem + vw
字号单位em/rem

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

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

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

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

rem：根元素（固定）


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

  1. <body>
  2.     <div style="font-size: 2em">昊森</div>
  3.   </body>
  4.   <style>
  5.     html {
  6.       font-size: 10px;
  7.     }
  8.   </style>

视口单位vw/vh

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

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

  1. <body>
  2.     <header>头</header>
  3.     <main>身子</main>
  4.     <footer>脚</footer>
  5.   </body>
  6.   <style>
  7.     * {
  8.       margin: 0;
  9.       padding: 0;
  10.       box-sizing: content-box;
  11.     }
  12.     body * {
  13.       outline: 1px solid;
  14.       background: #5bb1b7;
  15.     }
  16.     body header {
  17.       height: 5vh;
  18.     }
  19.     body footer {
  20.       height: 5vh;
  21.     }
  22.     body main {
  23.       min-height: calc(100vh - 5vh - 5vh);
  24.       background: #7f0f78;
  25.     }
  26.   </style>

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

【文章原创作者：ddos攻击防御 http://www.558idc.com/aqt.html欢迎留下您的宝贵建议】
更多阅读