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%;
}

width:100% 是什么意思?

设置当前元素的宽度(包括 margin、border、padding、content)等于父容器的宽度(包括 margin、border、padding、content) 设置当前元素的宽度(content)等于父容器的宽度(content) 设置元素的 content 的宽度等于父容器 content 的宽度.对块级元素不要随便加 width: 100%

颜色

颜色关键字

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代码中每行代码每个属性的作用

参考链接

results matching ""

    No results matching ""