CSS 的值与单位

• 数值
• 百分比
• 颜色
• 坐标
• 函数

数值

长度与大小

.tour {
  margin: 3px;
  padding: 8px;
  border: 2px solid black;
}
 
.description {
  width: 150px;
  font-size: 18px;
}

• em 1em = 默认字体大小的倍数(比如不设置时是字体是20px，那2em 就是40px)
• rem 1rem = 根元素(html 节点)字体大小的倍数。IE8 及以下不支持 rem， Tips:caniuse.com查询兼容性。

html {
  font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
}
 
.sqaure {
  width: 5rem;  /* 50px */
  height: 5rem; /* 50px */
}

注意 中文版的 Chrome 不支持把 font-size 设置到到 12px 以下，因此可以考虑给根元素设置 font-size: 125%。

• vw, vh 1vw = 1% 视口宽度, 1vh = 1% 视口高度

无单位的值

body {
  padding: 0;
}
 
p {
  line-height: 1.5;
}

动画相关数值

.rotate360 {
  transform: rotate(360deg);
}
 
.box {
  transition: all 0.3s ease;
}

百分比

.container {
  width: 80%;
  margin: 5% auto;
  font-size: 200%;
}

<quiz name="小测试">
    <question>
        <p>width:100% 是什么意思?</p>
        <answer>设置当前元素的宽度(包括 margin、border、padding、content)等于父容器的宽度(包括 margin、border、padding、content)</answer>
        <answer correct>设置当前元素的宽度(content)等于父容器的宽度(content)</answer>
        <explanation>设置元素的 content 的宽度等于父容器 content 的宽度.对块级元素不要随便加 width: 100%</explanation>
    </question>
 
</quiz>

颜色

颜色关键字

a {
  color: white;
  background-color: blue;
}

十六进制值

p {
  background-color: #e0b0ff;
}

RGB

p {
  background-color: rgb(224, 176, 255);
}

HSL

p {
  background-color: hsl(276, 100%, 85%);
}

RGBA & HSLA

p {
  background-color: rgb(224, 176, 255, .5);
}

p {
  background-color: hsla(240, 100%, 50%, 0.5);
}

currentColor 关键字

表示和当前元素的color一样的颜色

  <div class="box">box
    <span class="child">child</span>
  </div>
 
  <style>
    .box {
      color: red;
    }
    .child {
      border: 4px solid currentColor;
    }
 
  </style>

查看更多

Opacity

注意 设置在父元素上 opacity 会影响到其后代元素。

p {
  opacity: .5;
  background-color: rgb(224, 176, 255);
}

函数

transform: rotate(45deg);
 
transform: translate(50px, 60px);
 
width: calc(90% - 15px);

动手: 做一个带头、内容、尾的页面，其中当内容高度不够时，尾总是保持在靠近窗口底部

答案

[延伸]解释上述CSS代码中每行代码每个属性的作用

参考链接

• http://laifh.com/blog/post/125
• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units