Day 0: 初始 CSS
CSS （Cascading Style Sheets）是控制标签样式的一种表达式语言。CSS 描述了在标签应该如何渲染在屏幕上。比如控制标签的位置、尺寸、颜色、背景等等。
一般在开发中，开发者往往会单独创建一个 .css 文件，然后在 html 文件中去引用它。
使用语句
<link rel="stylesheet" href="./index.css"> 来实现对 css 样式的引用。这样在 .css 文件中描述的规则，就会在 html 的对应标签中生效。
当然也可以在 head 中直接创建 style 标签，为了清晰美观我们一般不这么做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">
<h1 class="title">CSS:层叠样式</h1>
<p>层叠样式表（Cascading Style Sheets，CSS）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
</p>
<span id="expand">展开CSS</span>
<span id="absPosition">固定位置</span>
<span id="fixedText"> 浮窗CSS </span>
</div>
<div >
<br><br><br><br><br><br><br>
<h1 >CSS:层叠样式</h1>
<p>层叠样式表（Cascading Style Sheets，CSS）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
</p>
</div>
</body>
</html>
我们来看 .css 文件内容。
注意：在指定对哪些标签生效的时候，有下面几种规范（目前我掌握的，欢迎补充）：
*号：通配- 标签名：例如
div {}，会对所有的 div 标签生效 - class：点开头，例如
.box {}，会对声明为 box 的标签生效 - id：井号开头，例如
#myContentView {}， 会对id为 myTextView 的标签生效 - nth-child:
div:nth-child(2)存在同样含义的标签时，我们取第 2 个，从 1 开始计数 - 上述规则的组合：
.box .title，.table div #expand等等
/* * 号通配 */
* {
margin: 0 0;
}
.box {
/* ====== 1. 尺寸位置 =====*/
width: 500px;
height: fit-content;
/* border 边框样式 */
border: 3px dotted grey;
border-radius: 20px 10px;
padding: 20px;
margin: 16px auto;
margin-left: auto;
/* box-sizing: border-box 可避免在 百分比宽高时，内外边距未计算在内，超出屏幕宽度 */
/* width: 100%; */
box-sizing: border-box;
/* ====== 2. 背景处理 =====*/
/* background color 和 image 二选一*/
background-color: #f9f9f9;
/* background-image: url(./bg.jpg); */
/* 阴影效果，字段含义：左右偏移 上下偏移 晕染范围 颜色 */
box-shadow: 25px 5px 20px rgb(91, 91, 103);
/* 对应知识点 4. 位置定位，对当前标签没有任何影响，但是对其内部标签会产生效果：在绝对位置定位时，以 box 作为参考而不是 body */
position: relative;
}
/* ====== 3. 文本处理 =====*/
.box p {
color: #666;
/* 首行缩进，2em 表示 2 个文字，可以随着字体大小自动控制 */
text-indent: 2em;
}
.box h1 {
font-size: 50px;
/* font-family: "黑体"; */
/* 字体粗细：普通 */
font-weight: normal;
/* 文字对其方式：居中 */
text-align: center;
/* 行高：1.5倍间距 */
line-height: 1.5em;
/* 文字阴影：参数和 上面背景阴影类似 */
text-shadow: 2px 2px 4px gray;
/* 文字注释：下划线 */
text-decoration: dashed underline skyblue;
/* 文字书写方向：水平写，换行从上到下 */
writing-mode: horizontal-tb;
}
.box span {
color: blue;
writing-mode: horizontal-tb;
/* 在竖排的时候，控制英文字母方向，为竖向 */
/* text-orientation: upright; */
}
/* ====== 4. 位置定位 =====*/
.box #absPosition {
writing-mode: vertical-lr;
/* 常用：绝对定位 */
position: absolute;
/* 绝对定位：默认以 body 左上角为参考点 */
/* 若要调整为父布局作为参考点，在父布局的 css 中声明 position 为 relative */
top: 100px;
right: 10px;
}
.box #fixedText {
color: green;
border: 3px double green;
writing-mode: vertical-lr;
/* 在竖排的时候，控制英文字母方向，为竖向 */
text-orientation: upright;
/* 常用：fixed 基于可视化区域来确定位置，常用场景：侧边栏、浮窗 */
/* 页面滚动时，标签位置依然不变 */
position: fixed;
/* 绝对定位：默认以 body 左上角为参考点 */
top: 100px;
left: 10px;
}
如上的页面效果：
本小节结束。
Day 1: Flex 弹性盒子布局
偷个懒。这边直接参考大哥整个站内文章吧：一文吃透 CSS Flex 布局 ，详细、易懂、全面。
5 年前，做 Flutter 的时候接触过 Row 和 Column 组件。此处 CSS 中的 Flex 布局特性就和 Flutter 中的 Row、Column 非常相似。Row 和 Column 可以理解为明确了主轴方向（flex-direction）的 Flex，都有主轴（Mian）和垂直轴（Cross）的概念。 这边不再展开了，直接参考站内文章。
