单位em和rem区别，box-sizing定义边界，VW和VH，字体图标，定位原理

em 和 rem

em 单位

.CSS { font-size:16px; }

• 上下文定义 font-size rem 就会按这个值定义
• em: 根据元素的上下文来确定它的值 1em = 16px

rem 单位

html{ font-size:16px; }

• 根元素定义 font-size rem 就会按这个值定义

• rem: 根据根元素的字号来设置 1rem = 10px;

---

box-sizing

盒模型, 定义边界是否包含 padding 和 border 的值
box-sizing:border-box

• 包含 padding 和 border 的值

box-sizing:content-box

• 转为标准盒子，不含 padding 和 border 的值（默认）

---

CSS 初始化

一般我们写 CSS 样式都会先写初始化

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
</style>

• 推荐 CSS 样式初始化写法

---

vh 和 vw 视口 单位

浏览器用于显示文档的界面就是视口
手机端为了显示全 PC 界面，默认为 980px

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• width=device-width 宽度对于当前设备宽度

浏览器设备当前界面默认被等分为 100

• vh: 1vh = 视口高度的 1/100 ， vh(view hgight)
• vw: 1vw = 视口宽度的 1/100 ， vw(viem width)

<!--  例：定义宽为 50%，高为 25% -->
<style>
  .box {
    background-color: lightgreen;
    width: 50vw;
    height: 25vh;
  }
</style>

---

字体图标

参考网址：https://www.iconfont.cn/

方法一：Unicode 方式

<style>
  /* 自定义字体 */
  @font-face {
    font-family: "my_iconfont";
    src: url("font_ico/iconfont.eot");
    src: url("font_ico/iconfont.eot?#iefix") format("embedded-opentype"), url("font_ico/iconfont.woff2")
        format("woff2"), url("font_ico/iconfont.woff") format("woff"), url("font_ico/iconfont.ttf")
        format("truetype"), url("font_ico/iconfont.svg#iconfont") format("svg");
  }
  /* 定义一个类来引用自定义的字体my_iconfont */
  .iconfont2 {
    font-family: "my_iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

引入到 html 中
<span class="iconfont2">&#xe744</span>

方法二：Font class 方式

• 第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

• 第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx">

---

定位原理与应用

https://www.php.cn/code/36264.html
position:statkic 默认定位
控制偏移：

top: 5em;
left: 4em;
right: 3em;
bottom: 2em;

• 相对定位
  position:relative
  相对于他在的文档流中的父级或上级进行定位

  <style>
    .box {
      position: relative;
      top: 5em;
      left: 4em;
    }
  </style>

• 绝对定位
  position:absolute;
  绝对定位元素脱离了文档流
  文档流：显示顺序与书写顺序一致
  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

  <style>
    .box {
      position: absolute;
      top: 5em;
      left: 4em;
    }
  </style>

• 固定定位
  position:fixed;
  生成固定定位的元素，相对于浏览器窗口进行定位。例如：浮窗客服功能

  <style>
    .box {
      position: fixed;
      top: 5em;
      left: 4em;
    }
  </style>

• 粘性定位
  position: sticky;
  基于用户的滚动位置来定位。
  例如导航条，在拉到窗口边界时，固定显示。

  <style>
    .box {
      position: sticky;
      top: 5em;
      left: 4em;
    }
  </style>