重学前端013 --- 响应式网页设计 CSS网格布局

加载字体

字体样式表将加载三种不同的字体：Anton、Baskervville 和 Raleway。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"/>
<link rel="stylesheet"  href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>

图片延迟加载 loading=“lazy”

img 元素上的 loading 属性可以设置为 lazy，以告诉浏览器在需要（例如，当用户将图像滚动到视图中时）的时候才获取图像资源。
另外一个好处是，延迟加载的元素在加载非延迟元素之前不会加载——这意味着互联网连接速度较慢的用户可以查看你的页面的内容，而无需等待图像加载。

<img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"/ alt="freecodecamp logo" class-"hero-img" loading="lazy">

忽略访问来源 rel=“noreferrer”

Referer HTTP标头包含有关用户可能正在访问的页面的地址或URL的信息。
例如，这些信息可用于分析，以跟踪您的页面中有多少用户访问了freecodecamp.org。将rel属性设置为noreferrer会从HTTP请求中省略此信息。为你的a元素设置一个rel属性为noreferrer。

<a href="https://freecodecamp.org" target="_blank" rel="noreferrer">noreferrer</a>

blockquote

<blockquote>
  <hr/>
  <p class="quote">
    The entire curriculum should be a series of projects
  </p>
  <hr />
</blockquote>

<blockquote>是 HTML 中用于定义​​块级引用​​的语义化标签，通常用于标记来自其他来源的大段引文，如书籍、文章、演讲等，以便与普通文本区分开来。

了解它的核心特性和与行内引用 的区别，对比表格如下：

主要作用和优势

• ​​语义化清晰​​：明确告诉浏览器、搜索引擎和辅助技术（如屏幕阅读器）这是引用的内容，有助于​​SEO优化​​和​​可访问性​​。

• ​​默认样式​​：浏览器通常会自动为其添加左右外边距（约 40px），使其缩进，视觉上与周围内容分离。

• ​​提升可读性​​：使文章结构更清晰，读者更容易识别引用的部分

显示引用来源

若需在页面上​​可见地标注​​出处，可以在 <blockquote>内部或其后使用 <cite>元素

<blockquote cite="https://example.com/source">
  <p>被引用的文本内容...</p>
  <footer>— 作者名, <cite>作品名称</cite></footer>
</blockquote>

使用注意事项

• ​​与 <q>标签的区别​​：记住表格中的区别，​​短引用用 <q>​​，​​长引用用 <blockquote>​​。

• ​​内容嵌套​​：<blockquote>内可以包含其他块级元素，如段落 <p>、列表等，但不应再嵌套另一个 <blockquote>。

• ​​避免滥用​​：仅在真正引用外部内容时使用，不要仅为了缩进文本而使用它。

::before, ::after

*, ::before, ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

这段 CSS 代码是一个常用的全局样式重置片段，用于消除不同浏览器对元素的默认样式差异，并统一盒模型的计算方式。

• *​​：这是​​通配选择器​​，它会匹配文档中的所有 HTML 元素。
• ​​::before​​ 和 ​​::after​​：这两个是 ​​伪元素​​。它们不是实际存在于 HTML 文档中的元素，而是由 CSS 创建用于在特定元素的内容​​前面​​（::before）或​​后面​​（::after）插入装饰性或结构性的内容的虚拟元素.
• ​​box-sizing: border-box;​​：这条规则​​改变了盒模型的计算方式​​。

box-sizing

• 默认的盒模型（content-box）中，一个元素的总宽度 = width+ padding+ border。如果你设置了 width: 100px;和 padding: 10px;，元素的实际宽度会是 100px + 10px + 10px = 120px。

• 使用 border-box后，元素的总宽度就是你设置的 width，​​内边距（padding）和边框（border）的宽度都会包含在 width和 height之内​​。设置 width: 100px;和 padding: 10px;，元素的实际宽度仍然是 100px，内容区的宽度会自动减小为 100px - 10px - 10px = 80px。这让元素的尺寸计算更直观，更容易控制，特别是在进行响应式布局时。

为何同时选择 *, ::before, ::after？

::before和 ::after伪元素​​独立于它们所属的元素​​。即使你用 *选择了所有元素，这个选择器也不会自动应用到这些元素生成的伪元素上。
为了确保伪元素（它们经常被用来添加装饰性内容，如图标、形状等）也遵循同样的盒模型规则并且没有意外的间距， explicitly 将它们列入选择器是非常必要和良好的实践。

创建一个html选择器，并将其字体大小属性设置为62.5%。这将把网页的默认字体大小设置为10px（浏览器默认为16px）。
这将使你以后更容易使用 rem 单位，因为 2rem 将是 20px。

html {
  font-size: 62.5%;
}

grid-template-columns

main {
  display: grid;
  grid-template-columns: 1fr 94rem 1fr;
}

@media only screen and (max-width:720px) {
  .image-wrapper {
    grid-template-columns: 1fr;
  }
}

minmax(min, max)

使用minmax函数使列在任何设备上都有响应。minmax函数有两个参数，第一个是最小值，第二个是最大值。这些值可以是长度、百分比、fr，甚至是像max-content这样的关键字。

main {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(min-content,94rem) minmax(2rem, 1fr);
  row-gap: 3rem;
}

grid-column

grid-column 属性，它是 grid-column-start 和 grid-column-end 的简写。
grid-column 属性告诉网格项从哪条网格线开始和结束。

CSS repeat() 函数用于重复一个值，而不是手动写出它，这对网格布局很有帮助。 例如，将 grid-template-columns 属性设置为 repeat(20, 200px) 将创建 20 列，每列 200px 宽。

.heading {
  grid-column: 2 / 3; 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 1.5rem;
}

并将其 grid-column 属性设置为 1 / -1。 这将告诉元素跨越网格的整个宽度。
(这将允许第一个和第三个图像跨越网格的整个宽度。)

object-fit

object-fit 属性告诉浏览器如何在其容器中定位元素。 在这种情况下，cover 会将图像设置为填充容器，并根据需要进行裁剪以避免更改宽高比。

grid-auto-flow

grid-auto-flow此属性将 row 或 column 作为第一个值，第二个值可选 dense。
grid-auto-flow 使用自动放置算法来调整网格布局。 将其设置为 column，将告诉算法根据需要为内容创建新列。dense 值允许算法回溯并用较小的项目填充网格中的空白，这可能导致项目出现乱序。

.text {
  grid-column: 2 / 3;
  font-size: 1.8rem;
  letter-spacing: 0.6px;
  column-width: 25rem; /* 使用列宽属性在元素内创建列，而无需使用网格 */
  text-align: justify;
}

text-align: justify

text-align: justify;是 CSS 中用于实现文本​​两端对齐​​的属性值，它能让段落的左右边缘都整齐地对齐容器边界，呈现出类似报纸或杂志的排版效果。

给引用的名人名言添加引号：

.quote::before {
  content: '" ';
}

.quote::after {
  content: ' "';
}

column-gap

.text-with-images {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 3rem;
}

gap属性是一种同时设置列间隙和行间隙值的简写方式。如果给定一个值，它会将列间距和行间距都设置为该值。如果给定两个值，则将行间距设置为第一个值，将列间距设置为第二个值。

list 无样式

.lists {
  list-style-type: none;
}

place-items

place-items 属性可用于同时设置 align-items 和 justify-items 的值。 place-items 属性采用一个或两个值。 如果提供了一个值，则它同时用于 align-items 和 justify-items 属性。 如果提供了两个值，则第一个值用于 align-items 属性，第二个值用于 justify-items 属性。