CSS介绍 | 青训营笔记

八重嘤
105 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

该文章是根据笔者在青训营课程与MDN上的CSS介绍以及自己所学编写而成，多为复习而用，人菜勿喷（求饶buff叠满）

因为个人原因过于基础的便不加赘述，接下来让我们进入css的殿堂大门吧。

控制继承

继承的概念便不多赘述，css为控制继承，提供了五个特殊通用属性值：

inherit:设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".

initial:设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

revert:将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。

revert-layer:将应用于选定元素的属性值重置为在上一个[层叠层]中建立的值。

unset:将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

什么是书写模式

CSS 中的书写模式是指文本的排列方向是横向还是纵向的。writing-mode属性使我们从一种模式切换到另一种模式。例如：

h1 {
  writing-mode: vertical-rl;
}

<h1>Play with writing modes</h1>

微信截图_20220727155738.png writing-mode的三个值分别是：

  • horizontal-tb: 块流向从上至下。对应的文本方向是横向的。
  • vertical-rl: 块流向从右向左。对应的文本方向是纵向的。
  • vertical-lr: 块流向从左向右。对应的文本方向是纵向的。

逻辑属性和逻辑值

两个盒子——一个用horizontal-tb设定了书写模式，一个用vertical-rl设定了书写模式。我为这两个盒子分别设定了宽度(width)。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。

微信截图_20220727160059.png

为了更容易实现这样的转变，CSS 最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。

横向书写模式下，映射到width的属性被称作内联尺寸（inline-size）——内联维度的尺寸。而映射height的属性被称为块级尺寸（block-size），这是块级维度的尺寸。下面的例子展示了替换掉width的inline-size是如何生效的。

.box {
  inline-size: 150px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}


<div class="wrapper">
  <div class="box horizontal">
    <h2>Heading</h2>
    <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    <p>These boxes have inline-size.</p>
  </div>
  <div class="box vertical">
    <h2>Heading</h2>
    <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    <p>These boxes have inline-size.</p>
  </div>
</div>

微信截图_20220727160333.png

CSS的部分值

vw为(视口宽度) 单位。这个值相对于视口宽度，所以 10vw是视口宽度的 10%。

vh为(视口高度) 单位。用法同vw

em 单位,是相对于字体大小的,概括地说，在排版属性中 em 单位的意思是“父元素的字体大小” 。

rem 单位的意思是“根元素的字体大小” ，从根元素 (<html>)中获取它们的大小

min-和 max-尺寸

如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个min-height属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

max-width的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。

字母和单词间距

letter-spacing和word-spacing属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。（不常用）

什么是网格布局？

一个网格通常具有许多的列（column） 与行（row） ，以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter） 。

image.png

display设置为grid将其转化为网格布局

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

微信截图_20220727190045.png

fr这个单位来灵活地定义网格的行与列的大小。

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

微信截图_20220727190131.png

使用grid-column-gap属性来定义列间隙；使用 grid-row-gap来定义行间隙；使用grid-gap可以同时设定两者。

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

微信截图_20220727190307.png

显式网格与隐式网格

显式网格是我们用grid-template-columns 或 grid-template-rows 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。显式网格与隐式网格的关系与弹性盒子的 main 和 cross 轴的关系有些类似。

隐式网格中生成的行/列大小是参数默认是auto，大小会根据放入的内容自动调整。当然，你也可以使用grid-auto-rows和grid-auto-columns属性手动设定隐式网格的大小。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}

微信截图_20220727190645.png

minmax 函数为一个行/列的尺寸设置了取值范围。比如设定为 minmax(100px, auto)，那么尺寸就至少为 100 像素，并且如果内容尺寸大于 100 像素则会根据内容自动调整。

自动使用多列填充

某些情况下，我们需要让网格自动创建很多列来填满整个容器。通过设置grid-template-columns属性，我们可以实现这个效果，不过这一次我们会用到repeat函数中的一个关键字auto-fill来替代确定的重复次数。而函数的第二个参数，我们使用minmax函数来设定一个行/列的最小值，以及最大值1fr。

内容可能不是特别齐全，但还是希望各位能学到点东西，下次js内容再见

avatar
文章
阅读
粉丝