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中能够承受第二个参数，若第一个参数变量未定义，则应用第二个参数。