关于css3:CSS单位

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 中最大的那个。