CSS Day 3

最近几天练习 MDN-CSS Guide-CSS first steps overview 下的 Guides 部分。

练习 Demo 在「这里」。在 Demo 最后可以看到我的 scss 样式文件。

:root 设置 font-size 为 62.5%。然后对 body 的 font-size 设置为 1.6rem。此时的 1.6rem 相当于 16px。这样做可以轻松地将 px 向 rem 转换,方便进行响应式布局设计。

对所有元素的 box-sizing 的属性应用 border-box 值。通过阅读 box-sizing[1]了解到。

box-sizing 有两个值:content-box 和 border-box,前一个是默认值。

  • 当 box-sizing 的值为 content-box 时,如果设置元素宽度为 100px,边框宽度为 10px,那么最终该元素的宽度大约为 120px;
  • 当 box-sizing 的值为 border-box 时,如果设置元素宽度为 100px,边框宽度为 10px,那么最终该元素的宽度依旧是 100px。

因此,如果 box-sizing 的值设为 content-box,如果设置元素宽度为固定值,border、padding 的宽度会加入到元素宽度中;如果设置 border-box,则元素宽度即为给定值,border、padding 宽度不影响元素宽度。

整个 <body> 用到了 rgba(128, 128, 128, 0.9) 颜色,整个呈现一种暗灰色调。

.flexbox 用到了 flex 布局,它能够很方便地对元素进行一维排序。为其添加了 media query,使得 viewport 宽度 < 30em 时,.flexbox 的内容布局变成 column 并且居中。

MDN[2] 中对 em 单位的解释:

Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.

它的大小取决于两类要素:一个是父级元素的字体大小,一个是自身的字体大小。 后半句不理解。

为 h1 的内容设置了设置了 hover 动画——鼠标悬浮在标题内容上,会出现一个颜色变化的动画。

img 图片使用了 aspect-ratio[3],通过它可以很方便地设置纵横比。它是用来代替 width 和 height 设置的。

通过 id 和 class 练习了外部样式中顺序的优先级。也使用 nth-child(3) [4] 选中了第三个自然段。

在改变链接 a 的样式时,用 text-underline-offset[5] 把链接下划线向下偏移一定距离,让这个链接看起来明显且舒适。而且,还通过 a[href^"http"]= 属性选择器,为链接添加一个小图标,以暗示这是一个链接。主要通过 background: url('link.png') no-repeat 100% 0; 添加图标,background-size 调整大小,padding-right 调整图标相对文字位置。

接下来是一个 lists。一个是有序列表,一个是无序。无序列表的引导变成了 emoji;有序列表的序号也进行了一些修改。在 lists 中运用了大量 flex、grid 布局。主要使用 content 属性自定义列表的引导样式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<ul role="list">
  <li data-icon="🦄">Apple</li>
  <li data-icon="🌈">Banana</li>
  <li data-icon="😎">Orange</li>
</ul>

<ol role="list">
  <li>Apple</li>
  <li style="--li-bg: darkcyan">Banana</li>
  <li style="--li-bg: navy">Orange</li>
</ol>

对于 ul 首先如上述代码所示,添加 data-icon 属性,然后设置样式。

1
2
3
4
ul > li::before {
  content: attr(data-icon);
  font-size: 1.6rem;
}

attr()[6] 目前只能用于 content 属性。

对于 ol 用到了 counter-reset[7], counter-increment[8], counter()[9]

1
2
3
4
5
6
7
8
9
ol {
  --li-bg: purple;
  counter-reset: orderedlist;
  li::before {
    counter-increment: orderedlist;
    content: counter(orderedlist);
    background-color: var(--li-bg);
  }
}

除此之外,还设置了 --li-bg 变量,使得可以通过改变 --li-bg 的值来改变背景色。

还考虑到,在小屏幕上看的话需要将两列变成一列,这通过 flex-direction 实现。

下一个是通过 calc() 函数来动态改变盒子宽度的。

再下面可以看到四个盒子,左右两边是对称的。中间的竖黑线,不是第一次就知道怎么设置的。

1
2
3
4
5
6
7
8
<div class="flexbox2">
  <div class="outer">
    <div class="box"></div>
  </div>
  <div class="outer">
    <div class="box"></div>
  </div>
</div>

如上所示,我在 .box 外面又加了 .outer。通过对两个 .outer 设置 border 左右边框,来实现竖直线。

绿色方框的旋转是通过 transform[10] 实现的。

下一个应用了 @counter-style,一开始写好后发现列表怎么也不变,后来明白这种 at-rules 要写在最外面,不能嵌套在选择器内部。

1
2
3
4
5
6
@counter-style blacknwhite {
  // can't place it inside cascading scss
  system: cyclic;
  symbols:  ;
  suffix: ' ';
}

这里是 scss 语法,所以注释可以这样写。

接下来是:font, background, border, padding, margin 的快捷写法练习。background 设置三个 linear-gradient 颜色变得很是花哨。

最后记录了 CSS 的工作原理。

最后我想把 style.scss 也展示出来,用到以下代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
fetch('./style.scss')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not OK');
    }
    return response.text();
  })
  .then((result) => {
    const scssFile = document.getElementById('scssFile');
    const preElem = document.createElement('pre');
    const codeElem = document.createElement('code');
    codeElem.innerHTML = result;
    preElem.appendChild(codeElem);
    scssFile.appendChild(preElem);
  });

对应的,HTML 文件中要有 id 为 scssFile 的元素。

1
2
3
4
<details class="get-scss-content">
  <summary>scss style file</summary>
  <div id="scssFile"></div>
</details>

我加了 details [11] 元素是为了节省空间。

不过,将 scss 文件内容展示到页面上后,总是因为代码太长,无法在屏幕内看完,有些内容被遮住了,如果想看的话需要将页面向左移动才能看到被遮住的部分。于是,想到用 word-wrap[12] 或者 overflow-wrap[13] 解决。最开始,发现怎么改样式都没变,只有仔细看看样式代码,发现本应该用 #scssFile 选中对应元素的,却少写了 #

<code> 应用了 overflow-wrap: anywhere; 后还是不行,后来还发现 word-wrap 是 overflow-wrap 的别名,也就是说它们俩是一样的。而 word-break[14] 的所有属性都无法让文本产生样式变化。

直到读了这页内容[15],才发现 <pre> 包裹的内容的样式是默认无法被改变的。pre 已弃用的 wrap 属性介绍中,给了一种实现 pre 中换行的 CSS 方式:white-space[16]。终于,只通过 white-space: pre-wrap; 我便让 pre 标签内部的文本换行了。

Layout of comment panels