关于css:css-学习笔记二-使用相对单位

css 学习笔记二 应用绝对单位

置信每一个程序员都心愿本人写的程序足够强壮，可能应答多种状况的变动，而不是一有什么变动就跑去批改本人的程序(立刻放弃写代码)，置信绝对单位能够解决你的局部问题

em 介绍

em是最常见的绝对单位，1em就代表着以后元素的字号，2em代表着以后元素字号的两倍。

常见的 em 用法

最常见的用法是利用 em 设置 font-size, padding, border-radius 等，这样依据字号大小的不同，css能做出绝对应的响应.

rem 介绍

如果你想利用 em 来定义多重嵌套的元素的字号时，可能会产生意想不到的状况，例如：

<ul>
  <li>Top level
    <ul>
      <li>Second level
        <ul>
          <li>Third level
            <ul>
              <li>Fourth level
                <ul>
                  <li>Fifth level</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

这是因为 em 总是利用父元素的字号计算本人的字号大小，为了解决这个问题，就能够应用 rem，rem 会计算根元素的的大小来决定本人的大小，而不是父元素。

应用 vmin 设置正方形元素的大小

vmin是指的窗口较小的一条边的大小，除此之外，还有

• 1vh 窗口高度的 1/100
• 1vw 窗口高度的 1/100
• 1vmax 宽，高中较大的一方的 1 /100
• 1vmin 宽，高中较小的一方的 1 /100

如果你想定义一个正方形，只须要

.square {
    width: 90vmin;
    height: 90vmax;
    background: red;
}

应用 calc()定义字号

:root {font-size: calc(0.5em + 1vw)
}

calc能够计算括号中的数值，如此一来，用 0.5em 来保障最小的字号。随着浏览器窗口的大小变动，vw能够保障字号随着窗口大小的变动而随之变动。

一个无关相对值的内容

css 中的自定义属性

例如：

:root {--main-font: sans-seif, Arial;}

p {font-family:var(--main-font, Helvetica);
}

如例中所示，定义变量前要用 --，应用时要用var() 包围住变量名, 并且 var 中能够承受第二个参数，若第一个参数变量未定义，则应用第二个参数。