likes
comments
collection
share

深入解析CSS-前置基础

作者站长头像
站长
· 阅读数 22

GitHub：github.com/ForeverYoun…

一、层叠、优先级和继承

层叠：一系列css规则，决定如何解决css规则的冲突。

简而言之，层叠和优先级决定了多条规则应用于同一元素时，谁胜出。

判定规则简单如下：

  1. 首先看样式表的来源：作者样式表胜于浏览器样式表（用户代理样式表）。当然要注意，作者样式表中的!important最厉害。所以最终是作者样式表中的!important > 作者样式表 > 浏览器样式表。
  2. 当来源无法解决冲突时，看优先级：行内样式 > ID数量多的选择器 > 类数量多的选择器 > 标签名数量多的选择器。
  3. 源码顺序：在源码中位置靠后的样式会覆盖位置靠前的样式。

伪类选择器和属性选择器优先级和类选择器相同。

a 标签样式定义顺序建议为link（链接）、visited（访问）、hover（悬停）、active（激活）就是因为源码的顺序，后边样式覆盖，会导致之前的样式不能展示。

继承则是影响元素样式的另外一种方式。

当不给元素设置样式时，某些元素会自动继承某个祖先元素的样式。

只有一些特定的属性能被继承（主要是和文本相关的）：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing

还有一些其他的属性也可以被继承，比如列表属性：list-style、list-style-type、list-style-position以及list-style-image。

表格的边框属性border-collapse和border-spacing也能被继承。注意，这些属性控制的是表格的边框行为，而不是常用于指定非表格元素边框的属性。

inherit关键字可以实现属性的继承，也可以强制继承那些不能被继承的属性。

initial 关键字可用于撤销元素样式，表示某个属性的初始值（默认值）。

说明声明display: initial等价于display: inline。不管应用于哪种类型的元素，它都不会等于display: block。这是因为initial重置为属性的初始值，而不是元素的初始值。inline才是display属性的初始值。

二、相对单位

em 和 rem

两者都是相对于字号的单位。

em基于当前元素的字号：当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。

如果声明font-size: 1.2em，1.2em会根据继承的字号来计算的。

同时用em指定一个元素的字号和其他属性。浏览器必须先计算字号，然后使用这个计算值去算出其余的属性值。这两类属性可以拥有一样的声明值，但是计算值不一样。

rem是相对于根元素（:root）字号的单位。

一般会用rem设置字号，用px设置边框，用em设置其他大部分属性，尤其是内边距、外边距和圆角。

案例：一个可以缩放的组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <style>
      .panel {
        padding: 1em;
        border-radius: 0.5em;
        border: 1px solid #999;

        font-size: 1rem; // 给组件设置一个可预测的字体
      }
      .panel > h2 {
        margin-top: 0;
        font-size: 0.8em;
        font-weight: blod;
        text-transform: uppercase;
      }
      .panel.large {
        font-size: 1.2rem; // 通过修改字体，使组件缩放
      }
    </style>
  </head>
  <body>
    <div class="panel large">
      <h2>Single-origin</h2>
      <div>
        We have built partnerships with small farms around the world
        tohand-select beans at the peak of season. We then carefully roastin
        <a href="/batch-size">small batches</a> to maximize theirpotential .
      </div>
    </div>
  </body>
</html>

这样可以在大号组件中使用样式panel large，正常组件中使用样式panel，甚至同理还可以实现一个小号组件。

视口的相对单位

  • vh：视口高度的1/100。
  • vw：视口宽度的1/100。
  • vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。
  • vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax）。

用vw设置元素的font-size，会根据视口大小的改变平滑过度。

但是存在一个问题：font-size: 2vw，在一个1200px的桌面显示器上，计算值为24px（1200的2%）。在一个768px宽的平板上，计算值约为15px（768的2%）。但是24px在大屏上来说太大了。更糟糕的是，在iPhone 6上会缩小到只有7.5px。

解决上述问题可以借助calc：font-size:calc(0.5em + 1vw)，0.5em保证了最小字号，1vw则确保了字体会随着视口缩放。这段代码保证基础字号从iPhone 6里的11.75px一直过渡到1200px的浏览器窗口里的20px。

CSS变量

css复用的一种方式，可以在:root中通过--className定义变量，那么该变量可以在整个网页中使用（var(--className,--className未被定义时的备用值)）。

自定义属性的声明能够层叠和继承：可以在多个选择器中定义相同的变量，这个变量在网页的不同地方有不同的值。像作用域一样，后边的变量会覆盖之前的。

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
    <style>
      :root {
        --main-bg: white;
        --main-color: blcak;
      }
      .panel {
        padding: 1em;
        margin: 1em;
        border-radius: 0.5em;
        border: 1px solid #999;
        font-size: 1rem;
        background-color: var(--main-bg);
        color: var(--main-color);
      }
      .panel > h2 {
        margin-top: 0;
        font-size: 0.8em;
        font-weight: blod;
        text-transform: uppercase;
      }

      .dark { // 重新定义变量
        --main-bg: black;
        --main-color: white;
      }
    </style>
  </head>
  <body>
    <div class="panel">
      <h2>Single-origin</h2>
      <div>
        We have built partnerships with small farms around the world
        tohand-select beans at the peak of season. We then carefully roastin
        <a href="/batch-size">small batches</a> to maximize theirpotential .
      </div>
    </div>

    <div class="dark">
      <div class="panel">
        <h2>Single-origin</h2>
        <div>
          We have built partnerships with small farms around the world
          tohand-select beans at the peak of season. We then carefully roastin
          <a href="/batch-size">small batches</a> to maximize theirpotential .
        </div>
      </div>
    </div>
  </body>
</html>

当然也可以使用js去更新变量的值。

转载自:https://juejin.cn/post/7270830167613947904
评论
请登录