【无标题】

Name:Space-tourism

Creating a general reset

知识点回顾：

Modern CSS Reset / Global Styles

伪元素:before和:after用法

语法：

/* CSS3 语法 */
element::before { 样式 }
 
/*（单冒号）CSS2 过时语法 (仅用来支持 IE8) */
element:before  { 样式 }
 
/* 在每一个 p 元素前插入内容 */
p::before { content: "Hello world!"; }

这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）。可以用以下例子来说明：
 

   <p>wonyun!p>
    <style>
        p:before{content: "hello "}
        p:after{content: "you are handsome!"}
    style>

上面例子从技术角度看，等价于下面的html结构：

    <p>
        <span>hello span>
        wonyun!
        <span> you are handsome!span>
    p>

转：css伪元素:before和:after用法详解 - wonyun - 博客园

CSS3 box-sizing 属性

元素的总高度和宽度包含内边距和边框(padding 与 border) :

<style> 
#example1 {
  box-sizing: content-box;  
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}
 
#example2 {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}

 弹性盒

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒子 - 学习 Web 开发 | MDN

Grid

网格布局（Grid）是最强大的 CSS 布局方案。 Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

grid - CSS（层叠样式表） | MDN

Grid 和 flex的区别：

1. Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。
2. Grid 是二维布局系统，通常用于整个页面的规划。

一文搞懂grid布局 和 flex 布局及其区别 - 掘金

gap: var(--gap, 1rem)

指的是列于列之间的距离

.flex {
    display: flex;
    gap: var(--gap, 1rem);
}

:root是什么

:root 表示  元素，除了优先级更高之外，与 html 选择器相同

:root - CSS（层叠样式表） | MDN

var（）

有点像自定义函数，

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

在 :root 上定义，然后使用它

:root {
  --main-bg-color: pink;
}
 
body {
  background-color: var(--main-bg-color);
}

var() - CSS（层叠样式表） | MDN

Rem

REM的大小取决根元素的字体大小。根元素通过伪类:root或者html选择器选定。

因此1rem继承了根元素font-size的大小。 也就是说在整个CSS代码中1REM的大小保持不变。 如果用户没有修改根元素的大小，字体大小默认为 16px。

请看下面的例子:

html {
	font-size: 18px; // default value would be 16
}
 
h1 {
 	font-size: 2rem; // 2 * 18px = 36px;
}

.flow > *:not(:first-child)   /.flow > * + *  

大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。

所以说，flow类中下一代的所有元素，除了第一个孩子

创建一个原型的链接button

HTML

<a href="#" class="large-button uppercase ff-serif fs-600 text-dark bg-white">Explorea>

 CSS

.large-button {
    display: grid;
    place-items: center;
    padding: 0 2em;
    border-radius: 50%;
    aspect-ratio: 1;
    text-decoration: none;
}

 效果：

 aspect-ratio：纵横比

因为a是inline element,所以我们需要转化一下

place-items: 允许您在相关布局系统（如Grid或Flexbox ）中同时沿块方向和内联方向对齐项目（即和属性）