CSS单位

Posted 2021-09-13 。。

css单位

1. px

• 是什么：

  最常用的单位，绝对单位

• 用法：

  .test-box{
      font-size: 14px;
  }

• 缺点：

  为固定值，一旦设置了就无法因为适应页面大小而改变

2. rem：

• 是什么：

  是css3新增的相对单位，指相对于根元素的字体大小的单位

• 用法：

  html{ 
      font-size:14px
  }
  //

在元素上中：

.test-box{
   font-size:2rem;
 }

• 优势：

  • 实现强大的屏幕适配布局
  • 计算方便

• 缺点：

  rem是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小

3. em：

• 是什么

  相对单位，相对于父元素。而rem是相对于根元素。子元素字体大小的em是相对于父元素字体大小。

• 用法

  <div class="test">
      我是父元素div
      <p>
          我是子元素p
          <span>我是孙元素span</span>
      </p>
  </div>

.test {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
.test p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
}
.test span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}

• 缺点：

  • 因为是相对于父元素，所以在层叠时可能会出现意想不到的效果。
  • 计算相对于rem更麻烦

• 优势：

  • 实现自适应布局

4. vw, vh, vmin, vmax

• 是什么：

  视口单位中的“视口”，桌面端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器)；移动端指的就是Viewport中的Layout Viewport。

  1.vw：1vw等于视口宽度的1%。
  
  2.vh：1vh等于视口高度的1%。
  
  3.vmin：选取vw和vh中最小的那个。
  
  4.vmax：选取vw和vh中最大的那个。